性能分析 JavaScript
Visual Studio Code 支持收集和查看 JavaScript 程序的性能分析。要开始使用，您首先需要为您的 Node.js 程序 或 浏览器应用 配置调试器。
配置文件类型
根据您想要优化的内容，您可能需要采取不同类型的配置文件。
- CPU 分析 - CPU 分析告诉你你的程序在 JavaScript 中花费时间的地方。请记住，虽然你可以等待异步的 promises 或回调，但一次只能执行一个 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 将自动保存在您的工作区文件夹中。您可以选择该文件在内置的 profile viewer 中打开它。
分析一个配置文件
表格视图
VS Code 有一个集成的可视化工具，支持查看 JavaScript 的 .cpuprofile 和 .heapprofile 文件。当你打开其中一个文件时，首先会看到一个类似这样的表格视图：
这是您程序的自底向上视图。每一行代表程序中的一个函数，默认情况下，它们按在该特定函数中花费的时间排序。这也被称为“自身时间”。函数的“总时间”是该函数及其调用的所有函数中花费的时间的总和。您可以展开每个表格行以查看该函数的调用来源。
例如，请看以下代码：
function a() {
doSomethingFor5Seconds();
b();
}
function b() {
doSomethingFor3Seconds();
}
a();
在这种情况下，a的自身时间将是5秒，而a的总时间是8秒。b的自身时间和总时间都是3秒。堆分析的操作方式相同，但使用自身大小和总大小来表示在每个函数或其调用者中分配的内存量。
火焰视图
在某些情况下，表格视图非常有用，但通常您可能希望看到更直观的分析表示。您可以通过点击表格视图右上角的火焰🔥图标来实现这一点。如果您还没有安装，系统会提示您安装一个提供火焰视图编辑器的额外扩展。
一开始这可能看起来令人困惑，但别担心，我们会弄明白的！
对于CPU配置文件，水平轴是配置文件的时间线，允许您查看程序在每一时刻正在做什么。对于堆配置文件，水平轴是程序分配的总内存。
图中的每个条形或“火焰”都是一个调用堆栈。最外层、顶层的函数调用（或调用堆栈的“底部”）显示在编辑器的顶部，它调用的函数显示在下面。条形的宽度由其总时间或总内存决定。
您可以点击火焰图中的条目以查看更多信息，并且可以使用鼠标滚轮进行放大和缩小。如果您已经放大了图表，您还可以拖动图表上的任何位置进行导航。
左重视图
如果你正在处理一个CPU配置文件，很可能你正在查看的火焰图不像上面的那样容易理解。你可能有很多单独的调用堆栈，看起来像这样：
为了便于分析，VS Code 提供了一个“左重”视图，将所有类似的调用堆栈分组在一起。
这将从按时间顺序查看配置文件切换到更类似于堆配置文件的内容。横轴仍然是配置文件的总持续时间，但每个条形图表示该函数调用在所有从该堆栈调用时的总时间。
这个视图对于某些应用程序（如服务器）来说更加有用，在这些应用程序中，单个调用可能相对较快，但您希望找出在许多调用中总体成本最高的函数。