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

Kayce Basques

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

长期目标是移除旧版 JavaScript CPU 性能分析器，让每个人都能使用新工作流。

这份简短的迁移指南介绍了如何在“Performance”面板中记录 JS 配置文件，以及“Performance”面板的界面如何映射到您熟悉的旧工作流。

访问旧版 JavaScript CPU 性能分析器

如果您更喜欢以前可在“Profiles”面板上使用的旧版“Record JavaScript CPU Profile”工作流，您仍然可以这样访问该工作流：

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

如何记录 JS 配置文件

1. 打开开发者工具。

2. 点击 Performance（性能）标签页。

   

   图 1. “性能”面板。

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

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

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

在旧工作流的图表视图中，下面的屏幕截图显示了新工作流中 CPU 使用情况概览图表（顶部箭头）和火焰图（向下箭头）的位置。

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

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

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

此外，Call Tree 标签页中也提供 Tree (Top Down) 视图：

图 4. 旧工作流（左）和新工作流（右）的树状视图之间的映射。