Chrome 的重新计算样式事件涉及什么？
What is involved in Chrome's Recalculate Style Event?
TL;DR
是什么原因导致 在 Chrome 中重新计算样式？如何才能减少此步骤的时间？
背景
在包含许多元素（变量，例如 10,000）的应用程序中，我观察到 重新计算样式 在添加 class[= 时需要很长时间 60=] 在这些元素的父元素上。当容器有这个 class.
时，有些选择器会影响每个子树的元素
在开发人员工具中，我可以通过单击此处（MCVE 的屏幕截图）来追踪 重新计算样式 事件的原因：
From to the name 我假设这一步涉及计算有效（最终）元素样式。我认为这发生在
- 改变了元素样式，
a改（伪）class
- 元素本身或
- 由选择器或
相关的父元素或兄弟元素
一个更改的 CSS 选择器（导入新的 CSS，生成 <style>）
强制浏览器重新计算元素的 CSS 属性。
尝试证明我的论文
我创建了一个 MCVE，其元素数量与静态 HTML 相同，并使用 click 处理程序在 .container 上切换 class .change在文档上 - 简单的代码。
MCVE 比实际应用程序执行得更好，步骤 重新计算样式 花费的时间更少。这可能是由于更简单的树和更少的样式。
然后我开始为所有选择器添加更多样式，平均时间随着每一束新 CSS 属性的增加而增加。向 10,000 个子树添加更多元素并没有改变平均时间。
所以，我想说 CSS 属性的数量、受影响的选择器数量和受影响的元素数量都会影响这次。
重新计算样式
- 获取所有样式规则
- 评估选择器并匹配 DOM
- 计算每个元素的计算样式
基本上任何时候你改变一个类名或其他类似的操作。
参考资料
TL;DR
是什么原因导致 在 Chrome 中重新计算样式？如何才能减少此步骤的时间？
背景
在包含许多元素（变量，例如 10,000）的应用程序中，我观察到 重新计算样式 在添加 class[= 时需要很长时间 60=] 在这些元素的父元素上。当容器有这个 class.
时，有些选择器会影响每个子树的元素在开发人员工具中，我可以通过单击此处（MCVE 的屏幕截图）来追踪 重新计算样式 事件的原因：
From to the name 我假设这一步涉及计算有效（最终）元素样式。我认为这发生在
- 改变了元素样式，
a改（伪）class
- 元素本身或
- 由选择器或 相关的父元素或兄弟元素
一个更改的 CSS 选择器（导入新的 CSS，生成
<style>）
强制浏览器重新计算元素的 CSS 属性。
尝试证明我的论文
我创建了一个 MCVE，其元素数量与静态 HTML 相同，并使用 click 处理程序在 .container 上切换 class .change在文档上 - 简单的代码。
MCVE 比实际应用程序执行得更好，步骤 重新计算样式 花费的时间更少。这可能是由于更简单的树和更少的样式。
然后我开始为所有选择器添加更多样式，平均时间随着每一束新 CSS 属性的增加而增加。向 10,000 个子树添加更多元素并没有改变平均时间。
所以，我想说 CSS 属性的数量、受影响的选择器数量和受影响的元素数量都会影响这次。
重新计算样式
- 获取所有样式规则
- 评估选择器并匹配 DOM
- 计算每个元素的计算样式
基本上任何时候你改变一个类名或其他类似的操作。
参考资料