JavaScript 性能分析
Visual Studio Code 支持收集和查看 JavaScript 程序的性能分析。要开始使用，您首先需要为您的 Node.js 程序 或 浏览器应用配置调试器。
配置文件类型
根据您想要优化的内容，您可能需要采取不同类型的性能分析。
- CPU 性能分析 - CPU 性能分析告诉您您的程序在 JavaScript 中花费时间的位置。请记住，虽然您可以等待异步 Promise 或回调，但一次只能执行一个 JavaScript 表达式。CPU 性能分析每秒收集约 10,000 个样本，以告诉您此刻正在运行哪个表达式（如果有）。
- 堆性能分析 - 堆性能分析告诉您程序中内存随时间推移的分配情况。分配内存可能代价高昂，减少代码分配的内存量可以带来性能提升。
- 堆快照 - 堆快照是程序已分配内存位置的瞬时视图。如果您注意到程序正在使用大量 RAM 并想找出其来源，则堆快照可能很有用。请注意，对于更复杂的程序，收集堆快照可能需要几分钟时间，并且内置编辑器目前不支持查看堆快照。
收集配置文件
要收集性能分析，您需要调试您的程序。一旦开始调试，您可以通过以下几种方法收集性能分析
- 使用“调用堆栈”视图中的“记录”按钮。这允许您采集 CPU 性能分析、堆性能分析和堆快照。
- 通过在您的程序中调用
console.profile()。这将收集 CPU 性能分析。
使用记录按钮
开始调试后，切换到“运行和调试”视图 (⇧⌘D (Windows, Linux Ctrl+Shift+D))，并找到“调用堆栈”视图。将鼠标悬停在您要调试的会话上，然后选择“采集性能分析”按钮。您也可以从命令面板 (⇧⌘P (Windows, Linux Ctrl+Shift+P)) 运行此命令。
VS Code 随后会询问您要采集哪种类型的性能分析；选择与您相关的类型。
最后，VS Code 会询问您何时停止采集性能分析。您可以选择以下任一选项
- 手动停止前一直采集性能分析。
- 采集设定时长的性能分析。
- 在命中特定断点之前采集性能分析。
如果您选择第一个选项，您可以通过单击调试工具栏中显示的大红色“记录”图标来停止性能分析。性能分析收集完成后，性能分析查看器将自动打开。
使用 console.profile
您可以使用对 console.profile 的调用手动检测您的代码以启动性能分析，并使用 console.profileEnd 停止性能分析。CPU 性能分析将在这两个调用站点之间收集。
console.profile();
doSomeVeryExpensiveWork();
console.profileEnd();
生成的 .cpuprofile 文件将自动保存在您的工作区文件夹中。您可以选择该文件以在内置性能分析查看器中打开它。
分析配置文件
表格视图
VS Code 具有集成的可视化工具，支持查看 JavaScript .cpuprofile 和 .heapprofile 文件。当您打开其中一个文件时，您首先会看到一个如下所示的表格视图
这是您程序的自下而上的视图。每一行代表您程序中的一个函数，默认情况下，它们按在该特定函数中花费的时间量排序。这也称为“自身时间”。一个函数的“总时间”是在该函数及其调用的所有函数中花费的时间总和。您可以展开每个表格行以查看该函数是从哪里调用的。
例如，考虑以下代码
function a() {
doSomethingFor5Seconds();
b();
}
function b() {
doSomethingFor3Seconds();
}
a();
在这种情况下，a 的自身时间为 5 秒，a 的总时间为 8 秒。b 的自身时间和总时间均为 3 秒。堆性能分析以相同的方式运行，但使用自身大小和总大小来指示在每个函数或其被调用者中分配的内存量。
火焰图视图
表格视图在某些情况下很好用，但通常您可能希望看到性能分析的更直观表示。您可以通过单击表格视图右上角的火焰 🔥 图标来做到这一点。如果您尚未安装，系统将提示您安装一个提供火焰图视图编辑器的额外扩展。
最初看起来可能令人困惑，但别担心，我们会解释清楚的！
对于 CPU 性能分析，水平轴是性能分析的时间线，让您了解程序在每个时刻都在做什么。对于堆性能分析，水平轴是程序分配的总内存。
图表中的每个条或“火焰”都是一个调用堆栈。最外层、顶层函数调用（或调用堆栈的“底部”）显示在编辑器的顶部，它调用的函数显示在下方。条的宽度由其总时间或总内存决定。
您可以单击火焰图中的条目以查看有关它的更多信息，并且可以使用鼠标滚轮放大和缩小。如果您已放大，您也可以在图表上的任意位置拖动以进行导航。
左重视图
如果您正在处理 CPU 性能分析，您看到的火焰图很有可能不像上面的那样容易理解。您可能会有很多看起来像这样的单独调用堆栈
为了便于分析，VS Code 提供了“左重”视图，将所有类似的调用堆栈组合在一起。
这会将性能分析从时间顺序视图切换到更类似于堆性能分析的视图。水平轴仍然是性能分析的总持续时间，但每个条代表该函数调用从该堆栈调用的所有时间的总时间。
此视图对于某些应用程序（例如服务器）更有用，在服务器中，单个调用可能相对较快，但您想找出在多次调用中总体上最昂贵的函数是什么。