通过

排查常见性能问题

  • 项目

用户希望页面具有交互性和流畅性。 像素管道中的每个阶段都提供了引入呈现) 的简 (中断的机会。 了解用于识别和修复降低运行时性能的常见问题的工具和策略。

摘要

  • 不要编写强制浏览器重新计算布局的 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 辅助角色。
影响响应的长时间运行的 JavaScript。 DOMContentLoaded 事件在 JS 工作被淹没时停止。 将纯计算工作转移到 Web 辅助角色。 如果需要 DOM 访问，请使用 requestAnimationFrame。
影响响应或动画的垃圾脚本。 垃圾回收可能发生在任何地方。 编写更少的垃圾脚本。 请参阅 Paul Lewis 运行时性能清单中的动画垃圾回收。

样式

样式更改成本高昂，尤其是在这些更改影响 DOM 中的多个元素时。 每当向元素应用样式时，浏览器都会找出对所有相关元素的影响、重新计算布局和重新绘制。

样式：工具

在 性能 工具中录制。 检查录制中是否有以紫色) 显示 (大型 Recalculate Style 事件。

选择一个 Recalculate Style 事件，在“ 详细信息 ”窗格中查看有关该事件的详细信息。 如果样式更改需要很长时间，则这是性能下降。 如果样式计算影响大量元素，则这是另一个有改进空间的领域。

长重新计算样式

若要减少事件的影响 Recalculate Style ，请尽量减少使用触发布局、绘制和复合的 CSS 属性。 这些属性对呈现性能的影响最大。 有关详细信息，请参阅 坚持 Compositor-Only 属性和管理层计数

样式：问题

下表描述了一些常见的样式问题和潜在的解决方案。

问题 示例 解决方案
影响响应或动画的昂贵样式计算。 更改元素几何图形的任何 CSS 属性，例如宽度、高度或位置;浏览器检查所有其他元素并重新计算布局。 避免触发布局的 CSS
影响响应或动画的复杂选择器。 嵌套选择器强制浏览器了解所有其他元素（包括父元素和子元素）的所有内容。 仅使用 类引用 CSS 中的元素。

布局

Firefox) 中的布局 (或重排是浏览器计算页面上所有元素的位置和大小的过程。 Web 的布局模型意味着一个元素可能会影响其他元素：例如，元素的 <body> 宽度通常影响任何子元素的宽度，依此而行，一直影响树的上下。 浏览器可能非常涉及此过程。

作为一般经验法则，如果在帧完成之前要求从 DOM 返回几何值，你会发现自己使用“强制同步布局”，如果频繁重复或针对大型 DOM 树执行，这可能是一个很大的性能瓶颈。

布局：工具

“ 性能 ”窗格标识页面何时导致强制同步布局。 这些 Layout 事件用红条标记。

强制同步布局

“布局抖动”是强制同步布局条件的重复。 当 JavaScript 重复写入和读取 DOM 时，就会发生这种情况，这迫使浏览器反复重新计算布局。 若要识别布局抖动，请查找多个强制同步布局警告的模式。 请参阅上图。

布局：问题

下表描述了一些常见的布局问题和潜在的解决方案。

问题 示例 解决方案
影响响应或动画的强制同步布局。 强制浏览器在像素管道的前面执行布局，导致呈现过程中重复步骤。 先对样式进行批量读取，然后执行任何写入操作。
影响响应或动画的布局。 一个循环，将浏览器置于读-写-读-写循环，迫使浏览器反复重新计算布局。 使用 FastDom 库自动批处理读写操作。

绘制和复合

画图是填充像素的过程。 它通常是呈现过程中成本最高的部分。 如果你注意到页面未按设计方式工作，则可能是存在油漆问题。

合成是将页面的绘制部分组合在一起以在屏幕上显示的位置。 在大多数情况下，如果坚持只使用合成器属性并完全避免绘制，则应注意到性能有了重大改进，但需要针对过多的层计数watch。

绘制和复合：工具

若要了解绘制需要多长时间或绘制发生频率，请执行以下操作：

  1. 在 DevTools 的 “性能 ”工具中，单击“ 捕获设置 ” (“捕获设置”图标) 按钮，然后选择“ 启用高级呈现检测 ”复选框。

  2. 录制。

如果大部分渲染时间都花在绘制上，则存在绘制问题。 有关详细信息，请参阅性能功能参考中的启用高级呈现检测。

油漆和复合：问题

下表介绍了一些常见的油漆和复合问题以及潜在的解决方案。

问题 示例 解决方案
绘制影响响应或动画的风暴。 影响响应或动画的大绘制区域或昂贵的油漆。 避免绘制，提升移动到自己的层的元素，使用转换和不透明度。
影响动画的层爆炸。 过多的元素的过度提升会 translateZ(0) 极大地影响动画性能。 请谨慎地提升到层，并且仅在你知道它提供切实的改进时才升级。

注意

此页面的某些部分是根据 Google 创建和共享的作品所做的修改，并根据 Creative Commons Attribution 4.0 International License 中描述的条款使用。 原始页面 在这里 找到，由凯斯·巴斯克和梅金·卡尔尼创作。

Creative Commons 许可证 此作品根据 Creative Commons 署名 4.0 国际许可获得许可。