Javascript 更改容器元素中的属性是否总是导致重新绘制或回流？

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

---

在本例中，答案表明所有DOM突变都会导致重绘或回流。这表明它们更具选择性。属性可以在CSS选择器中定位，因此我猜测在浏览器评估重新绘制或回流的可能性时一定会有一些固有的成本，但我不清楚这一成本有多大。

我刚刚在Chrome 52中测试了它，并在开发者工具中启用了

绘制闪烁

选项

当更改与样式无关的DOM元素的属性时，我没有看到油漆闪烁。既不使用像

data test=“123”

这样的自定义属性，也不使用

class=“不存在的类”

---

我认为您也应该在其他浏览器上测试这一点，但如果您需要设置属性，我看不出有问题。

什么是“隐藏输入代理”？为什么您需要更改DOM属性呢？是的，当您更改DOM中的某些内容时，当然需要检查CSS规则，但不用担心，浏览器非常擅长高效地执行此操作。而且它们肯定会避免回流，这只有在元素的维度发生变化时才有必要。是的，有时使用比任何其他解决方案都更优雅的数据属性会带来好处。我非常感谢你的意见，Bergi。谢谢，很好的实验。谢谢你让我知道这个工具，克里斯托夫。