JavaScript 性能分析

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

配置文件类型

根据你想要优化的内容，你可能需要收集不同类型的性能分析。

• CPU 配置文件 (CPU Profile) - CPU 配置文件告诉你程序在 JavaScript 中运行时时间都花费在哪里。记住，虽然你可以等待异步 Promise 或回调，但在任何时刻只有一个 JavaScript 表达式在执行。CPU 配置文件每秒收集大约 10,000 个样本，以告诉你此刻正在运行的是哪个表达式（如果有的话）。
• 堆配置文件 (Heap Profile) - 堆配置文件告诉你程序中内存如何随时间分配。分配内存可能代价高昂，减少代码分配的内存量可以带来性能提升。
• 堆快照 (Heap Snapshot) - 堆快照是程序分配内存位置的即时视图。如果你注意到程序使用了大量 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 的自用时间 (Self Time) 是 5 秒，a 的总时间 (Total Time) 是 8 秒。b 的自用时间和总时间都是 3 秒。堆配置文件的工作方式相同，但使用自用大小 (Self Size) 和总大小 (Total Size) 来表示在每个函数或其被调用者中分配的内存量。

火焰图视图 (Flame view)

表格视图在某些情况下很好用，但你通常可能想看到更直观的配置文件表示。你可以通过点击表格视图右上角的火焰 🔥 图标来做到这一点。如果你尚未安装，系统会提示你安装提供火焰图编辑器的附加扩展。

这最初可能看起来令人困惑，但别担心，我们会解释清楚的！

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

图中的每个条形，或称为“火焰”，都是一个调用堆栈。最外层的顶级函数调用（或调用堆栈的“底部”）显示在编辑器顶部，它调用的函数显示在下方。条形的宽度由其总时间 (Total Time) 或总内存 (Total Memory) 决定。

你可以点击火焰图中的条目查看更多信息，也可以使用鼠标滚轮放大和缩小。如果已经放大，你还可以在图表上任意拖动来导航。

左重视图 (Left-heavy view)

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

为了方便分析，VS Code 提供了一种“左重”视图，将所有相似的调用堆栈组合在一起。

这会将视图从按时间顺序排列的配置文件切换到更类似于堆配置文件的方式。水平轴仍然是总的配置文件持续时间，但每个条形表示该函数从该调用堆栈被调用所有次的总时间 (Total Time)。

这种视图对于某些应用程序（例如服务器）更有用，在这些应用中，单个调用可能相对快速，但你想要找出在多次调用中总体上最耗时的函数是哪些。