内存泄漏 - lingの知识库

内存泄漏是指应用程序中的内存不再被使用但仍然被占用，导致内存消耗逐渐增加，最终可能导致应用程序性能下降或崩溃。内存泄漏通常是由于开发者编写的代码未正确释放不再需要的对象或数据而导致的。

内存泄漏的案例

1. 意外的全局变量

function someFunction() {
    // 这个变量会变成全局变量，并可能导致内存泄漏
    myobject = { /* ... */ };
}

问题：未使用 var、let 或 const 声明的变量会自动成为全局变量。

2. 闭包

闭包可能会无意中持有对不再需要的变量或对象的引用，从而阻止它们被垃圾回收。

function createClosure() {
    const data = [/* 大量数据 */];
    return function() {
        // 闭包仍然持有对 'data' 的引用，即使它不再需要
        console.log(data);
    };
}

const closureFunction = createClosure();
// 当 'closureFunction' 不再需要时，它仍然保留着 'data' 的引用，导致内存泄漏。

3. 事件监听器

忘记移除事件监听器可能会导致内存泄漏，因为与监听器相关联的对象将无法被垃圾回收。

function createListener() {
    const element = document.getElementById('myElement');

    element.addEventListener('click', () => {
        // 事件处理逻辑
    });
}

createListener();
// 即使 'myElement' 从 DOM 中移除，该元素及其事件监听器仍然在内存中。

4. 循环引用

对象之间的循环引用会阻止它们被垃圾回收。

function createCircularReferences() {
    const obj1 = {};
    const obj2 = {};

    obj1.ref = obj2;
    obj2.ref = obj1;
}

createCircularReferences();
// 由于循环引用，'obj1' 和 'obj2' 都将保留在内存中。

5. setTimeout / setInterval

使用 setTimeout 或 setInterval 时，如果没有正确清理，可能会导致内存泄漏，特别是当回调函数持有对大型对象的引用时。

function doSomethingRepeatedly() {
    const data = [/* 大量数据 */];

    setInterval(() => {
        // 闭包持有对 'data' 的引用，即使它不再需要
        console.log(data);
    }, 1000);
}

doSomethingRepeatedly();
// 'doSomethingRepeatedly' 不再使用时，定时器仍然在运行，导致内存泄漏。

如何避免内存泄漏

使用严格模式 ('use strict') - 防止意外创建全局变量
及时移除事件监听器
- 使用 removeEventListener 或一次性监听器
清理定时器
- 在组件卸载时调用 clearInterval 或 clearTimeout
避免循环引用
- 使用 WeakMap 或 WeakSet 让垃圾回收器自动清理
使用闭包时注意
- 确保不再需要时释放闭包引用
使用工具检测
- Chrome DevTools Memory 面板、leak suspects 等