DevTools 内存功能如何检测内存泄漏？

Question

**问题：如何使用Chrome DevTools 的内存面板检测 JavaScript 内存泄漏？** 在前端开发中，JavaScript 内存泄漏常导致页面性能下降甚至崩溃。如何利用 Chrome DevTools 的内存（Memory）面板识别并定位此类问题？请描述具体操作步骤，如堆快照（Heap Snapshot）的使用、对象保留树（Retainer Tree）分析、以及如何识别未被释放的 DOM 节点或闭包等常见泄漏源。

Answer 1

一、Chrome DevTools 内存面板概述

Chrome DevTools 的 Memory 面板 是检测 JavaScript 内存泄漏的核心工具。它提供了多种视图，包括堆快照（Heap Snapshot）、分配时间线（Allocation Timeline）等，帮助开发者识别对象的生命周期和内存占用情况。

• 堆快照（Heap Snapshot）：显示当前内存中所有 JavaScript 对象的状态。
• 分配时间线（Allocation Timeline）：记录一段时间内新创建的对象。
• DOM 节点泄漏：当 DOM 节点被 JavaScript 持有但未被释放时发生。

二、使用堆快照分析内存泄漏

1. 打开 Chrome DevTools，切换到 Memory 标签页。
2. 点击 Take snapshot 按钮，生成一个堆快照。
3. 在快照界面中选择 Object allocation tracker 或 Summary 视图进行分析。
4. 查找重复出现或数量异常增长的对象类型，例如：

对象类型	实例数	保留大小
(closure)	500+	2MB+
Detached DOM node	20+	500KB+

三、通过 Retainer Tree 定位引用链

在堆快照中选中一个可疑对象后，查看其 Retainer Tree，可追踪该对象为何未被垃圾回收。

// 示例闭包函数
function createLeak() {
    let data = new Array(100000).fill('leak');
    return function () {
        console.log(data.length);
    };
}
let leakFunc = createLeak();

此代码中，data 会因闭包被长期持有，导致内存泄漏。

graph TD A[Root] --> B{Closure} B --> C[data array] C --> D[Large memory usage]

四、识别常见的内存泄漏源

以下是几种常见的内存泄漏场景及其识别方式：

• 未释放的事件监听器：检查是否绑定过多事件且未解绑。
• 缓存未清理：如使用 Map/WeakMap 存储大量数据未清除。
• 定时器未清除：setInterval 或 setTimeout 未取消。
• DOM 节点泄漏：节点从文档树移除但仍被 JS 引用。

在 Memory 面板中搜索关键词如 Detached DOM tree 可快速定位此类问题。

五、结合 Allocation Timeline 进行动态分析

使用 Allocation Timeline 可以动态观察内存分配过程：

1. 点击 Record allocation timeline 开始录制。
2. 执行可能引发泄漏的操作（如页面切换、组件加载）。
3. 停止录制后，查看对象的生命周期和释放情况。
4. 若发现某些对象持续存在，则可能存在泄漏。

此方法尤其适用于检测异步操作或动画帧中产生的短期对象未及时释放的问题。