JavaScript 性能分析

Visual Studio Code 支持为 JavaScript 程序收集和查看性能分析文件。要开始使用，您首先需要为您的 Node.js 程序或浏览器应用配置好调试器。

分析文件类型

根据您想要优化的内容，您可能需要采集不同类型的分析文件。

• CPU 分析文件 (CPU Profile) - CPU 分析文件可以告诉您程序在 JavaScript 中花费了多少时间。请记住，虽然您可以等待异步的 promise 或回调，但同一时间只有一个 JavaScript 表达式在执行。CPU 分析会以每秒约 10,000 次的频率进行采样，以告诉您在那个时刻哪个表达式（如果有的话）正在运行。
• 堆分析文件 (Heap Profile) - 堆分析文件可以告诉您程序中的内存是如何随时间分配的。分配内存的开销可能很大，减少代码分配的内存量可以带来性能上的提升。
• 堆快照 (Heap Snapshot) - 堆快照是程序内存分配情况的一个瞬时视图。如果您注意到程序占用了大量 RAM，并想找出其来源，堆快照会很有用。请注意，对于更复杂的程序，收集堆快照可能需要几分钟时间，并且内置编辑器目前不支持查看堆快照。

采集分析文件

要采集分析文件，您需要正在调试您的程序。一旦开始调试，您可以通过以下几种方法来采集分析文件：

• 使用调用堆栈 (Call Stack) 视图中的“录制”按钮。这允许您采集 CPU 分析文件、堆分析文件和堆快照。
• 在您的程序中调用 console.profile()。这将采集一份 CPU 分析文件。

使用录制按钮

开始调试后，切换到“运行和调试”视图（⇧⌘D (Windows、Linux Ctrl+Shift+D)），并找到调用堆栈 (Call Stack) 视图。将鼠标悬停在您要调试的会话上，然后选择生成性能分析文件 (Take Performance Profile) 按钮。您也可以从命令面板（⇧⌘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 文件。当您打开其中一个文件时，首先会看到一个类似这样的表格视图：

这是您程序的自下而上 (bottom-up) 视图。每一行代表程序中的一个函数，默认情况下，它们按在该特定函数中花费的时间进行排序。这也被称为“自身耗时 (Self Time)”。一个函数的“总耗时 (Total Time)”是该函数自身及其调用的所有函数所花费时间的总和。您可以展开每一行表格来查看该函数是从哪里被调用的。

例如，以下面这段代码为例：

function a() {
  doSomethingFor5Seconds();
  b();
}

function b() {
  doSomethingFor3Seconds();
}

a();

在这种情况下，a 的自身耗时为 5 秒，a 的总耗时为 8 秒。b 的自身耗时和总耗时均为 3 秒。堆分析文件的工作方式相同，但使用“自身大小 (Self Size)”和“总大小 (Total Size)”来表示每个函数或其被调用者分配的内存量。

火焰图视图

表格视图在某些情况下很方便，但通常您可能希望看到更直观的分析文件展示。您可以通过点击表格视图右上角的火焰图标 🔥 来实现。如果您尚未安装，系统会提示您安装一个提供火焰图视图编辑器的附加扩展。

这起初可能看起来令人困惑，但别担心，我们会把它弄明白的！

对于 CPU 分析文件，水平轴是分析的时间线，让您可以看到程序在每个时刻在做什么。对于堆分析文件，水平轴是程序分配的总内存。

图中的每个条形，或称“火焰”，都是一个调用堆栈。最外层、最顶层的函数调用（即调用堆栈的“底部”）显示在编辑器的顶部，而它调用的函数则显示在下方。条形的宽度由其总耗时或总内存决定。

您可以点击火焰图中的条目以查看更多相关信息，并使用鼠标滚轮进行缩放。如果您已经放大，也可以在图表上任意位置拖动来导航。

左偏视图

如果您正在处理 CPU 分析文件，您看到的火焰图很可能不像上面那个那么容易理解。您可能会有很多独立的调用堆栈，看起来像这样：

为了便于分析，VS Code 提供了“左偏 (left-heavy)”视图，它将所有相似的调用堆栈分组到一起。

这将视图从按时间顺序排列切换到更类似于堆分析文件的形式。水平轴仍然是总分析时长，但每个条形代表该函数调用在所有从该堆栈调用时的总耗时。

这种视图对于某些应用（如服务器）非常有用，因为单个调用可能相对较快，但您想找出在多次调用中总体上开销最大的函数是哪些。