尝试以扩展 VS Code 中的代理模式!

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))运行此命令。

Screenshot showing the button

VS Code 接着会询问你想要进行哪种性能分析;选择与你需求相关的类型。

最后,VS Code 会询问你何时停止分析。你可以选择:

  • 持续分析直到你手动停止。
  • 在设定的时间内进行分析。
  • 持续分析直到你遇到某个特定的断点。

如果你选择了第一种方式,你可以通过点击调试工具栏中显示的红色大“录制”图标来停止分析。分析数据收集完毕后,分析查看器将自动打开。

使用 console.profile

你可以通过调用 console.profile 来启动分析,调用 console.profileEnd 来停止分析,从而手动检测你的代码。在这两次调用之间将收集一份 CPU 分析数据。

console.profile();
doSomeVeryExpensiveWork();
console.profileEnd();

生成的 .cpuprofile 文件会自动保存在你的工作区文件夹中。你可以选择该文件,用内置的分析查看器打开它。

分析性能数据

表格视图

VS Code 有一个集成的可视化工具,支持查看 JavaScript 的 .cpuprofile.heapprofile 文件。当你打开这些文件时,首先会看到一个表格视图,大致如下:

Screenshot showing the profile table

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

例如,以下面的代码为例:

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

function b() {
  doSomethingFor3Seconds();
}

a();

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

火焰图视图

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

Heap profile flame chart

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

对于 CPU 分析,横轴是分析的时间线,让你能看到程序在每个时间点在做什么。对于堆分析,横轴是程序分配的总内存。

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

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

左偏视图

如果你正在处理一份 CPU 分析数据,你看到的火焰图很可能不像上面那个那么容易理解。你可能会有很多独立的调用堆栈,看起来像这样:

A noisy CPU profile

为了便于分析,VS Code 提供了一个“左偏”视图,将所有相似的调用堆栈组合在一起。

Toggle button

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

A nicer CPU profile

对于某些应用,例如服务器,这种视图非常有用。在这些应用中,单个调用可能相对较快,但你想找出在多次调用中总体上最耗时的函数。