加快 JavaScript 运行时 (“分配采样”分析类型)
若要识别昂贵的函数，请使用 内存 工具：
使用内存工具中的分配采样准确记录调用了哪些函数以及每个 函数所需的内存 量。
将配置文件可视化为火焰图。
使用“分配采样”分析类型查看 JavaScript 函数的内存分配
如果发现 JavaScript 中呈现) (中断，请使用分配采样分析类型收集内存 分配采样 配置文件。 采样配置文件显示哪些函数分配的内存最多。
使用 分配采样 分析类型查看 JavaScript 函数的内存分配：
在新窗口或选项卡中打开网页，例如 “分离元素”演示网页。
右键单击网页，然后选择“ 检查”。
或者，按 Ctrl+Shift+I（Windows、Linux）或 Command+Option+I (macOS)。 DevTools 随即打开。
在 DevTools 的 “活动栏”中，选择 “内存 (
) 工具：
如果 内存 工具不可见，请单击“ 更多工具 (
) 按钮，然后选择“ 内存”。选择“ 分配采样 ”选项按钮。
如果未显示 “分配采样 选项”按钮，因为已显示配置文件，请单击左上角的“ 配置文件” (
) 。在 “选择 JavaScript VM 实例 ”部分中，如果页面上有辅助角色，则可以选择该辅助角色作为分析目标。
在 “内存 ”工具底部，单击“ 开始” 按钮。
与网页交互。 例如，单击演示网页中的“ 快速流量 ”按钮，然后单击“ 停止 ”按钮。
根据尝试分析的内容，可以刷新页面、与页面交互，或只让页面运行。
在 内存 工具的左上角，单击“ 停止堆分析 ” (
) 按钮。或者，在 内存 工具底部，单击“ 停止 ”按钮。 在 “配置文件” 边栏中的 “采样配置文件 ”部分中添加新的 配置文件 ：
采样配置文件显示按函数划分的内存分配细目。 默认视图为 “重 (自下而上) 。 可以根据以下部分切换到 “图表 ”或“ 树 (自上而下) 视图。
还可以使用 控制台实用工具 API 从命令行记录和分组配置文件。
更改采样配置文件的视图
若要更改内存分配采样配置文件中的排序顺序，请使用 配置文件视图模式 下拉列表，该下拉列表最初显示 “重 (自下而上) ：
Menuitems：
- 图表 - 记录的按时间顺序排列的图表。
- 重 (自下而上) - 按内存分配顺序Lists应用的调用函数，并显示每个函数的调用路径。 默认视图。
- 树 (自上而下) - 显示调用结构，从调用堆栈的顶部开始。
图表
“图表”视图模式显示记录的时间图表：
重 (自下而上)
重 (自下而上) 视图模式根据对性能的影响列出函数，并使你能够检查函数的调用路径。 这是默认视图：
树 (自上而下)
树 (自上而下) 视图模式显示调用结构的整体图，从调用堆栈的顶部开始：
排除函数
当选择了 (“从下到下) ”或“ 树 (从上到下) (而不是 图表) 时，有几个按钮可用， (选择行时不会变暗) ：
-
焦点选定函数 (
) -
排除所选函数 (
) -
还原所有函数 (
)
若要从内存分配采样配置文件中排除函数，请选择采样配置文件，然后单击“ 排除所选函数 () 按钮。 请求函数 (已排除函数的父) (子) 使用分配给排除函数 (子) 分配的内存收费。
单击 “还原所有函数 () ”按钮，将所有排除的函数还原回录制。
以图表的形式查看内存分配采样配置文件
“ 图表” 视图提供随时间推移的采样配置文件的可视表示形式。
录制内存分配采样配置文件后，以火焰图的形式查看记录。 在“配置文件视图模式”下拉列表中选择“图表”， (最初显示“重 (自下而上) ) ：
火焰图分为两个部分：
| index | Part | 说明 |
|---|---|---|
| 1 | 概述 | 整个录制的鸟瞰图。 条形的高度对应于调用堆栈的深度。 因此，条形图越高，调用堆栈就越深。 |
| 2 | 调用堆栈 | 这是在录制期间调用的函数的深入视图。 水平轴是时间，垂直轴是调用堆栈。 堆栈是自上而下组织的。 因此，顶部的函数调用它下面的函数，依此类拔。 |
函数是随机着色的。 与其他面板中使用的颜色没有关联。 但是，函数在调用中始终具有相同的颜色，因此可以在每个运行时中观察模式。
高调用堆栈不一定重要;这可能只意味着调用了许多函数。 但宽条形图意味着函数需要很长时间才能完成，因此这些是优化的候选项。
放大录制的特定部分
若要放大调用堆栈的特定部分，请单击并在概述中向左和向右拖动。 缩放后，调用堆栈会自动显示所选录制部分。
查看函数详细信息
单击某个函数，在 “源” 工具中查看它。
将鼠标悬停在函数上以显示名称和计时数据：
| 详情 | 说明 |
|---|---|
| Name | 函数的名称。 |
| 自我调整大小 | 函数的当前调用大小，仅包括 函数中的语句。 |
| 总大小 | 此函数及其调用的任何函数的当前调用大小。 |
| URL | 其中 格式base.js:261base.js的函数定义位置是定义函数的文件的名称，是261定义的行号。 |
调查内存分配，减少垃圾 (“包括对象”复选框)
默认情况下， 分配采样 分析类型仅报告在录制会话结束时仍处于活动状态的分配。 使用时间线分析类型的分配采样或分配进行分析时， (GC'd) 创建、删除和垃圾回收的对象不会显示在内存工具中。
可以信任浏览器清理代码中的垃圾。 但是，请务必考虑到 GC 本身是一项昂贵的操作，并且多个 GC 可能会降低用户对网站或应用的体验。 在“ 性能 ”工具中录制并打开“ 内存 ”复选框时，可以看到 GC 操作发生在陡峭的悬崖上， (堆图表中的) 突然减少：
通过减少代码创建的垃圾量，可以降低每个 GC 的成本和 GC 操作的数量。
跟踪 GC 丢弃的对象
跟踪垃圾回收丢弃的对象：
在 “内存 ”工具中，选择“ 分配采样 选项”按钮。
单击“ 包括主要 GC 丢弃的对象 ”和 “包括次要 GC 丢弃的对象” 设置。
单击“开始”按钮。
在网页上，执行要调查的操作。
完成所有操作后，单击“ 停止 ”按钮。
DevTools 现在跟踪录制期间 GC 的所有对象。 使用这些设置可了解网站或应用产生的垃圾量。 分配采样报告的数据将帮助你识别产生最多垃圾的函数。
如果要调查仅在特定主要或次要 GC 操作期间为 GC 的对象，请适当配置设置以跟踪你关心的操作。 若要详细了解主要 GC 和次要 GC 之间的差异，请参阅 垃圾箱谈话：Orinoco 垃圾回收器 |V8 JavaScript 引擎开发人员博客。
注意
此页面的某些部分是根据 Google 创建和共享的作品所做的修改，并根据 Creative Commons Attribution 4.0 International License 中描述的条款使用。 原始页面 在这里 找到，由凯斯·巴斯克和梅金·卡尔尼创作。
本作品根据 Creative Commons Attribution 4.0 International License 获得许可。