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 提供了“左重”视图，将所有相似的调用堆栈分组在一起。
这会将分析文件的按时间顺序视图切换为更类似于堆分析文件的视图。水平轴仍然是总分析持续时间，但每个条形代表该函数调用在所有被该堆栈调用时所占用的总时间。
此视图对于某些应用程序（例如服务器）更有用，在这些应用程序中，单个调用可能相对较快，但您想找出在多次调用中总体上最耗时的函数是什么。