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