在 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 视频发表评论。