Chrome 的重新计算样式事件涉及什么？

Question

TL; 博士

是什么导致在 Chrome 中重新计算样式以及如何减少此步骤的时间？

背景

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

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

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

1. 改变了元素样式，

2. 一个改变的（伪）类

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

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

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

尝试证明我的论文

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

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