Chrome 开发者工具：Chrome 58 中的 JavaScript CPU 性能分析

Kayce Basques

Twitter GitHub Glitch

在 Chrome 58（目前为 Canary 版）中，“时间轴”面板已重命名为“性能”面板，“配置文件”面板已重命名为“内存”面板，“配置文件”面板上的“记录 JavaScript CPU 配置文件”功能已移至更隐藏的位置。

从长期目标是移除旧的 JavaScript CPU 性能分析器，让所有人开始使用新的工作流。

这本小小的迁移指南将向您介绍如何在“性能”面板中记录 JS 配置文件，以及“性能”面板的界面如何映射到您熟悉的旧工作流。

访问旧版 JavaScript CPU 性能分析器

如果您更喜欢“分析”面板上提供的旧版“记录 JavaScript CPU 配置文件”工作流，仍可以按如下方式访问：

1. 打开开发者工具主菜单。
2. 依次选择更多工具 > JavaScript 性能分析器。旧的性能分析器会在名为 JavaScript 性能分析器的新面板中打开。

警告：警告：长期目标是将所有用户迁移到新工作流。在未来的开发者工具版本中，可能会移除此工作流。

如何记录 JS 配置文件

1. 打开开发者工具。

2. 点击效果标签页。

   

   图 1. “性能”面板。

3. 通过以下某种方式进行录制：

   • 要分析网页加载情况，请点击 Record Page Load（记录网页加载）。开发者工具会自动开始录制，然后在检测到页面已加载完毕时自动停止录制。
   • 如需分析正在运行的页面，请点击 Record，执行要分析的操作，然后在完成分析后点击停止。

旧工作流程与新工作流程的对应关系

以下屏幕截图在旧工作流的 Chart 视图中显示了 CPU 用量概览图表（顶部箭头）和火焰图（底部箭头）在新工作流中的位置。

图 2. 旧工作流（左侧）和新工作流（右侧）中的火焰图之间的映射。

Bottom-Up 标签页提供 Heavy (Bottom Up) 视图：

图 3. 旧工作流程中的“自下而上”视图（左）和新工作流程（右）之间的映射。

Call Tree 标签页中提供了 Tree (Top Down) 视图：

图 4. 旧工作流程中的树状视图（左侧）与新工作流程（右侧）之间的映射关系。