Element.setAttribute 是不是触发重排？

Posted 2023-02-21

【中文标题】Element.setAttribute 是不是触发重排？

【英文标题】：Does Element.setAttribute trigger reflow?Element.setAttribute 是否触发重排？

【发布时间】：2019-10-08 05:03:11

【问题描述】：

我开始了解浏览器的内部工作原理，遇到了reflow / repaint 机制（和how it applies to React，但我不想跑题）。

一般来说，我认为任何让浏览器计算值/可见更改的东西都会触发重排/重绘。

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

【参考方案1】：

但是，我无法理解 Element.setAttribute。可以 在 Chrome 中触发重排/重绘？

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

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

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

永远不要在循环中更新 DOM，因为每次迭代 循环可能会导致重绘/重排。

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

有许多资源可用于学习如何减少性能损失：

http://www.stubbornella.org/content/2009/03/27/reflows-repaints-css-performance-making-your-javascript-slow/

https://www.sitepoint.com/10-ways-minimize-reflows-improve-performance/