性能分析JavaScript

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

剖面类型

根据你想优化的内容，你可以选择不同类型的配置文件。

CPU 配置文件——CPU 配置文件告诉你程序在 JavaScript 中的时间分布在哪里。请记住，虽然你可以等待异步承诺或回调，但一次只能执行一个JavaScript表达式。CPU配置文件每秒收集大约10,000个样本，告诉你当时正在运行哪个表达式（如果有的话）。
堆配置文件——堆配置文件告诉你程序中内存随时间的分配情况。内存分配可能成本高昂，减少代码分配的内存量可以带来性能提升。
堆快照——堆快照是程序内存分配位置的即时视图。如果你发现程序占用大量内存，想查明内存来源，堆快照会很有用。请注意，对于更复杂的程序，收集堆快照可能需要几分钟时间，且内置编辑器目前不支持查看堆快照。

要收集配置文件，你需要调试你的程序。一旦完成，你可以通过几种方式收集个人资料：

调试结束后，切换到运行和调试视图（Windows，Linux Ctrl+Shift+D），找到调用栈视图。将鼠标悬停在你想调试的会话上，选择“执行性能配置文件”按钮。你也可以在命令面板（⇧⌘P（Windows，Linux Ctrl+Shift+P））中执行此命令。

VS Code会问你想选择哪种性能配置;选一个对你有用的。

最后，VS Code会询问你什么时候想停止采集个人资料。您可以选择以下两种方式：

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

你可以手动通过调用console.profile以创建配置文件，console.profile结束为了阻止一个画像。这两个呼叫站点之间会收集一个CPU配置文件。

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

结果.cpuprofile它会自动保存在你的工作区文件夹中。你可以选择该文件，在内置的个人资料查看器中打开。

VS Code 集成了一个可视化工具，支持查看 JavaScript.cpuprofile以及.堆配置文件文件。当你打开这些文件时，首先会看到一个类似这样的表格视图：

这是你项目的自下而上视图。每一行代表程序中的一个函数，默认顺序是根据在该函数上花费的时间来排序的。这也被称为“自我时间”。函数的“总时间”是指该函数及其调用的所有函数所花费时间的总和。你可以展开每一行表格，看看该函数是从哪里调用的。

例如，考虑以下代码：

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

function b() {
  doSomethingFor3Seconds();
}

a();

在这里，是的自我时间a为5秒，总时间为a是8秒。无论是自我时间还是总时间b是3秒。堆配置文件的作方式相同，但使用自大小和总大小来表示每个函数或其调用对象中分配的内存量。

表格视图在某些情况下很方便，但通常你可能更想看到更直观的侧面表现。你可以通过点击表格视图右上角的火焰🔥图标来实现。如果你还没安装，系统会提示你安装一个额外的扩展，提供火焰视图编辑器。

这可能一开始看起来很困惑，但别担心，我们会帮你理清！

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

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

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

如果你用的是CPU配置，你看到的火焰图很可能没有上面那个那么容易理解。你可能有很多单独的呼叫堆栈，看起来像这样：

为了更方便地分析，VS Code 采用了“左重”视图，将所有相似的调用栈归为一组。

这从时间顺序视图切换到更接近堆配置文件的视图。水平轴仍然是总配置文件时长，但每条条代表该函数调用在该堆栈中调用的所有时间的总时间。

这种视角对某些应用更有用，比如服务器，因为单个调用可能相对较快，但你想了解在多次调用中总体成本最高的函数。