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 文件。当您打开其中一个文件时，您将首先看到一个类似如下的表格视图：
这是您程序的**自下而上**视图。每一行代表程序中的一个函数，默认情况下，它们按在该特定函数中花费的时间量进行排序。这也称为“自身时间 (Self Time)”。函数的“总时间 (Total Time)”是该函数及其调用的所有函数中花费的时间之和。您可以展开每个表格行以查看该函数是从何处调用的。
例如，以下代码：
function a() {
doSomethingFor5Seconds();
b();
}
function b() {
doSomethingFor3Seconds();
}
a();
在此示例中，a 的自身时间为 5 秒，a 的总时间为 8 秒。b 的自身时间和总时间均为 3 秒。堆配置文件的工作方式相同，但使用自身大小 (Self Size) 和总大小 (Total Size) 来指示在每个函数或其被调用者中分配的内存量。
火焰图视图
表格视图在某些情况下很好用，但您可能经常想看到配置文件的更直观表示。您可以通过单击表格视图右上角的火焰 🔥 图标来完成此操作。如果您尚未安装，系统会提示您安装一个提供火焰图编辑器（flame view editor）的附加扩展。
这最初可能看起来令人困惑，但别担心，我们会解释清楚的！
对于 CPU 配置文件，水平轴是配置文件的时间线，让您可以看到程序在每个时刻正在做什么。对于堆配置文件，水平轴是程序分配的总内存。
图中的每个条形，或“火焰”，都是一个调用堆栈。最外层、顶级的函数调用（或调用堆栈的“底部”）显示在编辑器的顶部，它调用的函数显示在下方。条形的宽度由其总时间或总内存决定。
您可以单击火焰图中的条目以查看更多信息，并且可以使用鼠标滚轮放大和缩小。如果您已放大，还可以在图表上的任意位置拖动以进行导航。
左重视图
如果您正在使用 CPU 配置文件，您所看到的火焰图很可能不如上面那样易于理解。您可能会有很多独立的调用堆栈，看起来像这样：
为了更方便分析，VS Code 提供了一个“左重”视图，它将所有相似的调用堆栈组合在一起。
这将配置文件从按时间顺序的视图切换到更类似于堆配置文件（Heap Profile）的视图。水平轴仍然是配置文件总持续时间，但每个条形表示该函数调用从该堆栈被调用的**所有**时间里的总时间。
这种视图对于某些应用程序（例如服务器）非常有用，在这些应用程序中，单个调用可能相对较快，但您希望找出在多次调用中总体上开销最大的函数。