Question

我在DOM中添加了不少元素。我不希望浏览器尝试重绘页面，直到添加完所有元素。

这可能吗？

Answer 1

只需创建一个新元素，将所有元素添加到该元素，然后最后将该元素添加到DOM，这样它只会重绘一次。

在不向html添加额外中间节点的情况下执行此操作的一种方法是使用DocumentFragment

＆＃13;

const numbers = document.getElementById("numbers");
const button = document.getElementById("button");

button.addEventListener("click", function() {
  const temp_holder = new DocumentFragment();
  for(i=1;i<6;i++) {
    const li = document.createElement("li");
    li.textContent = i.toString();
    temp_holder.appendChild(li);
  }

  numbers.appendChild(temp_holder);
});

＆＃13;

<ul id="numbers">
  <li>0</li>
</ul>
<button id="button" type="button">Add numbers</button>

＆＃13;

禁用浏览器的reflow \ redraw

1 个答案: