JavaScript闭包导致内存泄漏的典型场景与排查方法

闭包是 JavaScript 中最强大的特性之一，允许内部函数访问外部函数的作用域。然而，如果不小心处理，闭包会轻易锁住原本该释放的变量，导致内存泄漏。以下是导致闭包内存泄漏的三个典型场景，以及使用 Chrome DevTools 进行排查和修复的实操步骤。

一、 闭包内存泄漏的三个典型场景

1. 定时器中的未清理引用

当你在 setInterval 或 setTimeout 的回调函数中引用了外部作用域的大型变量，且没有在组件销毁或页面卸载时清除定时器，该变量将一直无法被垃圾回收。

错误示例：

function createHeavyTask() {
    const largeData = new Array(1000000).fill('data'); // 占用大量内存

    // 定时器回调引用了 largeData，形成闭包
    setInterval(() => {
        console.log(largeData.length);
    }, 1000);
}

createHeavyTask();
// 即使 createHeavyTask 执行完毕，largeData 依然被定时器持有

修复方法：

保存定时器 ID，并在不需要时 调用 clearInterval 清除定时器。

function createHeavyTask() {
    const largeData = new Array(1000000).fill('data');
    const timerId = setInterval(() => {
        console.log(largeData.length);
    }, 1000);

    // 返回清理函数
    return function cleanup() {
        clearInterval(timerId);
    };
}

const cleanup = createHeavyTask();
// 当任务结束时执行清理
cleanup();

2. 未移除的事件监听器

DOM 元素上绑定了事件监听器，如果监听器的回调函数形成了闭包并引用了外部数据，即便该 DOM 元素被移除，监听器和闭包依然存在于内存中。

错误示例：

function setupButton() {
    const heavyConfig = { config: 'huge object...' };

    const button = document.getElementById('myButton');

    // 闭包引用了 heavyConfig
    button.addEventListener('click', function() {
        console.log(heavyConfig.config);
    });

    // 假设后续代码移除了 button
    document.body.removeChild(button);
}

setupButton();
// button 节点从 DOM 消失，但监听器和 heavyConfig 仍在内存中

修复方法：

在移除 DOM 元素之前，务必 调用 removeEventListener。

function setupButton() {
    const heavyConfig = { config: 'huge object...' };
    const button = document.getElementById('myButton');

    const handler = function() {
        console.log(heavyConfig.config);
    };

    button.addEventListener('click', handler);

    return function cleanup() {
        button.removeEventListener('click', handler);
        document.body.removeChild(button);
    };
}

const cleanup = setupButton();
cleanup(); // 彻底清理

3. DOM 节点间的循环引用

虽然现代浏览器（如 V8 引擎）能处理大部分 DOM 与 JS 对象间的循环引用，但在某些特定场景下，如果闭包维持了对 DOM 节点的引用，而该 DOM 节点又被隐式保留，就会导致内存无法释放。

错误示例：

function createLeak() {
    const div = document.createElement('div');
    const data = new Array(1000000).fill('leak');

    // 闭包引用了 div，div 的属性又引用了函数
    div.onclick = function() {
        console.log(data.length); // data 被 onclick 闭包引用
    };

    // 此时 div 未挂载到 DOM 树，但因为自身有 onclick 引用，
    // 若此处逻辑复杂导致 div 变量未被覆盖，内存将持续占用
    return div;
}

修复方法：

显式 将引用 置为 null，断开闭包与对象的连接。

function createLeak() {
    const div = document.createElement('div');
    const data = new Array(1000000).fill('leak');

    div.onclick = function() {
        console.log(data.length);
    };

    // 使用完毕后手动断开
    div.onclick = null; 
    return div;
}

二、 使用 Chrome DevTools 排查内存泄漏

排查闭包泄漏的核心思路是“快照对比”。通过比对操作前后的堆快照，找出对象数量异常增长的部分。

以下是完整的排查流程图：

具体操作步骤

1. 打开 Chrome 浏览器，按下 F12 键打开开发者工具。
2. 点击 顶部菜单栏的 Memory 标签页。
3. 选择 左侧的 Heap snapshot 选项。
4. 点击 底部的圆形相机图标 拍摄 一个初始堆快照。
5. 在页面上 执行 你怀疑会导致泄漏的操作（例如：打开并关闭一个模态框 5 次）。
6. 点击 DevTools 左侧的垃圾回收桶图标（Collect garbage），强制浏览器进行一次垃圾回收，排除干扰。
7. 再次点击 相机图标 拍摄 第二个堆快照。
8. 点击 第二个快照上方的 Comparison 视图，将其从 Summary 切换为对比模式。
9. 观察 # Delta 列，该列显示的是对象数量的变化。
10. 寻找 变化量为正数（+）且数值较大的对象类型。
11. 点击 展开该对象，查看 Retainers 区域。
12. 定位 标记为 context 或 闭包 的引用链，确认是哪个闭包持有了该对象。

三、 快速修复对照表

下表总结了三种典型闭包泄漏问题的修复代码与注意事项。

在排查过程中，重点关注 Retainers 面板中的红色节点（表示被 Detached 的 DOM 节点）以及 system / Context 节点，它们通常是闭包泄漏的源头。