Element.setAttribute触发重排吗？

Question

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

通常，我认为任何使浏览器计算值/可见变化的东西都会触发重排/重绘。

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

Answer 1

  

但是，我无法将自己包裹在Element.setAttribute周围。可以   在Chrome中触发重排/重绘？

setAttribute与重涂/重涂没有直接关系。这取决于您设置的属性以及设置的元素类型。如果更改复选框的value，则不会发生重绘或重熔，但是如果更改value的{​​{1}}，则将发生重绘和重熔。

  

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

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

1. 在每次迭代时都不要从循环内更新DOM。 循环会导致重画/重排。

   • 相反，您可以构建一个HTML字符串，并且当循环为
     时 完成后，一次插入字符串并获取所有更新。
   • 您还可以创建和使用尚未添加到DOM树中并且仅存在于内存中的元素。然后，您可以将这些元素放置在本身还不属于DOM的单个容器中。最后，您可以将容器添加到DOM中，并只需一次进行重绘/重焊。
2. 如果您要进行许多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/