禁用浏览器的重排\重绘

Posted 2023-02-21

【中文标题】禁用浏览器的重排\\重绘

【英文标题】：Disable the browser's reflow\redraw禁用浏览器的重排\重绘

【发布时间】：2017-02-10 12:53:45

【问题描述】：

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

这可能吗？

【问题讨论】：

它可能不会在每个元素之后重绘。需要注意的主要事情是在 DOM 添加/删除中穿插元素大小和位置等查询，因为这些查询将迫使浏览器重绘以便为您提供正确的答案。

您可以使用fragment 并将您的元素添加到该“元素”并在完成后附加它。

@Pointy 关于查询尺寸的有趣点。我没有考虑过。

【参考方案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>

【讨论】：

如果我只操作一个节点（及其子节点），这很有效。事实证明，我是。在你发布之前，我的脑海里突然出现了我已经把所有事情都复杂化了。