JavaScript 探查器工具

JavaScript Profiler 工具已被性能工具和内存工具所取代。****

有关性能 工具 ，请参阅 开始分析运行时性能。

有关内存 工具 ，请参阅 修复内存问题。

分析结果

录制页面的性能后，可以评估页面的性能并查找任何性能问题的原因。

1. CPU 图表沿顶部显示。 CPU 图表中的颜色对应于 “性能”工具底部摘要面板中的颜色。 CPU 图表显示这些区域占了很大的区域，这意味着在录制过程中 CPU 已用完。 每当 CPU 长时间用完时，这一指示你应找到减少工作的方法。

   

2. 将鼠标悬停在 CPU 或 NET 图表上。 DevTools 将显示该时间点处的页面截图。 左右移动鼠标以重播录音。 该操作称为 “擦洗”，可用于手动分析性能录制的进度。

   

显示器指示网页性能不佳。 在实际情况下，页面是否运行良好可能不太清楚，因此，让所有用于进行度量的工具都派上用场。

附赠：打开 FPS 计数

另一个非常方便的工具是 FPS 计数，可在页面运行时提供对 FPS 的实时估计。

1. 按“Ctrl+Shift+P”(Windows、Linux)或“Command+Shift+P”(macOS)以打开“命令菜单”。

2. 开始在命令菜单中键Rendering入，然后单击 “显示呈现”。

3. 在呈现工具 中，打开 FPS 指示器。 新的叠加层将显示在视线的右上角。

   

4. 关闭 FPS 计量 并按 Escape 下以关闭 呈现 工具。 本教程中未使用 FPS 计量 。

查找瓶颈

测量并验证动画性能不佳后，下一步是回答“为什么？”问题。

1. 如果未选择任何事件， 摘要 面板将显示活动的细目。 页面大部分时间都在渲染。 由于性能是减少工作量的艺术，因此你的目标是减少花费在进行绘制工作上的时间。

   

2. 展开重点部分。 DevTools 将显示一段时间内主线程上活动的帧图表。 x 轴表示一段时间内的记录。 每个条形表示一个事件。 宽条表示该事件花费了更长的时间。 Y 轴表示调用堆叠。 当事件堆叠在一起时，这意味着上面的事件导致了下面的事件。

   

3. 录制中有很多数据。 若要缩放到单个事件，请单击、按住光标并拖动光标， 该概述是包含 FPS、 CPU 和 NET 图表的部分。 “ 主 ”部分和 “摘要” 面板仅显示所选录制部分的信息。

   

   缩放的另一种方法是将焦点放在 Main 部分，单击背景或事件，然后按W下，A``S或D。

4. 重点关注动画帧触发事件右上角的红色三角形。 每当显示红色三角形时，都会显示一个警告，指出可能存在与事件相关的问题。

   每当运行 requestAnimationFrame() 时，将发生 动画帧触发事件。

5. 单击动画帧触发事件。 “摘要”面板现在将显示有关该事件的信息。 请注意“显示”链接。 单击后，DevTools 将突出显示启动 动画帧触发 事件的事件。 另外，请关注app.js:95链接。 单击后，将显示源代码中的相关行。

   

   单击事件后，使用箭头键选择旁边的事件。

6. 在 app.update 事件下，有一堆紫色事件。 如果每个紫色事件都比较宽，看起来每个事件上可能都有个红色三角形。

7. 单击其中一个紫色 布局 事件。 DevTools 在摘要面板中提供了有关事件详细信息。 事实上，对于 布局) ，有关于强制重新流 (另一个词的警告。

8. 在 “摘要”面板中，单击“强制布局”下的 “app.js：71”链接。 DevTools 将转到强制布局的代码行。

   

   这段代码的问题在于，在每个动画帧中，它都会改变每个图标的样式，然后查询每个图标在页面上的位置。 由于样式已更改，因此浏览器不知道每个图标位置是否已更改，因此必须重新布局图标才能计算新位置。

这有许多需要学习。 现在，已经为分析运行时性能的基本工作流程打下了坚实的基础。 太棒了。

附赠：分析优化的版本

使用刚刚学习的工作流和工具，单击演示中的 “优化 ”以打开优化的代码，进行另一个性能录制，然后分析结果。 从改进的帧速率到“主”节中绘制图表事件的减少，应用的优化版本执行的工作要少得多，从而产生更好的性能。

即使是优化的版本也不是很好，因为它会操作 top 每个图标的属性。 更好的方法是保留仅影响合成的属性。

后续步骤

为了更加熟悉性能工具，需要多加练习。 试着对页面进行剖析并分析结果。 如果对结果有任何疑问，请使用 “发送反馈”图标，按 Alt``I``Shift++ (Windows、Linux) 或Option``Shift++I (macOS) ，或在 DevTools 团队中发布推文。 如果可能，请包括屏幕截图或指向可重现页面的链接。

最后，可通过多种方法来改善运行时性能。 本文重点介绍一个特定的动画瓶颈，让你重点了解 性能 工具，但这只是你可能会遇到的许多瓶颈之一。

 备注

此页面的某些部分是根据 Google 创建和共享的作品所做的修改，并根据 Creative Commons Attribution 4.0 International License 中描述的条款使用。 原始页面位于此处，由 Kayce Basques\（Chrome DevTools 和 Lighthouse 的技术作家）撰写。