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（性能）标签页。

    Chrome 开发者工具性能面板。
    图 1. “Performance”面板。

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

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

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

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

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

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

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

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

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

如果我们遗漏了任何功能，或者如果您对本文有任何其他疑问，请 Ping Twitter 上的 @ChromeDevTools 或在我们的文档代码库中提交 GitHub 问题。