排查常见性能问题

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

摘要

  • 不要编写强制浏览器重新计算布局的 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 中描述的条款使用。 原始页面 在此处 找到,由 凯斯·巴斯克 (技术作家、Chrome DevTools & Lighthouse) 和 Meggin Kearney (Technical Writer) 创作。

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