分析运行时性能 - Microsoft Edge Development

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

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

下表介绍了一些常见的 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) 创作。