性能分析JavaScript

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

个人资料类型

根据您想要优化的内容，您可能需要进行不同类型的测试。

CPU 诊断 - CPU 诊断告知你在 JavaScript 中程序花费时间的地方。请记住，虽然你可以等待异步承诺或回调，但每次只有一个 JavaScript 表达式会被执行。CPU 诊断每秒收集大约 10,000 个样本，告诉你在那一瞬间正在运行的表达式（如果有）。
堆简介 - 堆简介告诉你在你的程序中内存随时间的分配情况。分配内存可能会很昂贵，减少你的代码分配的内存可以带来性能提升。
堆快照 - 堆快照是您程序内存分配的瞬间视图。如果您注意到您的程序使用了很多 RAM 并希望找到它的来源，堆快照将非常有用。请注意，对于更复杂的程序，收集堆快照可能需要几分钟时间，并且当前在内置编辑器中不支持查看堆快照。

收集个人资料

要收集配置文件，您需要正在调试您的程序。一旦您这样做，您可以通过几种方法来收集配置文件：

使用 调用堆栈 视图中的“记录”按钮。这允许您获取 CPU 采样、堆采样和堆快照。
通过拨打控制台. 调试()在你的程序中。这将收集一个CPU概要。

使用记录按钮

一旦你开始调试，切换到“运行和调试”视图 (⇧⌘D (Windows, Linux Ctrl+Shift+D))，并找到调用堆栈视图。将鼠标悬停在你想要调试的会话上，并选择性能分析按钮。你也可以从命令面板运行此命令 (⇧⌘P (Windows, Linux Ctrl+Shift+P))。

VS Code 会要求你选择要记录的性能类型，请选择与你相关的一个。

最后，VS Code 会询问您何时停止进行性能分析。您可以选择：

运行配置文件，直到手动停止。
对配置文件进行固定时长的监控。
跟踪配置文件，直到遇到某个断点。

如果你选择了第一个选项，你可以通过点击调试工具栏中显示的大红色“记录”图标来停止分析。分析收集完成后，分析查看器将自动打开。

使用 console.profile

您可以手动对您的代码进行跟踪，使用调用控制台.配置要开始一个个人资料，并且控制台.记录结束要停止一个配置文件。CPU配置文件将在这两个调用位置之间被收集。

控制台.配置文件();
执行昂贵的工作();
控制台.结束配置文件();

结果.cprofiling将自动保存在你的工作区文件夹中。你可以选择该文件以在内置的配置文件查看器中打开。

分析个人资料

表格视图

VS Code 有一个集成的可视化工具，支持查看 JavaScript.cprofiling和.他的个人资料文件。当你打开其中一个文件时，首先会显示一个表格视图，看起来像这样：

这是一个自下而上的程序视图。每一行代表程序中的一个函数，缺省情况下它们是按在该特定函数中花费的时间排序的。这也被称为“自我时间”。一个函数的“总时间”是该函数和所有被它调用的函数中花费时间的总和。您可以展开每一行表格，以查看该函数是从哪里调用的。

例如，考虑以下代码：

函数 a() {
  做某事5秒钟();
  b();
}

函数 b() {
  做某事3秒钟;}


一个;

在这种情况下，自我时间对于一个将会是5秒，总时间是一个是8秒。输入：b是3秒。堆 про文件以相同的方式工作，但使用Self Size和Total Size来表示在每个函数或其调用者中分配的内存量。

火焰视图

表格视图在某些情况下很不错，但通常您可能希望看到一个更直观的配置文件表示。您可以通过点击表格视图右上角的火焰 🔥 图标来实现这一点。如果您还没有这样做，系统会提示您安装一个提供火焰视图编辑器的附加扩展。

这乍一看可能会让人感到困惑，但别担心，我们会把它讲清楚的！

对于CPU分析，水平轴是分析的时间轴，允许您查看程序在每个时间点上做了什么。对于堆分析，水平轴是程序分配的总内存。

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

您可以点击火焰图中的条目以查看更多信息，并且可以使用鼠标滚轮放大和缩小。如果您已经放大，还可以在图表的任何地方拖动以进行导航。

左重视图

如果你正在处理CPU分析图，你看到的火焰图可能不像上面的那个那样容易理解。你可能会看到许多像这样的单独调用堆栈：

为了更容易分析，VS Code 生成一个“左重”的视图，将所有相似的调用堆栈分组在一起。

这将从按时间顺序查看的概要切换到更类似于堆概要的内容。水平轴仍然是概要的总时长，但每个条形代表的是该函数调用在所有从该堆调用它的总时间。

这种观点对于某些应用（如服务器）更为有用，例如，单个调用可能相对快速，但您希望了解在多次调用中哪些函数是总体上最昂贵的。