缩小样式计算的范围并降低其复杂性

Jeremy Wagner

Paul Lewis

JavaScript 通常会触发视觉变化。有时 直接通过样式操作进行更改，有时通过计算 更改，例如搜索数据或对数据进行排序。时机不合适或 长时间运行的 JavaScript 可能是导致性能问题的常见原因， 尽可能减少其影响。

样式计算

通过添加和移除元素、更改属性、类 或播放动画会导致浏览器重新计算元素样式， 例如网页的部分或完整布局。此过程称为 样式计算。

浏览器通过创建一组匹配的选择器来开始计算样式， 确定适用于任何指定元素的类、伪选择器和 ID。 然后，它会处理来自匹配选择器的样式规则， 元素的最终样式

注意： Blink（ Chromium 和派生浏览器）来计算元素的计算样式，即为 用于匹配选择器，而另一半用于构造 样式表示法。— Rune Lillesveen，Opera / Blink 中的样式失效机制

样式重新计算在交互延迟时间中的作用

Interaction to Next Paint (INP) 是一种以用户为中心的运行时 性能指标，用于评估网页对用户输入的总体响应情况。 它衡量从用户与网页互动到网页之间的互动延迟时间 而下一帧则会显示相应的视觉更新 界面

绘制下一次互动所用的时间是互动的一个重要组成部分 帧。用于呈现下一帧的渲染工作由许多部分组成， 包括计算在布局、绘制和 合成工作。本指南重点介绍样式计算开销， 互动总呈现时长的任何一部分也会减少其 延迟时间

降低选择器的复杂性

简化 CSS 选择器有助于加快网页的样式计算。 最简单的选择器会引用 CSS 中只包含类名的元素：

.title {
  /* styles */
}

但是，随着项目规模的扩大，它可能需要更复杂的 CSS， 选择器，如下所示：

.box:nth-last-child(-n+1) .title {
  /* styles */
}

要确定这些样式如何应用于网页，浏览器必须有效地 询问“此元素是否属于 title 类且其父类为 box 是其父元素的-nth-plus-1 子项吗？正在弄清楚 可能需要一些时间为了简化操作，您可以更改 选择器更改为更具体的类名称：

.final-box-title {
  /* styles */
}

这些替换类名称可能看上去不协调，但确实会导致浏览器 工作量要简单得多例如，在旧版本中，浏览器知道 元素是其类型的最后一个元素，因此必须先了解所有 以确定其后面的元素是否有可能 为 nth-last-child。这在计算上 仅根据元素的类名称将选择器与元素进行匹配。

减少要计算样式的元素数量

另一个性能考虑因素，通常比选择器更重要 复杂度是指当某个元素发生变化时需要完成的工作量。

一般来说，计算计算元素样式时最糟糕的开销就是 是元素数乘以选择器数，因为浏览器 每个元素至少要针对每种样式检查一次，看看它们是否 匹配。

注意 ：以前，如果您更改了一个元素的某个类，则其所有 则需要重新计算其计算样式。现在，有些浏览器 而是为每个元素分别维护一小组规则，导致 要重新计算的元素样式。这意味着 可能需要根据元素在树中的位置重新计算，并且 具体变化

样式计算可以直接针对少数元素，而无需失效 整个页面。在现代浏览器中，此问题一般不会那么大问题，因为 浏览器并不一定需要检查更改可能会影响的所有元素。 另一方面，旧版浏览器有时无法针对此类任务进行优化。地点 您应减少失效元素的数量。

注意 ：Web 组件中的样式计算略有不同，因为 样式不跨越 Shadow DOM 边界，并且范围限定为单个组件，而不是 整个树。不过，总体而言，同样的概念仍然适用：较小的树 规则越简单，处理速度就越好， 较为复杂。

衡量样式重新计算的开销

您可以通过多种方式测量重新计算样式的开销， 。每种方法都取决于是否希望在浏览器中进行衡量 或者想要衡量这个过程 真实用户的体验

在 Chrome 开发者工具中衡量样式重新计算的开销

衡量样式重新计算开销的一个方法是使用 面板。请按以下步骤开始操作：

1. 打开开发者工具。
2. 前往效果标签页。
3. 选中选择器统计信息复选框（可选）。
4. 点击录制。
5. 与网页互动。

停止录制后，您会看到如下图片：

<ph type="x-smartling-placeholder">

</ph>

显示样式计算的开发者工具报告。

顶部的条形是一个微型火焰图 。activity 越靠近条形底部，速度越快 哪些帧是由浏览器绘制的如果您看到火焰图逐渐平稳， 上面有红色条，则表示您 长时间运行的帧。

<ph type="x-smartling-placeholder">

</ph>

开发者工具活动中的长时间运行的帧 总结。

在滚动等互动过程中，长时间运行的帧 看看。如果您看到一个大的紫色区块，请放大该活动，然后选择任意一项 重新计算样式一文，以便详细了解 开销非常大的样式重新计算工作。

<ph type="x-smartling-placeholder">

</ph>

长时间的样式重新计算只需要 超过 25 毫秒。

点击事件会显示其调用堆栈。如果渲染工作是由 它会调用触发样式更改的 JavaScript。 还会显示受该变化影响的元素数量 - 刚好超过 900 个 元素，以及计算样式所用的时间。您可以使用 信息，开始尝试在代码中查找修复。

如果您勾选了选择器统计信息复选框 在“Performance Panel”（性能面板）设置中 轨迹面板中会有另一个同名标签页。

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

</ph> Chrome 的“效果”面板中显示的选择器统计信息表格 开发者工具。

此面板提供有关每个选择器相对费用的实用数据， 帮助您找出昂贵的 CSS 选择器。

<ph type="x-smartling-placeholder">

</ph> 注意：选择器统计信息默认处于关闭状态 因为这会增加性能录制的开销保持开启状态 您需要检查 重新计算样式事件和其他渲染信息。

如需了解详情，请参阅 CSS 选择器统计信息文档。

衡量真实用户的样式重新计算成本

如果您想知道为网页重新计算样式所需的时间 Long Animation Frames API 为您提供了实现这一目标所需的工具。此 API 中的数据已添加到 web-vitals JavaScript 库 包括样式重新计算时间。

如果您怀疑互动的呈现延迟是主要原因 是网页 INP 的贡献者，您就需要确定 重新计算网页上的样式所花费的时间。如需了解详情，请参阅 如何测量在字段中进行样式重新计算所用的时间。

资源

• Chrome 开发者工具中的选择器统计信息
• Blink 中的样式失效机制
• 从互动到下一次绘制 (INP)
• web-vitals JavaScript 库
• 测量字段中的样式重新计算时间

Unstone 中的主打图片，由 Markus Spiske 制作。