性能
工具突出显示具有红色三角形的长任务，以指示main线程上花费的时间太长且性能缓慢：
在性能记录中，其中一些长时间运行的任务可能是
“重新计算样式
”事件。 这些事件跟踪浏览器循环访问页面上的 DOM 元素所需的时间，查找与给定元素匹配的所有 CSS 样式规则，然后基于这些规则计算元素的实际样式。 每当 CSS 规则的适用性发生更改时，都需要重新计算这些样式，例如：
元素添加到 DOM 或从 DOM 中删除。
元素的属性已更改，例如
class
或
id
。
发生用户输入，例如鼠标移动或焦点更改，这可能会影响
:hover
规则。
长时间运行的
“重新计算样式”
事件时，可以使用
“选择器统计信息”
功能来了解哪些 CSS 选择器占用的时间最多，从而导致性能降低。
如何使用选择器统计信息
若要在
重新计算样式
事件期间查看
选择器统计信息
，请执行以下操作：
在
“性能
”工具中，单击“
捕获设置”
(
) 。
单击“
启用高级呈现检测 (慢)
”以打开设置。 请注意，此设置会增加性能录制的开销，因此仅当需要录制
选择器统计信息
和其他呈现信息时，才应将其保持打开状态。
单击“
记录
”并运行要针对网站或应用改进的方案。
单击“停止”
。
找到
“重新计算样式
”事件并单击它。
在
“性能
”工具的底部，单击“
选择器统计信息
”：
性能
工具的
“选择器统计信息
”部分显示：
CSS 选择器的表。
浏览器计算样式规则所花费的时间。
选择器匹配的元素数。
分析选择器统计信息
单击列标题，可以按升序或降序对
选择器统计信息
表中的数据进行排序。 例如，按降序对
“运行时间” (μs)
列进行排序，以查看所选的
“重新计算样式
”事件中哪些选择器占用的时间最多。
一般情况下，如果你发现一个 CSS 选择器在浏览器上花费了很长时间进行计算，并且多次匹配，那么这是一个很好的候选项，可以尝试改进。 尝试更改选择器，以便计算和匹配页面上较少的元素所需的时间。 如何改进 CSS 选择器取决于特定用例。 重复上一部分中的步骤，确认更改是否有助于缩短
“重新计算样式
”事件的持续时间。
性能工具简介
- 在 DevTools 中分析运行时性能的简介。
性能特征参考
- 涵盖
性能
工具中的许多功能。
CSS 选择器性能的真相
