Goodbye JS Profiler,使用“Performance”面板对 CPU 进行性能分析

在 Chrome 124 中,JavaScript Profiler 面板即将停用。今后,您可以使用 Performance 面板来分析 Node.js CPU 性能。

我们为什么要弃用 JavaScript Profiler?(JS 性能分析器)

早在 Chrome 58 中,开发者工具团队就计划最终弃用 JS Profiler。原因如下:

  • 目前已在积极开发中JS Profiler 数年以来未收到任何重大更新,相关团队没有足够的资源继续开发它。
  • 更精简的分析体验Performance 面板已用于各种性能分析,它能够在 Node.js 中分析 JavaScript CPU 性能,因此可以将所有内容整合到一个位置以确保一致性和效率。
  • “性能”面板更好用。我们会不断添加新功能和增强功能,使其成为更强大、更易用的性能分析工具。

弃用后,您应怎么做?

如需详细了解如何分析 JavaScript CPU 性能,请参阅分析 Node.js 性能

以下是关于使用 Performance 面板的一些提示:

  • 使用火焰图找出性能瓶颈。

火焰图。

  • 使用自下而上调用树标签页可了解函数之间的关系。

“自下而上”标签页。

“调用树”标签页。

我们如何处理弃用?

我们开发了一个原型,并在 GitHub 上公开发布了评论请求 (RFC),以寻求开发者的反馈。

除此之外,我们会积极联系开发者专家对原型进行测试,设法解决各种顾虑或问题,以确保 Performance 面板满足核心性能分析需求。

我们将分 4 个阶段逐步淘汰 JS 性能分析器,以便为开发者留出足够的时间来调整和采用。

主要问题以及我们如何解决这些问题

在我们收到的反馈中,最迫切的问题围绕三个主要问题:

  • 支持 .cpuprofile 文件格式JS Profiler 使用不同的文件格式。Performance 面板应支持该属性。
  • 加载速度缓慢。面板的加载速度似乎很慢,干扰了分析过程。
  • 缺少 JavaScript 虚拟机选择器。在某些情况下,缺少 JavaScript 虚拟机实例选择器会限制分析功能。

下面我们将逐一介绍这些问题,看看我们是如何解决这些问题的。

加载速度缓慢

开发者表示,Performance 面板在加载大型数据文件时用时过长,有时甚至会崩溃。

我们使用开发者工具来分析开发者工具(我们称之为“DevTools-on-DevTools”)。我们发现了问题并进行了几项优化:

  • Set 替换为了 Array 数据结构。
  • 移除了不必要的 Map 数据结构。
  • 将递归函数重构为迭代函数(for 循环),以减少内存堆栈用量。

通过解决这些瓶颈问题,我们使大型文件的加载速度提高了 80%!🎉

阅读这篇博文,详细了解我们学到的内容:通过 Perf-ception 将性能面板提升 400%

缺少 JavaScript 虚拟机选择器

初始原型缺少 JavaScript 虚拟机选择器。开发者使用它来深入分析并专注于分析特定的虚拟机实例。

现在,我们在 Performance 面板中添加了 JavaScript 虚拟机选择器。其中显示了所有可用 JavaScript 虚拟机实例的下拉列表。选择实例后,性能面板会加载该特定实例的 CPU 配置文件。

“调用树”标签页。

支持 cpuprofile 文件格式

以前,Performance 面板仅支持轨迹文件,即包含一系列轨迹事件的 JSON 文件。

另一方面,JS Profiler 支持 CPU 配置文件,即扩展名为 .cpuprofile 且包含 JSON 对象的文件。具体如下所示:

{
    // The list of profile nodes. First item is the root node.
    nodes: ProfileNode[];
    // Profiling start timestamp in microseconds.
    startTime: number;
    // Profiling end timestamp in microseconds.
    endTime: number;
    // Ids of samples at top nodes.
    samples?: integer[];
    // Time intervals between adjacent samples in microseconds.
    // The first delta is relative to the profile startTime.
    timeDeltas?: integer[];
}

新的工作流不应阻止开发者分析现有的 cpuprofile。因此,Performance 面板现在支持跟踪文件和 CPU 配置文件。您可以将 cpuprofile 文件导入 Performance,该文件将正确加载。

在后台,我们会使用正则表达式检测对象结构差异。如果文件内容以 {"nodes":[ 开头,则表示它是一个 CPU 配置文件。否则,它是跟踪文件。

确定内容类型后,我们会进行相应处理。对于跟踪文件,我们会解析事件并构建时间轴。对于 CPU 分析,我们解析 JSON 对象并构建火焰图。

总结

使用 Performance 面板可以获享更精简的分析体验,无论是针对网站还是在 Node.js 和 Deno 应用中分析 CPU 性能,都是如此。

如果您有反馈或建议,请针对此错误添加评论,或通过以下某种方式与我们联系。

下载预览渠道

请考虑将 Chrome Canary开发者版Beta 版用作您的默认开发浏览器。通过这些预览渠道,您可以访问最新的开发者工具功能,测试先进的网络平台 API,并在用户之前发现您网站上的问题!

与 Chrome 开发者工具团队联系

使用以下选项讨论博文中的新功能和变更,或与开发者工具相关的任何其他内容。

  • 请通过 crbug.com 提交建议或反馈。
  • 使用更多选项报告开发者工具问题 展开 >帮助 >在开发者工具中报告开发者工具问题
  • 请发送电子邮件至 @ChromeDevTools
  • 请对我们的开发者工具新功能 YouTube 视频或开发者工具提示 YouTube 视频发表评论。