Performance 面板用右上角的红色三角形标记每个长时间运行的任务，并在 Summary 标签页中显示一条警告，表明主线程上需要很长时间才能运行且性能缓慢的工作：
在性能记录中，其中一些长时间运行的任务可能是重新计算样式事件。重新计算样式事件会跟踪浏览器执行以下操作所需的时间：
- 遍历页面上的 DOM 元素，以查找与指定元素匹配的所有 CSS 样式规则。
- 根据匹配的 CSS 样式规则，计算每个元素的实际样式。
当 CSS 规则的适用性发生变化时，需要重新计算 CSS 样式，例如：
- 向 DOM 中添加元素或从中移除元素。
- 更改元素的属性，例如类或 ID 属性的值。
- 用户做出输入（例如移动鼠标或更改元素焦点），这些都会影响
:hover规则。
长时间运行的 Recalculate Style 事件可能会给性能带来问题，而且可能会导致长时间呈现延迟，进而影响网站的 Interaction to Next Paint (INP)。如果您发现长时间运行的 Recalculate Style 事件，则可以使用选择器统计信息标签页来了解哪些 CSS 选择器耗时最长，并降低了性能。
选择器统计信息标签页提供关于性能记录中的一个或多个重新计算样式事件涉及的 CSS 规则选择器的统计信息。
在开启“选择器统计信息”的情况下记录性能跟踪记录
如需在长时间运行的重新计算样式事件期间查看 CSS 规则选择器的统计信息，请在开启选择器统计信息捕获设置的情况下记录性能跟踪记录。
如需使用选择器统计信息记录性能跟踪记录，请执行以下操作：
打开网页，例如照片图库演示页面。
打开开发者工具，然后前往 Performance 面板。
在 Performance（性能）面板中，点击 settings Capture settings 按钮，然后选中 check_box Enable CSS Selector stats（启用 CSS 选择器统计信息）。
点击 radio_button_checked 录制，运行要改善的场景，然后点击 radio_button_checked 停止。
然后，查看 CSS 选择器统计信息，如以下部分所述。
查看单个事件的 CSS 规则选择器统计信息
如需查看单个重新计算样式事件中涉及的 CSS 规则选择器的统计信息，请执行以下操作：
在性能记录中找到 Recalculate Style 事件，然后点击该事件。
在性能面板的底部，打开选择器统计信息标签页。
“选择器统计信息”标签页中的 CSS 选择器表格
选择器统计信息标签页包含 CSS 选择器表格。该表格会显示每个 CSS 选择器的以下信息：
| 列 | 说明 |
|---|---|
| 用时（毫秒） | 浏览器匹配此 CSS 选择器所用的时间。此时间以毫秒 (ms) 为单位，其中 1 毫秒为 1/1000 秒。 |
| 尝试匹配次数 | 浏览器引擎尝试与此 CSS 选择器匹配的元素数量。 |
| 匹配数 | 浏览器引擎与此 CSS 选择器匹配的元素数量。 |
| 慢路径不匹配项所占百分比 | 与此 CSS 选择器不匹配的元素与浏览器引擎尝试匹配的元素之间的比率，以及浏览器引擎使用优化程度较低的代码进行匹配的元素所占的比例。 |
| 选择器 | 匹配的 CSS 选择器。 |
| 样式表 | 包含 CSS 选择器的 CSS 样式表。 |
完成后，在性能面板中，打开 settings Capture settings 并清除 check_box 启用 CSS 选择器统计信息。
查看多个事件的 CSS 规则选择器统计信息
要查看多个重新计算样式事件涉及的 CSS 规则选择器的汇总统计信息，请将多个选择器统计信息表格复制到一个电子表格中，如下所示：
找到您感兴趣的第一个重新计算样式事件，然后点击该事件。
在性能面板的底部，打开选择器统计信息标签页。
右键点击选择器统计信息表格，然后选择复制表格。
将表格粘贴到电子表格（例如 Google 表格）中。
针对您感兴趣的其他重新计算样式事件重复上述步骤。
完成后，在性能面板中，打开 settings Capture settings 并清除 check_box 启用 CSS 选择器统计信息。
查看完整记录的汇总 CSS 规则选择器统计信息
如需查看整个性能记录中涉及的 CSS 规则选择器的汇总统计信息，请执行以下操作：
点击火焰图的空白区域以取消选择任何可能选中的事件。
选择整个录制范围。为此，请双击 Performance 面板顶部的 CPU 图表。
在性能面板的底部，打开选择器统计信息标签页。您会在顶部看到一个新行，其中包含所有选择器的总计数据。
完成后，在性能面板中，打开 settings Capture settings 并清除 check_box 启用 CSS 选择器统计信息。
分析 CSS 选择器统计信息
要按升序或降序对选择器统计信息表中的数据进行排序，请点击列标题。例如，要查看哪些 CSS 选择器占用的时间最多，请点击用时（毫秒）列标题。
要尝试提升网页性能，请重点关注符合以下条件的 CSS 选择器：
- 计算时间过长（用时（毫秒）值较高）。
- 浏览器尝试匹配多次（匹配尝试次数值较高）。
- 浏览器实际上并未匹配多个元素（与“Match Attempts”值相比，“Match Count”值较低）。
- 慢路径不匹配项占比较高。
例如，在上一个屏幕截图中：
- 第一个 CSS 选择器 (
html body .ps[tooltip...) 需要的时间最多。 - 浏览器引擎尝试匹配此 CSS 选择器 1104 次，但与任何元素都不匹配。
因此，此 CSS 选择器是第一个尝试改进的候选者。
请尝试更改 CSS 选择器，减少计算和匹配页面上的元素所需的时间。如何改进 CSS 选择器取决于您的具体应用场景。
重复本教程中的步骤，确认您所做的更改是否有助于缩短用时（毫秒）列中的重新计算样式事件时长。