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

Question

TL; DR

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

背景

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

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

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

时

1. 更改了元素样式

2. 更改（伪）类

   • 元素本身或
   • 由选择器或
   关联的父元素或兄弟元素

3. 更改的CSS选择器（导入新的CSS，生成<style>）

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

尝试证明我的论文

我使用与静态HTML相同数量的元素创建了一个MCVE，并使用文档上的.change处理程序在.container上切换类click - 简单的死代码。

MCVE比实际应用程序表现更好，步骤重新计算样式花费的时间更少。这可能是因为树更简单，样式更少。

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

所以，我要说的是CSS属性的数量，受影响的选择器的数量以及受影响的元素的数量会影响这一次。

Answer 1

重新计算风格

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

基本上每当你改变类名或其他类似的操作时。

<强>参考

• https://youtu.be/0xx_dkv9DEY?t=204
• https://developers.google.com/web/fundamentals/performance/rendering/reduce-the-scope-and-complexity-of-style-calculations