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 配置文件提供了一个将所有相似调用堆栈组合在一起的“左重”视图。

这会将时间线式的个人资料视图切换为更类似于堆分析的视图。水平轴仍然是个人资料的总持续时间，但每个条形图表示该函数调用在所有从该堆栈调用时的总时间。

对于某些应用（例如服务器）来说，此视图更有用，在这些应用中，单个调用可能相对较快，但您想找出多次调用中最耗时的整体函数。