JavaScript 计算（尤其是触发大量视觉对象更改的计算）可能会停止应用程序性能。 不要让时间过长或长时间运行的 JavaScript 干扰用户交互。

JavaScript：工具

在 性能 工具中录制内容，并查找可疑的长 Evaluate Script 事件。

如果发现 JavaScript 中呈现) (中断，可能需要将分析提升到一个级别并收集 JavaScript CPU 配置文件。 CPU 配置文件显示运行时在页面函数中的使用位置。 了解如何在 “加快 JavaScript 运行时” 中创建 CPU 配置文件。

JavaScript：问题

下表介绍了一些常见的 JavaScript 问题和可能的解决方案。

影响响应、动画和负载的不及时 JavaScript。 用户立即在页面加载后滚动，setTimeout/setInterval。 优化 JavaScript 运行时：使用 requestAnimationFrame ，将 DOM 操作分散到帧上，使用 Web 辅助角色 。 影响响应的长时间运行的 JavaScript。 DOMContentLoaded 事件 在 JS 工作被淹没时停止。 将纯计算工作转移到 Web 辅助角色 。 如果需要 DOM 访问，请使用 requestAnimationFrame 。 影响响应或动画的垃圾脚本。 垃圾回收可能发生在任何地方。 编写更少的垃圾脚本。 请参阅 Paul Lewis 运行时性能清单中的动画垃圾回收 。

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

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

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

样式：问题

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

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

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

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

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

布局：问题

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

绘制和复合

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

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

绘制和复合：工具

想知道绘画需要多长时间或绘画发生频率吗？ 检查 “性能 ”面板中 的“启用高级油漆检测 ”设置，然后进行录制。 如果大部分渲染时间都花在绘制上，则存在绘制问题。

油漆和复合：问题

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

此页面的某些部分是根据 Google 创建和共享的 作品所做的修改，并根据 Creative Commons Attribution 4.0 International License 中描述的条款使用。 原始页面 在此处 找到，由 Kayce Basques (Technical Writer、Chrome DevTools & Lighthouse) 和 Meggin Kearney (Technical Writer) 创作。

此作品在 Creative Commons 署名 4.0 国际许可下获得许可 。