加快 JavaScript 运行时
若要识别昂贵的函数，请使用 内存 工具。
摘要
使用内存工具中的分配采样准确记录调用了哪些函数以及每个 函数所需的内存 量。
将配置文件可视化为火焰图。
记录采样配置文件
如果发现 JavaScript 中呈现) (中断，请收集采样配置文件。 采样配置文件显示运行时间花费在页面中的函数上的位置。
在 DevTools 中，转到 “内存” 工具。
单击“ 分配采样 ”选项按钮。
单击“开始”。
根据尝试分析的内容，可以刷新页面、与页面交互，或只让页面运行。
完成后，单击“ 停止 ”按钮。
还可以使用 控制台实用工具 API 从命令行记录和分组配置文件。
查看采样配置文件
完成录制后，DevTools 会自动使用录制中的数据填充“采样配置文件”下的“内存”面板。
默认视图为 “重 (自下而上) 。 此视图允许查看哪些函数对性能影响最大，并检查每个函数的请求路径。
更改排序顺序
若要更改排序顺序，请选择 焦点选定函数 旁边的下拉菜单 (
) 图标，然后选择以下选项之一：
图表。 显示记录的时间图表。
重 (自下而上) 。 按对性能的影响列出函数，并使你能够检查函数的调用路径。 这是默认视图。
树 (自上而下) 。 显示调用结构的整体图，从调用堆栈的顶部开始。
排除函数
若要从采样配置文件中排除某个函数，请选择该函数，然后单击“ 排除所选函数 (
) 按钮。 请求函数 (已排除函数的父) (子) 使用分配给排除函数 (子) 分配的内存收费。
单击“ 还原所有函数 (
) ”按钮，将所有排除的函数还原回录制。
以图表的形式查看采样配置文件
“ 图表” 视图提供随时间推移的采样配置文件的可视表示形式。
录制采样配置文件后，通过将排序顺序更改为“图表”来查看记录作为火焰图。
火焰图分为两个部分：
| index | Part | 说明 |
|---|---|---|
| 1 | 概述 | 整个录制的鸟瞰图。 条形的高度对应于调用堆栈的深度。 因此，条形图越高，调用堆栈就越深。 |
| 2 | 调用堆栈 | 这是在录制期间调用的函数的深入视图。 水平轴是时间，垂直轴是调用堆栈。 堆栈是自上而下组织的。 因此，顶部的函数调用它下面的函数，依此类拔。 |
函数是随机着色的。 与其他面板中使用的颜色没有关联。 但是，函数在调用中始终具有相同的颜色，因此可以在每个运行时中观察模式。
高调用堆栈不一定重要;这可能只意味着调用了许多函数。 但宽条形图意味着函数需要很长时间才能完成，因此这些是优化的候选项。
放大录制的特定部分
若要放大调用堆栈的特定部分，请单击并在概述中向左和向右拖动。 缩放后，调用堆栈会自动显示所选录制部分。
查看函数详细信息
单击某个函数，在 “源” 工具中查看它。
将鼠标悬停在函数上以显示名称和计时数据：
| 详情 | 说明 |
|---|---|
| Name | 函数的名称。 |
| 自我调整大小 | 函数的当前调用大小，仅包括 函数中的语句。 |
| 总大小 | 此函数及其调用的任何函数的当前调用大小。 |
| URL | 其中 格式base.js:261base.js的函数定义位置是定义函数的文件的名称，是261定义的行号。 |
注意
此页面的部分内容是基于 Google 创建和 共享 的工作进行的修改，并根据 Creative Commons 署名 4.0 国际许可中所述的条款使用。 原始页面 在此处 找到，由 凯斯·巴斯克 (技术作家、Chrome DevTools & Lighthouse) 和 Meggin Kearney (Technical Writer) 创作。
