JavaScript 性能分析
Visual Studio Code 支持收集并查看 JavaScript 程序的性能分析数据。若要开始，首先需要为你的 Node.js 程序 或 浏览器应用 配置好调试器。
性能分析类型
根据你想要优化的目标，可以选择不同类型的性能分析。
- CPU Profile（CPU 分析） - CPU 分析告诉你程序在运行 JavaScript 时将时间花在了哪里。请记住，虽然你可以等待异步 Promise 或回调，但同一时间只能执行一个 JavaScript 表达式。CPU 分析每秒收集约 10,000 个样本，以告知你此刻正在运行哪个表达式（如果有的话）。
- Heap Profile（堆分析） - 堆分析告诉你程序中内存随时间分配的情况。分配内存可能会带来开销，减少代码分配的内存量可以提升性能。
- Heap Snapshot（堆快照） - 堆快照是程序在某一瞬间内存分配情况的视图。如果你发现程序占用了大量内存，并想找出原因，堆快照会非常有用。请注意，对于复杂的程序，收集堆快照可能需要几分钟，且目前内置编辑器不支持查看堆快照。
收集性能分析数据
要收集性能分析数据，你需要正在调试你的程序。一旦开始调试，可以通过以下几种方法收集数据：
- 使用 调用堆栈 (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 秒，总计时间为 8 秒。b 的自占时间和总计时间均为 3 秒。堆分析的操作方式相同，但使用“自占大小 (Self Size)”和“总计大小 (Total Size)”来表示每个函数或其被调用者分配的内存量。
火焰图视图
表格视图在某些情况下很好用，但通常你可能希望看到更直观的表示。点击表格视图右上角的火焰 🔥 图标即可实现。如果尚未安装，系统会提示你安装一个提供火焰图编辑器功能的额外扩展。
起初这看起来可能有些令人困惑，但别担心，我们会解释清楚的！
对于 CPU 分析，横轴是分析的时间轴，让你能看到程序在每个时刻的操作。对于堆分析，横轴是程序分配的总内存量。
图中的每一条“火焰”都是一个调用堆栈。最外层的顶层函数调用（即调用堆栈的“底部”）显示在编辑器的顶部，它调用的函数显示在下方。条形的宽度由其总计时间或总计内存决定。
你可以点击火焰图中的条目以查看有关它的更多信息，并使用鼠标滚轮进行缩放。如果已经缩放，你也可以在图表上的任意位置拖动以进行导航。
左重视图 (Left-heavy view)
如果你正在处理 CPU 分析，你看到的火焰图可能不像上面描述的那样容易理解。你可能会有很多类似这样的单个调用堆栈：
为了便于分析，VS Code 提供了一种“左重 (left-heavy)”视图，它将所有相似的调用堆栈组合在一起。
这会将分析视图从按时间顺序排列转换为类似于堆分析的视图。横轴仍然是总分析持续时间，但每个条形代表该函数调用在所有调用堆栈中出现的总计时间。
对于某些应用（如服务器）来说，这种视图非常有用，因为单个调用可能很快，但你需要找出在多次调用中总体开销最大的函数。