V8 CPU 与内存分析
使用 WebStorm，您可以利用 V8 的基于采样的分析器 捕获并分析 Node.js 应用的 CPU 分析和堆快照。
您还可以打开并探索在 Google Chrome DevTools 中捕获的客户端代码快照。
开始之前
请确保在设置中启用 Node.js 插件。 按下 Ctrl+Alt+S 打开设置，然后选择 。 点击 已安装 标签页。 在搜索字段中，键入 Node.js。 有关插件的更多信息，请参阅 管理插件。
CPU 分析
CPU 分析可帮助您更深入地了解代码中哪些部分占用了最多的 CPU 时间，以及您的代码如何被 V8 JavaScript 引擎执行和优化。
在 WebStorm 中，Node.js 的 CPU 分析基于 V8 内置的 CPU 分析器，它提供有关代码执行情况以及 JavaScript 引擎本身的行为（包括垃圾回收周期、编译与重新编译以及代码优化）的信息。
分析器会在称为 tick 的特定时间间隔进行快照。 测量不仅针对您的代码执行，还包括引擎自身执行的操作，例如编译、系统库调用、优化和垃圾回收。
启用 CPU 分析
要在应用启动时调用 V8 CPU 分析，您需要在 Node.js 运行配置中指定附加设置。
转到 。 或者，从工具栏上的 运行 组件中选择 编辑配置。
在打开的 编辑配置 对话框中，点击工具栏上的 添加 按钮（
），然后从列表中选择 Node.js。从列表中选择 Node.js 运行配置以启用 CPU 分析，或者按照 运行与调试 Node.js 中的说明创建新配置。
切换到 V8 分析 选项卡并选中 记录 CPU 分析信息 复选框。 在 日志文件夹 字段中指定要存储记录日志的文件夹路径，日志文件将以
isolate-<session number>命名。
收集 CPU 分析信息
在主工具栏的列表中选择运行配置，然后点击
或从主菜单中选择 。当需要分析的场景执行完成后，点击工具栏上的
停止该进程。
分析 CPU 分析日志
当您停止应用程序时，WebStorm 会自动打开 V8 分析 工具窗口并显示收集到的分析数据。 如果该窗口已打开且显示的是另外一次会话的分析数据，WebStorm 将打开一个新的标签页。 自动打开的标签页将以用于控制应用程序执行和分析数据收集的运行配置命名。
如需打开并分析先前保存的分析数据，请转到 （或按 Ctrl+Shift+A ），开始输入 V8 ，并从列表中选择 分析 V8 分析日志。
然后选择相关的 V8 日志文件 isolate-<session number>。 WebStorm 会创建一个以所选日志文件命名的独立标签页。
基于收集到的分析数据，WebStorm 会构建三棵调用树，并分别在多个窗格中显示。 通过这些调用树，您可以从两个角度分析应用程序的执行情况：一方面是耗时较多（“重”）的调用，另一方面是“谁调用了谁”。
了解调用树中的度量指标
调用树使用 Total 和 Self 指标，分别展示函数中的 tick 数，或该 tick 数与总执行时间的比例：
Total 显示在某个函数及其调用的函数中所耗费的时间。
Self 显示仅在函数自身内部所耗费的时间，不包括其子节点。
Of Parent 指标表示某个函数的纯执行时间与调用它的函数（Parent ）的执行时间之间的比例。
V8 优化器
在某些情况下，V8 可以优化您的代码。 如需了解详情，请参阅 Optimizing for V8。
函数名前带有星号
*表示该函数已被优化。波浪符号
~表示该函数可能需要优化但尚未被优化。 引擎可能会延迟优化或跳过对短时间执行代码的优化，但波浪符号指出了可通过重写代码提升性能的位置。
最高调用树
顶层调用 窗格中按照 Self 指标降序排列列出了已执行的活动。 对于每项活动，会显示其 Total、 Total% 和 Self% 指标。 对于每个函数调用，WebStorm 会显示定义该函数的文件名、行号和列号。
概览 窗格中的图表显示了 Self 时间的分布，适用于 Self% 指标大于 1% 的调用。
自底向上的调用树
自下而上 窗格也会根据 Self 指标的降序排列列出已执行的活动。 与 最常调用 窗格不同， 自下而上 窗格仅显示 Total% 指标大于 2 的活动及其调用者。
对于每个活动，将显示其以 ticks 为单位的执行时间以及 Of Parent 指标。
对于每个函数调用，WebStorm 会显示函数定义所在的文件名称、行号和列号。
自顶向下的调用树
自上而下 窗格显示了完整的调用层级结构，最上方展示的是作为执行入口点的函数。 对于每项活动，会显示其 Total、 Total%、 Self 和 Self% 指标。 对于每个函数调用，WebStorm 会显示函数定义所在的文件名、行号以及列号。
在调用树中导航
如需跳转至函数源代码，请选中该函数，按下 F4 或点击工具栏上的
，也可以从上下文菜单中选择 跳转到源码。如需切换至另一个窗格并从其他角度查看调用，请选择该调用，在其上下文菜单中选择 导航到 ，然后选择目标位置。 WebStorm 会切换至所选窗格并将焦点移至该调用。
展开或折叠节点
当 WebStorm 打开某个分析会话的标签页时，默认会展开包含最重调用的节点。 在浏览调用树过程中，您可以选择折叠某些节点或展开其他节点。
如需展开或折叠某个节点，请从其上下文菜单中选择 展开节点 或 折叠节点。
如需折叠当前窗格中的所有节点，请点击工具栏上的
。如需恢复原始的树状结构显示格式，请点击
。
过滤轻量级调用
执行此操作以仅查看实际导致性能问题的调用。
点击工具栏上的
，然后使用滑块指定要显示的调用的最小 Total% 或 Parent% 值，最后点击 完成。
保存并比较分析数据
如需保存某个函数及其指标的行，请从该函数的上下文菜单中选择 复制。 此操作在您希望对比来自两个会话的函数测量数据时很有帮助，例如在对代码进行某些优化之后。
要仅保存函数名称及其定义所在文件的名称，请在函数的上下文菜单中选择 复制调用。
要将某个项目与剪贴板中的内容进行比较，请在项目的上下文菜单中选择 与剪贴板比较。 WebStorm 会打开 Diff Viewer。
要将当前日志与另一个 isolate 进行比较，请在工具栏点击
。 在打开的对话框中，选择要与当前 isolate 进行比较的 isolate。 要缩小搜索范围，请指定目标 isolate 是在当前 isolate 之前还是之后获取的。
导出调用树
要将当前窗格中的调用树保存为文本文件，请在工具栏点击
，并在打开的对话框中指定目标文件。
分析火焰图
使用多彩的 火焰图 查找应用暂停的位置，并探索导致这些暂停的调用。
该图表由四个区域组成：
上部区域显示了带有两个滑块的时间轴，可用于限定要调查的片段的开始和结束。
底部区域以多彩图表的形式显示调用堆栈。每个函数在首次调用时都会被分配一个随机颜色，在当前会话中该函数的每次调用都会以该颜色显示。 每个函数在首次调用时都会被分配一个随机颜色，在当前会话中该函数的每次调用都会以该颜色显示。
中部区域摘要显示来自 Garbage Collector 、引擎、外部调用以及执行本身的调用。 该区域顶部列出了为这些活动保留的颜色。
右侧窗格列出了选定片段内的调用，对于每个调用，该列表会显示其持续时间、被调用函数的名称及其定义所在的文件。
底部区域和右侧区域是同步的：当您在底部区域的时间轴上拖动滑块时，右侧窗格的焦点会移动到每个时间点执行的调用上。
此外，如果您点击底部区域中的某个调用，滑块会自动移动到该位置，右侧窗格中的焦点也会切换到对应的函数，必要时列表会自动滚动 反之亦然，如果您点击列表中的某个项，WebStorm 会选择底部区域中对应的调用，并自动将滑块拖动至该位置：
在时间线上选择片段
要查看某一时间段内的过程，您需要在时间轴中选择相应的片段。 为此，请拖动滑块，或点击两个滑块之间的 窗口 ，然后将其拖动到所需的片段。
在以上任一情况下，下方的多彩图表将显示所选片段内的调用堆栈。
要放大图表，请点击所选片段，然后点击工具栏中的
。 WebStorm 会打开一个新标签页，并放大显示所选片段以匹配标签页宽度，以便您更详细地查看该片段。
在火焰图中导航
通过右侧区域中的调用，您可以跳转到被调用函数的源代码、工具窗口的其他窗格以及火焰图中具有特定指标的区域。
要跳转到被调用函数的源代码，请在调用的上下文菜单中选择 跳转到源码。
要使火焰图缩放到调用中特定指标的片段，请选择调用，在其上下文菜单中选择 导航到 ，然后选择指标。
您还可以导航到调用的堆栈跟踪，以查看和分析异常。 为此，请在调用的上下文菜单中选择 显示为堆栈跟踪。 WebStorm 会在单独的标签页中打开堆栈跟踪。要返回到 火焰图 窗格，请点击底部的 V8 CPU 分析 工具窗口按钮。
内存分析
内存分析可帮助您检测内存泄漏和动态内存问题，并定位导致问题的代码片段。
启用内存分析
要在应用启动时启用内存快照采集，您需要在 Node.js 运行配置中指定其他设置。
转到 。 或者，从工具栏的 运行 小组件中选择 编辑配置。
在打开的 编辑配置 对话框中，点击工具栏上的 添加 按钮（
），然后从列表中选择 Node.js。从列表中选择要启用 CPU 分析的 Node.js 运行配置，或根据 创建 Node.js 运行/调试配置 中的描述创建新配置。
切换到 V8 分析 选项卡，并勾选 允许生成堆快照 复选框。
收集内存分析信息
在主工具栏的列表中选择运行配置，然后点击
，或从主菜单中选择 。在应用执行期间的任意时间，点击
，该按钮位于 运行 工具窗口的工具栏上。在打开的对话框中，指定快照的名称以及其存储目录的路径。 要立即开始分析快照，请勾选 打开快照 复选框。
分析内存快照
当您创建快照并选择分析它时，WebStorm 会使用收集的数据打开 V8 堆 工具窗口。 如果该窗口已打开并显示其他会话的收集数据，WebStorm 会打开一个新标签页。
要打开并分析之前保存的内存分析数据，请转到 （或者按 Ctrl+Shift+A ，开始输入 V8 ，并从列表中选择 分析 V8 堆快照）。
然后选择相应的 .heapsnapshot 文件。 WebStorm 会以所选文件名创建一个单独的标签页。
该工具窗口包含三个标签页，从不同角度展示收集到的信息。
包含关系 标签页显示应用中的对象，并按几个顶层条目分组： DOMWindow objects、 Native browser objects 和 GC Roots ，即 Garbage Collector 实际使用的根。 如需了解更多信息，请参阅 Containment View。
对于每个对象，该标签页显示其 distance from the GC root ，即对象与 GC 根节点之间最短的简单路径，以及对象的 shallow size 和 retained size。 除了对象大小的绝对值外，WebStorm 还显示该对象所占内存的百分比。
最大对象 选项卡按 retained size 对内存占用最多的对象进行排序并展示。 在此选项卡中，您可以识别由于某个全局对象中数据积累导致的内存泄漏。
摘要 选项卡按对象类型对应用中的对象进行分组显示。 该选项卡显示每个类型的对象数量、大小以及它们所占用的内存百分比。 这些信息可能有助于了解内存状态。
每个选项卡都有一个 详细信息 窗格，显示从 GC 根到当前选中对象的路径，以及对象的 retainer 列表，也就是保持与该选中对象的引用关系的对象。 每个 heap snapshot 都包含大量“反向”引用和循环，因此每个对象通常都有多个 retainer。
使用文本标签标记对象
标签帮助您区分对象，并在对象之间切换时保持上下文关联。
要为对象设置标签，请选择该对象并单击工具栏上的
，或从上下文菜单中选择 标记。 然后在打开的对话框中指定文本标签。
在快照中导航
要导航到与对象对应的函数或变量，请选择该对象并单击工具栏上的
，或从上下文菜单中选择 编辑源代码。 如果该按钮和菜单项被禁用，表示 WebStorm 未找到与选中对象对应的任何函数或变量。如果找到多个函数或变量，WebStorm 会在建议列表中显示它们。
为帮助您从包含关系的角度分析对象并聚焦于对象之间的链接，WebStorm 允许您从 最大对象 或 摘要 选项卡或 出现次数 视图中的某个对象跳转到 包含关系 选项卡中的相同对象。
为此，请选择该对象并在上下文菜单中选择 在主树中导航。
在快照中搜索
在 包含关系 选项卡中，点击工具栏上的
。在打开的 V8 堆搜索 对话框中，指定搜索模式和搜索范围。 可用的搜索范围包括：
全部位置： 选中该复选框可在所有范围中进行搜索。 选择此复选框后，所有其他搜索类型将被禁用。
链接名称： 选中此复选框可在 V8 调用 C++ runtime 时创建的对象名称中进行搜索。
在 V8 堆 工具窗口中，链接名称通过
%字符%<link name>标记。类名： 选中此复选框可在函数构造器中进行搜索。
文本字符串： 选中此复选框可在对象内容中执行文本搜索。
快照对象 ID： 选中此复选框可在对象的唯一标识符中进行搜索。 V8 在对象创建时为其分配一个特定格式的唯一标识符，并在其被销毁前始终保留该标识符。 这意味着，您可以在同一会话中拍摄的多个快照中查找并对比相同的对象。
在 V8 堆 工具窗口中，对象 ID 通过
@字符@<object id>标记。标记： 选中此复选框可在您手动通过点击
设置在 包含关系 选项卡上的标签中进行搜索。
搜索结果显示在 详细信息 窗格内的独立 '<search pattern>' 的出现次数 视图中。 要使搜索结果按您指定的搜索范围进行分组显示，请点击工具栏上的 按类型分组 切换按钮。
下次打开该对话框时，它将显示上一次搜索时使用的设置。