JavaScript中的内存泄漏：简单易懂的指南

当你写 JavaScript 代码时，你的计算机会分配内存来存储变量、对象和其他数据。但如果这些内存没有被正确释放或回收，就会发生内存泄漏。

这篇博客文章将简要地解释内存泄漏并探讨如何避免内存泄漏。让我们开始吧！

……

想象你有一个抽屉用来存放物品。如果你不断往里面放东西，却不清理旧的或不再使用的物品，抽屉最终会装不下。内存泄漏就像你的程序抽屉装不下东西一样。

在 JavaScript 中，内存泄漏发生在不再需要的内存未被释放时。这会导致应用程序随着时间推移占用越来越多的内存，从而使应用变慢，甚至可能在极端情况下导致应用崩溃。

此处省略具体内容——

JavaScript 使用一种叫做垃圾回收机制的东西来管理内存。可以将其想象成一个清理工具，会自动清理不再使用的内存。

1. 找到那些不再被用到的变量、对象或函数。

释放，他们占用的内存空间。

然而，有时候，这个清理团队无法很好地完成工作。这样一来，你就会遇到内存泄漏。

……

1. 全局变量

全局变量的生命周期和你的应用程序一样长。如果你不小心在全局范围创建了变量，它们可能会比预期的存活得更久。

    // 内存泄漏示例代码
    function createGlobalVariable() {
        leakyVar = "我是一个全局变量！"; // 缺少 `let`、`const` 或 `var`
    }
    createGlobalVariable();

全屏 全屏退出

注意：要始终使用这些关键字（let、const 或 var）来声明变量，以限制其作用范围。

……

2. 未移除事件监听器:

事件监听器可以持有对象引用。如果你忘记移除这些引用，这些对象就不会被垃圾回收机制回收。

    // 一个内存泄漏的例子
    const button = document.getElementById("myButton");
    button.addEventListener("click", () => {
        console.log("按钮被点了!");
    });

    // 如果 'button' 被从 DOM (文档对象模型) 中移除但事件监听器没有被移除，就会导致内存泄漏。

全屏显示 退出全屏

修正：当不再需要时，移除相关的事件监听器。

    button.removeEventListener("click", callbackFunction); // 移除按钮的点击事件监听器

点击全屏 开启全屏 点击退出 退出全屏

3. DOM 参考

如果你在代码中保留了一个 DOM 元素的引用，但该元素被移除，那么它占用的内存就不会被释放。

    // 内存泄漏示例 
    let cachedDiv = document.getElementById("myDiv");
    document.body.removeChild(cachedDiv);

    // 'cachedDiv' 仍然保留已移除的 DOM 节点的引用。

点击全屏进入，点击退出全屏

注意：在删除 DOM 元素后要将引用置空。

    // cachedDiv 用于缓存某个 div 元素
    cachedDiv = null;

全屏模式 退出全屏

4. 闭包

当内部函数记住父作用域中的变量时，就形成了闭包。这非常强大和灵活，但如果使用不当，可能会导致内存泄漏，因此需要注意谨慎使用。

    // 一个内存泄漏的例子
    function createClosure() {
        const largeArray = new Array(1000000); // 一个很大的数组
        return function() {
            console.log(largeArray.length); // 打印数组的长度
        };
    }
    // 创建一个闭包，该闭包引用一个很大的数组。
    const leakyClosure = createClosure();

全屏模式，退出全屏

修复：避免不必要的闭包，特别是在处理大量数据时。

1. 性能工具

现代浏览器自带一些开发工具，帮助检测内存问题。比如：

• 在 Chrome 中，按 F12 打开开发者工具，选择内存选项卡。

  记录一次内存快照，查找那些存留时间超出预期的对象。

2. 堆转储

堆快照显示内存中的内容。使用它们来识别那些不应该再存在的对象。

3. 性能监视

注意你的应用程序随时间的表现。内存使用不断增加的图表通常表明存在内存泄漏问题。

1- 使用 let 和 const，避免使用全局变量，

2- 清理事件侦听器：始终在不再需要时移除侦听器，以避免内存泄漏等问题。

3- 断开引用：将不再使用的对象或变量设置为 null。

避免在循环中过度嵌套，特别是要注意循环的使用。

定期进行性能检测：使用浏览器工具查看内存使用情况。

内存泄露可能会悄悄地溜进你的代码，但是通过良好的编程习惯和定期检查，你的应用就能保持快速高效。

时刻记住你的代码占用或保留什么，并在不再需要了时记得清理干净自己留下的东西。

🌐 可在我以下平台联系我啦

📍 领英
📍 X（推特）
📍 电报
📍 Instagram

祝你编码愉快！