用户期望交互式和流畅的页面。 像素管道中的每个阶段都表示引入垃圾 (呈现) 中断的机会。 了解用于识别和修复降低运行时性能的常见问题的工具和策略。
摘要
请勿编写强制浏览器重新计算布局的 JavaScript。 分离读写函数，并先执行读取。
不要使 CSS 过于复杂。 少用 CSS，保持 CSS 选择器简单。
尽量避免布局。 选择完全不触发布局的 CSS。
绘制可能比任何其他渲染活动占用更多时间。 注意画图瓶颈。
JavaScript
JavaScript 计算（尤其是触发大量视觉更改的计算）可能会停滞应用程序性能。 不要让时机不当或长时间运行的 JavaScript 干扰用户交互。
JavaScript：工具
在“ 性能 ”工具中进行录制，并查找可疑的长 Evaluate Script 事件。
如果注意到 JavaScript 中的呈现) 存在相当多的垃圾 (中断，则可能需要将分析提升到一个级别并收集 JavaScript CPU 配置文件。 CPU 配置文件显示运行时在页面函数中花费的位置。 了解如何在 “加速 JavaScript 运行时” (“分配采样”分析类型) 中创建 CPU 配置文件。
JavaScript：问题
以下是常见的 JavaScript 问题和可能的解决方案。
| 问题 | 示例 | 解决方案 |
|---|---|---|
| 影响响应或动画的昂贵输入处理程序。 | 触控、视差滚动。 | 让浏览器处理触摸和滚动，或者尽可能晚地绑定侦听器。 请参阅 Paul Lewis 所著的《运行时性能清单》中的“昂贵的输入处理程序”。 |
| 不合时理的 JavaScript 影响响应、动画、加载。 | 用户在页面加载后立即滚动，setTimeout / setInterval。 | 优化 JavaScript 运行时：使用 requestAnimationFrame，在帧上传播 DOM 操作，使用 Web 工作进程;请参阅使用 Web 工作进程。 |
| 长时间运行的 JavaScript 影响响应。 | DOMContentLoaded 事件停止，因为它被 JavaScript 工作淹没了。 | 将纯计算工作转移到 Web Workers;请参阅 使用 Web 工作线程。 如果需要 DOM 访问权限，请使用requestAnimationFrame |
| 影响响应或动画的垃圾脚本。 | 垃圾回收可能发生在任何地方。 | 编写更少的垃圾脚本。 请参阅 Paul Lewis 的《运行时性能清单》中的动画中的垃圾回收。 |
样式
样式更改成本高昂，尤其是当这些更改影响 DOM 中的多个元素时。 每当您将样式应用于元素时，浏览器都会确定对所有相关元素的影响，重新计算布局并重新绘制。
样式：工具
在 “性能 ”工具中进行录制。 检查录制的大型 Recalculate Style 事件 (以紫色) 显示。
选择一个 Recalculate Style 事件以在 详细信息 窗格中查看有关该事件的详细信息。 如果风格更改需要很长时间，那就是性能下降。 如果样式计算影响大量图元，则这是另一个有改进空间的领域。
为了减少事件的影响 Recalculate Style ，请尽量少使用触发布局、绘制和复合的 CSS 属性。 这些属性对渲染性能的影响最大。 有关详细信息，请参阅“如何创建高性能 CSS 动画”中的“避免触发布局或绘画的属性”，web.dev。
风格：问题
下表描述了一些常见的样式问题和潜在的解决方案。
| 问题 | 示例 | 解决方案 |
|---|---|---|
| 影响响应或动画的昂贵样式计算。 | 更改元素几何图形（如宽度、高度或位置）的任何 CSS 属性;浏览器会检查所有其他元素并重新计算布局。 | 避免触发布局的 CSS。 |
| 影响响应或动画的复杂选择器。 | 嵌套选择器强制浏览器了解所有其他元素的所有信息，包括父元素和子元素。 | 仅使用类在 CSS 中引用元素。 |
布局
Firefox) 中的布局 (或 重排 是浏览器计算页面上所有元素的位置和大小的过程。 Web 的布局模型意味着一个元素可能会影响其他元素;例如，元素的 <body> 宽度通常会影响任何子元素的宽度，依此类推，一直到树的上下。 对于浏览器来说，此过程可能非常复杂。
作为一般经验法则，如果你在帧完成之前从 DOM 请求几何值返回，你会发现自己使用“强制同步布局”，如果频繁重复或为大型 DOM 树执行，这可能是一个很大的性能瓶颈。
布局：工具
“ 性能 ”窗格标识页面何时导致强制同步布局。 这些 Layout 事件用红色条标记。
“布局抖动”是强制同步布局条件的重复。 当 JavaScript 反复写入和读取 DOM 时，会发生这种情况，这会强制浏览器一遍又一遍地重新计算布局。 要识别布局抖动，请查找多个强制同步布局警告的模式。 请参阅上图。
布局：问题
下表描述了一些常见的布局问题和潜在的解决方案。
| 问题 | 示例 | 解决方案 |
|---|---|---|
| 影响响应或动画的强制同步布局。 | 强制浏览器在像素管道中更早地执行布局，导致呈现过程中重复步骤。 | 先批量样式读取，然后进行任何写入。 |
| 影响响应或动画的布局抖动。 | 一个循环，它将浏览器置于读写读写循环中，迫使浏览器一遍又一遍地重新计算布局。 | 使用 FastDom 库自动批量读写操作。 |
绘画和复合
画图是填充像素的过程。 它通常是渲染过程中成本最高的部分。 如果您发现您的页面没有以任何方式按预期工作，则可能是您的画图出现问题。
合成是将页面的绘制部分组合在一起以显示在屏幕上。 在大多数情况下，如果您坚持使用仅合成器的属性并完全避免绘制，您应该会注意到性能的显着提高，但您需要注意过多的层数。
绘画和复合：工具
要了解绘画需要多长时间或绘画的频率：
在 DevTools 的性能工具中，单击“记录设置” (
) 按钮，然后选中“启用高级渲染检测”复选框。进行录制。
如果您的大部分渲染时间都花在绘制上，则您存在绘制问题。 有关详细信息，请参阅性能功能参考中的启用高级绘制检测。
油漆和复合材料：问题
下表描述了一些常见的油漆和复合材料问题以及潜在的解决方案。
| 问题 | 示例 | 解决方案 |
|---|---|---|
| 影响响应或动画的绘制风暴。 | 大油漆区域或昂贵的油漆会影响响应或动画。 | 避免绘制，提升正在移动到其自身图层的元素，使用变换和不透明度。 |
| 影响动画的图层爆炸。 | 过度提升过多的元素会极大地 translateZ(0) 影响动画性能。 |
谨慎地提升到图层，并且只有在您知道它提供切实的改进时。 |
注意
此页面的某些部分是根据 Google 创建和共享的作品所做的修改，并根据 Creative Commons Attribution 4.0 International License 中描述的条款使用。 原始页面可在 此处 找到，由 Kayce Basques 和 Meggin Kearney 撰写。
本作品根据 知识共享署名 4.0 国际许可证获得许可。