Element.setAttribute 是否会触发回流？

Question

我开始学习浏览器的内部工作原理，并遇到了回流/重绘机制（以及它如何应用于 React，但我不想离题）。

一般来说，我认为任何使浏览器计算值/可见更改的行为都会触发回流/重绘。

然而，我却无法理解Element.setAttribute。它会触发 Chrome 中的回流/重绘吗？更新dom树中多个元素属性最有效的方法是什么？

Answer 1

但是，我无法理解 Element.setAttribute。它会触发 Chrome 中的回流/重绘吗？

setAttribute与重绘/回流没有直接关系。这取决于你设置什么属性以及设置它的元素类型。如果更改value复选框的，则不会发生重绘或回流，但如果更改valuea 的<input type="button">，则会发生重绘和回流。

更新dom树中多个元素属性最有效的方法是什么？

“最有效”很难回答，因为每个浏览器都可以进行优化以以不同的速度执行任务。但是，一般来说，您可以遵循以下准则：

切勿在循环内更新 DOM，因为循环的每次迭代都可能导致重绘/回流。
- 相反，您可以构建一串 HTML，并在循环
  完成时注入该字符串一次并获取所有更新。
- 您还可以创建和使用尚未添加到 DOM 树且仅存在于内存中的元素。然后，您可以将这些元素放置在一个容器中，该容器本身还不是 DOM 的一部分。最后，您可以将容器添加到 DOM 并仅进行一次重绘/回流命中。
如果您正在进行许多 CSS 操作，并且遇到性能问题，您可能需要查看will-change CSS 属性，它可以提高性能。

有许多资源可用于了解如何减少性能影响：