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))。
然后,VS Code 将询问您要获取哪种类型的性能配置文件;选择与您相关的那个。
最后,VS Code 将询问您何时要停止获取配置文件。您可以选择以下任一选项
- 持续获取配置文件,直到您手动停止。
- 按设定的持续时间获取配置文件。
- 持续获取配置文件,直到您命中断点。
如果您选择第一个选项,您可以通过单击调试工具栏中显示的红色大“记录”图标来停止配置文件。收集配置文件后,配置文件查看器将自动打开。
使用 console.profile
您可以使用对 console.profile
的调用手动检测您的代码以启动配置文件,并使用 console.profileEnd
停止配置文件。CPU 配置文件将在这两个调用站点之间收集。
console.profile();
doSomeVeryExpensiveWork();
console.profileEnd();
生成的 .cpuprofile
将自动保存在您的工作区文件夹中。您可以选择该文件以在内置的 配置文件查看器 中打开它。
分析配置文件
表格视图
VS Code 具有集成的可视化工具,支持查看 JavaScript .cpuprofile
和 .heapprofile
文件。当您打开其中一个文件时,您首先将看到一个表格视图,如下所示
这是程序的自下而上视图。每一行代表程序中的一个函数,默认情况下,它们按在该特定函数中花费的时间排序。这也称为“Self Time”(“自身时间”)。函数的“Total Time”(“总时间”)是在该函数及其调用的所有函数中花费的时间总和。您可以展开每个表格行以查看该函数是从哪里调用的。
例如,采用以下代码
function a() {
doSomethingFor5Seconds();
b();
}
function b() {
doSomethingFor3Seconds();
}
a();
在这种情况下,a
的 Self Time 将为 5 秒,a
的 Total Time 为 8 秒。b
的 Self Time 和 Total Time 均为 3 秒。堆配置文件的操作方式相同,但使用 Self Size(“自身大小”)和 Total Size(“总大小”)来指示在每个函数或其被调用者中分配的内存量。
火焰图视图
表格视图在某些情况下很好用,但通常您可能希望看到更直观的配置文件表示形式。您可以通过单击表格视图右上角的火焰 🔥 图标来做到这一点。如果您尚未安装,系统将提示您安装一个提供火焰图视图编辑器的附加扩展。
最初看起来可能令人困惑,但请不要害怕,我们会弄清楚的!
对于 CPU 配置文件,水平轴是配置文件的时程,让您可以查看程序在每个时间点都在做什么。对于堆配置文件,水平轴是程序分配的总内存。
图表中的每个条或“火焰”都是一个调用堆栈。最外层、顶级的函数调用(或调用堆栈的“底部”)显示在编辑器的顶部,它调用的函数显示在下方。条的宽度由其 Total Time 或 Total Memory 决定。
您可以单击火焰图中的条目以查看有关它的更多信息,并且可以使用鼠标滚轮放大和缩小。如果您已放大,您也可以在图表上的任何位置拖动以进行导航。
左重视图
如果您正在使用 CPU 配置文件,那么您正在查看的火焰图很可能不如上面的图那样容易理解。您可能有许多看起来像这样的单独调用堆栈
为了更轻松地分析,VS Code 提供了“左重”视图,将所有类似的调用堆栈组合在一起。
这会将配置文件的时序视图切换为更类似于堆配置文件的视图。水平轴仍然是总配置文件持续时间,但每个条表示该函数调用在从该堆栈调用的所有时间内的 Total Time。
对于某些应用程序(例如服务器)来说,此视图更有用,在这些应用程序中,单个调用可能相对较快,但您想找出在多次调用中总体上最耗时的函数是什么。