长话短说
是什么导致 Chrome 中的重新计算样式？如何才能减少此步骤的时间？
背景
在具有许多元素(变量，例如 10,000)的应用程序中，我观察到重新计算样式在这些元素的父元素上添加类时花费了很长时间。当容器有这个类时，有一些选择器会影响每个子树的元素。
在开发人员工具中，我可以通过单击此处(MCVE 的屏幕截图)来追踪 Recalculate Style 事件的原因:
从名称我假设这一步涉及计算有效(最终)元素样式。我认为这发生在
- 改变元素样式，
改变的(伪)类
- 元素本身或
- 由选择器或相关的父元素或兄弟元素
更改后的 CSS 选择器(导入新 CSS，生成
<style>)
强制浏览器重新计算元素的 CSS 属性。
尝试证明我的论点
我创建了一个 MCVE，其元素数量与静态 HTML 相同，并切换了一个类 .change在 .container 上使用 click文档上的处理程序 - 非常简单的代码。
MCVE 的性能比实际应用要好得多，重新计算样式这一步花费的时间更少。这可能是由于更简单的树和更少的样式。
然后我开始为所有选择器添加更多样式，平均时间随着每一组新 CSS 属性的增加而增加。向 10,000 个子树添加更多元素并没有改变平均时间。
所以，我想说这次影响的是 CSS 属性的数量、受影响的选择器的数量和受影响的元素的数量。
最佳答案
重新计算样式
- 获取所有样式规则
- 评估选择器并与 DOM 匹配
- 计算每个元素的计算样式
基本上任何时候你改变一个类名或其他类似的操作。
引用资料
关于css - Chrome 的重新计算样式事件涉及什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34698433/