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

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

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

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

对时间线的分配会在整个记录过程中定期创建堆快照 (每 50 毫秒) 一次，记录结束时进行最后一次快照。

时间线上的分配检测

后 @ 面的数字是一个对象 ID，该 ID 在录制会话期间拍摄的多个快照中保持不变。持久对象 ID 允许在堆状态之间进行精确比较。对象在垃圾回收期间移动，因此显示对象的地址没有意义。

若要开始在时间线上使用分配，请执行以下操作：

在新窗口或选项卡中打开网页，例如 Detached Elements 演示网页。
右键单击该网页，然后选择 “检查”。或者，按 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);

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

在时间线上记录分配：

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

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

时间线快照上的分配检测

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

放大快照

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

可按 JavaScript 函数查看内存分配情况。请参阅加速 JavaScript 运行时 (“分配采样”分析类型) 。

注意

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

此页面是否有帮助？