禁用浏览器的 reflow\redraw

Question

我正在向 DOM 添加相当多的元素。我不希望浏览器在添加所有元素之前尝试重绘页面。

这可能吗？

Answer 1

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

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

const numbers = document.getElementById("numbers");
const button = document.getElementById("button");

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

  numbers.appendChild(temp_holder);
});

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

禁用浏览器的 reflow\redraw

Disable the browser's reflow\redraw

html

javascript

performance

dom

reflow