开发JavaScript应用时，你可能遇到过这种情况：应用用久了越来越慢，甚至直接崩溃。很多时候，问题出在“内存泄漏”上。简单说，内存泄漏就是程序占用的内存，用完之后没及时还给系统，导致内存像水池漏水一样，只进不出，最终占满。

虽然JavaScript有自动垃圾回收机制，帮我们管理内存，但如果代码写得不好，一样会发生泄漏。我们来仔细看看几种常见的情况和解决办法。

常见的内存泄漏场景

1. 意外的全局变量

在JavaScript里，如果你不用 var、let 或 const 声明变量，它就会变成全局变量。全局变量会一直存在，直到页面关闭，垃圾回收器不会清理它们。

问题代码：

function createGlobalVariable() {
    // 这里忘记写 let、const 或 var 了！
    leakyVariable = '这是一个全局变量';
}
createGlobalVariable();
// 函数执行完，leakyVariable 依然存在

解决办法：

• 养成好习惯，声明变量一定要用 let、const 或 var。

• 如果确实需要全局变量，在不再使用时，可以手动把它设为 null，帮助垃圾回收。

2. 被遗忘的定时器

setInterval 或 setTimeout 创建的定时器，如果没及时清理，会一直运行。即使相关的函数已经执行完了，定时器本身和它引用的东西可能还会留在内存里。

问题代码：

function startTimer() {
    // 启动一个定时器
    const timerId = setInterval(() => {
        console.log('定时器在运行...');
    }, 1000);
    // 假设这里忘记了 clearInterval(timerId)
}
startTimer();

解决办法：

• 用完定时器一定要清理。把定时器的ID（timerId）保存下来，在合适的时候（比如组件卸载、页面离开）调用 clearInterval(timerId) 或 clearTimeout(timerId)。

3. 游离的事件监听器

给dom元素（比如按钮、输入框）添加了事件监听器，但在删除这个元素时，没有移除监听器。这个监听器函数和它可能引用的大对象，就会一直占用内存。

问题代码：

const button = document.getElementById('myButton');
button.addEventListener('click', function handleClick() {
    console.log('按钮被点击');
    // 这个函数可能引用了其他大对象
});

// 后来删除了按钮，但忘记移除监听器
button.remove();
// 此时，handleClick 函数依然在内存中

解决办法：

• 在移除DOM元素前，先调用 removeEventListener 移除监听器。

• 在现代前端框架（如react、vue）中，利用框架的生命周期函数（如 useEffect 的清理函数、beforeUnmount）自动处理。

4. 不当的闭包使用

闭包是JavaScript的强大功能，可以让内部函数访问外部函数的变量。但如果闭包里引用了外部的大对象，即使外部函数执行完毕，这个对象因为还被闭包引用着，也不会被回收。

问题代码：

function outerFunction() {
    const hugeData = new Array(1000000).fill('some data'); // 一个很大的数组
    return function innerFunction() {
        // 闭包引用了 hugeData
        console.log('数组长度:', hugeData.length);
    };
}
const innerFunc = outerFunction(); // outerFunction 执行完，但 hugeData 还在

解决办法：

• 注意闭包引用的内容。如果只需要部分数据，不要在闭包里引用整个大对象。

• 在不需要闭包时，解除对它的引用（例如，将保存闭包的变量设为 null）。

5. 分离的DOM引用

有时，我们在JavaScript变量里保存了对某个DOM元素的引用。即使这个元素已经从页面上移除了，只要变量还在，这个DOM元素在内存里就删不掉。

问题代码：

// 在变量里保存一个DOM元素
const detachedElement = document.getElementById('toBeRemoved');
// 从页面移除它
document.body.removeChild(detachedElement);

// 问题：变量 detachedElement 仍然引用着这个DOM节点
// 这个节点和它的子节点都不会被垃圾回收

解决办法：

• 在移除DOM元素后，将引用它的变量设为 null：detachedElement = null;

• 避免长时间持有不需要的DOM引用。

6. 循环引用

现代浏览器的垃圾回收算法（主要是标记-清除算法）已经能很好地处理纯粹对象间的循环引用。但当JavaScript对象和DOM元素之间形成循环引用时，在某些旧浏览器或特定情况下仍可能引发泄漏。

一个经典的隐患场景：

function setupLeak() {
    const myElement = document.getElementById('someElement');
    const myObject = {};

    // 对象引用DOM元素
    myObject.element = myElement;
    // DOM元素通过自定义属性引用对象
    myElement.myObjectRef = myObject;
}
// 即使 myElement 从DOM树移除，但由于 myObject 和 myElement 互相引用，可能都无法回收。

解决办法：

• 尽量避免在DOM元素上自定义属性来引用JavaScript对象。

• 在清理时，手动打破循环：myElement.myObjectRef = null;

如何检测和排查内存泄漏？

1. 使用开发者工具：Chrome DevTools 的 Memory（内存） 面板和 Performance（性能） 面板是利器。你可以录制堆内存快照，对比操作前后的内存变化，查找哪个对象在持续增长。

2. 观察性能：如果页面在长时间操作或切换后，变得越来越卡顿，就有可能是内存泄漏的迹象。

3. 代码审查：定期检查代码中是否有上述的几种情况，尤其是定时器、事件监听器和全局变量。

总结一下要点

要避免内存泄漏，关键是要有良好的编码习惯和清理意识：

记住，写代码时不仅要考虑功能实现，也要想着“善后”。该清理的时候清理，该放手的时候放手，你的应用才能长时间稳定流畅地运行。

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://fly63.com/article/detial/13289