更改容器元素中的属性是否总是会导致重绘或回流?

Does changing attributes in a container element always cause repaints or reflows?

本文关键字：元素是否属性更新时间：2023-09-26

通过JavaScript更改主容器元素中的信息属性(如数据属性(甚至是CSS类))是否会影响性能，即使没有相关的CSS?(DOM的表示没有相关的更改。)例如，将相同的属性更改降级到隐藏的输入代理中会更好吗?

在这篇文章中，一个答案表明所有DOM突变都会导致重绘或回流。这篇文章表明，它们更有选择性地发生。属性可以在CSS选择器中定位，所以我的猜测是，当浏览器评估重绘或回流的可能性时，必须有一些固有的成本，但我不清楚这个成本有多重要。

我刚刚在Chrome 52中测试了Paint flashing选项在开发人员工具中启用。

当改变一个DOM元素的属性，而这个属性与它的样式无关时，我没有看到油漆闪烁。既不使用自定义属性，如data-test="123"，也不使用class="non-existing-class"。

我认为你也应该在其他浏览器上测试一下，但如果你需要设置属性，我不认为这是一个问题。