css – Chrome的重新计算风格活动涉及什么？

2024年2月4日 318次阅读

TL; DR

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

背景

在具有许多元素(变量,例如10,000)的应用程序中,我在重新计算样式时需要花费很长时间才能在这些元素的父元素上添加类.当容器具有此类时,存在将影响每个子树的元素的选择器.

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

从名称到我假设这一步涉及计算有效(最终)元素样式.我认为这发生在

>改变了元素风格,
>一个改变的(伪)类

>元素本身或
>由选择器或相关的父元素或兄弟元素的>

>一个改变的CSS选择器(导入新的CSS,生成< style>)

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

试图证明我的论文

我使用与静态HTML相同数量的元素创建了一个MCVE,并使用文档上的单击处理程序切换.container上的类.change.这是一个简单的代码.

MCVE比实际应用程序执行得更好,步骤Recalculate Style花费的时间更少.这可能是由于树更简单,风格更少.

然后我开始为所有选择器添加更多样式,平均时间随着每一堆新CSS属性的增加而增加.向10,000个子树添加更多元素并未改变平均时间.

所以,我会说CSS属性的数量,受影响的选择器的数量以及受影响的元素的数量会影响这一次.

最佳答案重新计算风格

>获取所有样式规则
>评估选择器并与DOM匹配
>计算每个元素的计算样式

基本上任何时候你改变类名或其他类似的操作.

参考