Chrome 124 即将停用 JavaScript 性能分析器面板。今后，您可以使用性能面板分析 Node.js CPU 性能。
我们为什么要弃用 JavaScript 性能分析器？（JS 性能分析器）
早在 Chrome 58 时，开发者工具团队就计划最终弃用 JS 性能分析器。导致这种情况的原因有以下几种：
- 它目前已不再处于积极开发阶段。JS 性能分析器已经几年没有收到任何重大更新，团队也没有继续开发它的资源。
- 更顺畅的分析体验。性能面板已用于各种性能分析，由于它能够在 Node.js 中分析 JavaScript CPU 性能，因此有必要将所有内容整合到一处，以确保一致性和效率。
- “性能”面板更好。我们会继续添加新功能和增强功能，使其成为功能更强大、更易用的性能分析工具。
弃用后您该怎么做？
如需详细了解如何分析 JavaScript CPU 性能，请参阅分析 Node.js 性能。
以下是关于使用效果面板的一些提示：
- 使用火焰图确定性能瓶颈。
- 使用 Bottom-up 和 Call tree 标签页了解函数之间的关系。
我们如何处理弃用？
我们开发了一个原型并在 GitHub 上公开发布了评论请求 (RFC)，以征求开发者的反馈。
此外，我们还会积极联系开发者专家来测试原型，解决各种顾虑或问题，以确保性能面板满足核心的性能分析需求。
我们将分 4 个阶段逐步停用 JS Profiler，以便开发者有足够的时间进行调整和采用。
主要问题及解决方法
在我们收到的反馈中，最迫切的担忧主要围绕以下三个问题：
- 支持
.cpuprofile文件格式。JS 性能分析器使用另一种文件格式。性能面板应支持此功能。 - 加载速度缓慢。面板的加载速度似乎很慢，干扰了分析过程。
- 缺少 JavaScript 虚拟机选择器。在某些情况下，缺少 JavaScript 虚拟机实例选择器会限制分析功能。
我们来看看每个问题，看看我们是如何解决这些问题的。
加载速度缓慢
开发者告诉我们，Performance 面板加载大型数据文件的用时过长，有时甚至会崩溃。
我们使用开发者工具分析开发者工具（我们称之为“DevTools-on-DevTools”）。我们发现了一些问题，并做出了多项优化：
- 已将
Set替换为Array数据结构。 - 移除了不必要的
Map数据结构。 - 将递归函数重构为迭代函数（for 循环），以减少内存堆栈使用量。
通过修复这些瓶颈，我们将大文件的加载速度提升了 80%！🎉
详细了解我们在这篇博文中了解到的信息：通过性能感知功能将性能面板提高 400%。
缺少 JavaScript 虚拟机选择器
初始原型缺少 JavaScript 虚拟机选择器。开发者使用此报告来深入了解并专注于分析特定的虚拟机实例。
现在，我们向性能面板添加了一个 JavaScript 虚拟机选择器。其中显示了所有可用的 JavaScript 虚拟机实例的下拉列表。选择某个实例后，性能面板会加载该特定实例的 CPU 配置文件。
支持 cpuprofile 文件格式
以前，性能面板仅支持跟踪文件，即包含跟踪事件数组的 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。因此，性能面板现在支持跟踪文件和 CPU 配置文件。您可以将 cpuprofile 文件导入到 Performance 中，该文件将正确加载。
在后台，我们使用正则表达式检测对象结构差异。如果文件内容以 {"nodes":[ 开头，则表示它是 CPU 配置文件。否则为跟踪文件。
一旦确定了内容类型，我们就会进行相应处理。对于跟踪文件，我们会解析事件并构建一个时间轴。对于 CPU 配置文件，我们会解析 JSON 对象并构建火焰图。
总结
无论是网站分析还是 Node.js 和 Deno 应用的 CPU 性能分析，使用性能面板都可以获得更顺畅的分析体验。
如果您有反馈或建议，请为此 bug 添加评论，或通过以下某种方式与我们联系。
下载预览渠道
您可以考虑将 Chrome Canary 版、Dev 版或 Beta 版用作默认开发浏览器。通过这些预览渠道，您可以使用最新的开发者工具功能，测试先进的网络平台 API，并在用户采取行动之前发现网站上的问题！
与 Chrome 开发者工具团队联系
使用以下选项讨论博文中的新功能和变化，或讨论与开发者工具有关的任何其他内容。
- 通过 crbug.com 提交建议或反馈。
- 使用开发者工具中的更多选项
> Help > Report a DevTools issues来报告开发者工具问题。 - 发推文：@ChromeDevTools。
- 请在 YouTube 视频或“开发者工具提示”YouTube 视频中留言说明“开发者工具的新变化”。