Css Chrome'涉及到什么；s重新计算样式事件？ TL；博士

是什么原因导致在Chrome中重新计算样式，以及可以采取什么措施来缩短此步骤的时间

背景 在具有许多元素（变量，例如10000）的应用程序中，我观察到在这些元素的父元素上添加类时，重新计算样式花费了很长时间。当容器具有此类时，选择器将影响每个子树的元素

在开发人员工具中，我可以通过单击此处（MCVE的屏幕截图）跟踪重新计算样式事件的原因：

从到名称，我假设此步骤涉及计算有效（最终）元素样式。我认为这种情况发生在

改变了元素样式

已更改的（伪）类

• 指元素本身或元素本身
• 由选择器或选择器关联的父元素或同级元素的

更改的CSS选择器（导入新CSS，生成

）

强制浏览器重新计算元素的CSS属性

试图证明我的论点 我创建了一个MCVE，使用与静态HTML相同数量的元素，并使用文档上的

单击
处理程序在
.container
上切换类
.change

MCVE的性能比实际应用程序好得多，步骤重新计算样式所需时间更少。这可能是因为树更简单，样式更少

然后，我开始向所有选择器添加更多样式，平均时间随着每一组新CSS属性的增加而增加。向10000子树添加更多元素不会改变平均时间

因此，我想说CSS属性的数量、受影响的选择器的数量和受影响的元素的数量都会影响这一次。
重新计算样式

获取所有样式规则
评估选择器并与DOM进行匹配
计算每个元素的计算样式
基本上，只要你改变一个类名或者其他类似的操作

参考资料




我对这个答案投了反对票，因为它并没有详细说明“重新计算样式”真正涉及到的内容，也没有承认OP的隐含问题，即如何确定是什么使得选择器的评估成本比其他选择器更高。