对时间线 (“时间线上的分配”分析类型使用分配检测)

在“内存”工具中，使用“时间线分配”分析类型查找未正确进行垃圾回收的对象，并继续保留内存。

时间线上的分配检测的工作原理

内存工具时间线分析类型的分配将堆探查器的详细快照信息与性能工具的增量更新和跟踪相结合。同样，跟踪对象的堆分配涉及开始录制、执行一系列操作以及停止记录以进行分析。

时间线上的分配会在整个录制 (定期创建堆快照，每 50 毫秒) 一次，在录制结束时创建一次最终快照。

时间线上的分配检测

后面的 @ 数字是一个对象 ID，该 ID 在录制会话期间创建的多个快照中保留。持久对象 ID 可实现堆状态之间的精确比较。对象在垃圾回收期间移动，因此显示对象的地址毫无意义。

若要开始在时间线上使用分配：

在新窗口或选项卡中打开网页，例如 “分离元素”演示网页。
右键单击网页，然后选择“ 检查”。或者，按 Ctrl+Shift+I（Windows、Linux）或 Command+Option+I (macOS)。

DevTools 随即打开。
在 DevTools 的 “活动栏”中，选择 “内存 () 工具。

如果该选项卡不可见，请单击“ 更多工具 () 按钮，然后选择“ 内存”。此时会打开 “内存 ”工具：
选择“分配时间线”选项按钮。

如果未显示“时间线分配”选项按钮，因为已显示配置文件，请单击左上角的“配置文件” () 。
在 “内存 ”工具底部，单击“ 开始” 按钮。
与网页交互;例如，单击演示网页中的“ 快速流量 ”按钮，然后单击“ 停止 ”按钮。根据尝试分析的内容，可以刷新页面、与页面交互，或只让页面运行。
在 “内存 ”工具的左上角，单击“ 停止录制堆配置文件 ” () 按钮。

在“配置文件”列表的“分配时间线”部分中创建新的快照：

在内存工具中，对时间线使用分配分析类型。这是用于跟踪 JS 堆中的内存泄漏的 DevTools 功能之一。

给定以下代码：

var x = [];
function grow() {
    x.push(new Array(1000000).join('x'));
}
document.getElementById('grow').addEventListener('click', grow);

每次单击代码中引用的按钮时，都会向数组添加一个包含 100 万个字符的 x 字符串。

若要记录时间线的分配：：

堆分配时间线显示创建对象的位置，并标识保留路径。在下图中，顶部的条形图指示何时在堆中找到新对象。

每个条形的高度对应于最近分配的对象的大小，条形图的颜色指示这些对象是否仍位于最终堆快照中。蓝色条表示仍位于时间线末尾的对象，灰色条表示在时间线期间分配的对象，但此后已被垃圾回收。

时间线快照上的分配检测

可以使用上述时间线中的滑块放大该特定快照并查看在该点最近分配的对象：

放大快照

单击堆中的特定对象会显示堆快照底部的保留树。检查对象的保留路径应提供足够的信息来了解未收集对象的原因，并且应进行必要的代码更改以删除不必要的引用。

可以通过 JavaScript 函数查看内存分配。请参阅加快 JavaScript 运行时 (“分配采样”分析类型) 。

注意

此页面的某些部分是根据 Google 创建和共享的作品所做的修改，并根据 Creative Commons Attribution 4.0 International License 中描述的条款使用。原始页面在此处找到，由 Meggin Kearney 创作。