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

时间:2016-09-01 13:58:38

标签: javascript css performance repaint reflow

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

this post中,答案表明所有DOM突变都会导致重新涂抹或回流。 This article表明它们更有选择性地发生。属性可以在CSS选择器中定位,因此我的猜测是,必须有一些固有的成本,因为浏览器评估重绘或重排的可能性,但我不清楚这个成本可能有多大。

1 个答案:

答案 0 :(得分:0)

我刚刚在Chrome 52中测试了它,并在开发者工具中启用了Paint flashing选项。

当更改与其样式无关的DOM元素的属性时,我看到没有画面闪烁。既不是data-test="123"等自定义属性,也不是class="non-existing-class"

我认为您应该使用其他浏览器对此进行测试,但如果您需要,我也不会在设置属性时遇到问题。