目录

内存泄漏到底是个什么东西？如何避免内存泄漏

一、什么是内存泄漏？

1、内存泄漏

2、GC（垃圾回收）机制是什么？

二、常见内存泄漏场景

1、意外的全局变量

2、被遗忘的定时器/回调

3、闭包未释放大对象

4、DOM 引用未解绑

 5、被遗忘的监听器、websocket、观察者等（如 IntersectionObserver）

6、缓存未清理（Map / WeakMap 使用不当）

三、结语

---

        作者：watermelo37

        CSDN万粉博主、华为云云享专家、阿里云专家博主、腾讯云、支付宝合作作者，全平台博客昵称watermelo37。

        一个假装是giser的coder，做不只专注于业务逻辑的前端工程师，Java、Docker、Python、LLM均有涉猎。

---------------------------------------------------------------------

温柔地对待温柔的人，包容的三观就是最大的温柔。

---------------------------------------------------------------------

内存泄漏到底是个什么东西？如何避免内存泄漏

        内存泄漏（Memory Leak）是 Web 开发中常见但容易忽视的问题。随着项目体量增长或长时间运行的单页应用增多，内存泄漏所带来的性能下降、页面卡顿甚至崩溃问题变得尤为突出。

        本文将带你深入理解内存泄漏的成因，常见场景，以及应对方案，助你写出更加稳健高效的前端应用。

一、什么是内存泄漏？

1、内存泄漏

        内存泄漏指的是：程序中某些对象已经不再被需要，但由于某种原因仍然被引用，导致垃圾回收器无法释放这些内存。

2、GC（垃圾回收）机制是什么？

        现代 JavaScript 引擎如 V8 采用 “可达性算法（Reachability）”，当某个对象从根对象（如 window、全局变量、闭包引用等）开始无法被访问到，它就会被回收。

        有些情况下会绕过垃圾回收机制，那些已经不需要但是不会被回收的变量等就会一直保存在内存中，会持续的浪费内存，直到进程被杀死才会彻底清除。这就是内存泄漏产生的原因。

二、常见内存泄漏场景

1、意外的全局变量

        函数内如果不使用 let / var / const 声明变量，就会直接挂载到 window 对象上。所以需要尽量避免直接写变量，或者开始‘ use strict ’严格模式，避免隐式全局变量。

        尽量不要使用 var 定义变量，在全局作用域里面（即函数外）通过 var 定义的变量均会挂载在 window 对象上，不会被销毁，会持续造成内存泄漏。

        尽量使用 const  / let 来定义变量，哪怕是在全局作用域里面通过 const  / let 定义的变量，也只会挂载在 Script 作用域中。即全局词法环境（Lexical Environment） 中，这是一种抽象的作用域管理方式，浏览器自己维护的，你访问不到它，但 JavaScript 引擎知道该怎么找。相比于直接通过 var 挂载到window对象上，相对更好被GC清除一些

function foo() {leaked = "I am global!";
}
foo(); // leaked 被隐式挂载在 window 上

2、被遗忘的定时器/回调

        闭包中的 userData 永远被回调引用，永远不被释放。

const userData = { name: "Tom" };
setInterval(() => {console.log(userData.name); // 闭包引用 userData
}, 1000);

        所以应该在组件销毁时清除定时器。

const timer = setInterval(...);
clearInterval(timer);

3、闭包未释放大对象

        闭包允许函数访问其创建时的作用域链中的变量，即使这些变量在函数外部已经不可访问。闭包会保留对 createClosure 函数作用域链的引用，这意味着 bigData 也会被保留。

function createClosure() {const bigData = new Array(1e6);return function () {console.log('I am using closure');};
}
const closure = createClosure(); // bigData 被保留

        解决方案一般有两种思路，避免大对象进入闭包逻辑：

function createClosure() {const bigData = new Array(1e6); // 创建一个大数组console.log('I am using closure');
}
createClosure();

        或者手动释放引用：

function createClosure() {const bigData = new Array(1e6); // 创建一个大数组return function () {console.log('I am using closure');bigData = null; // 手动释放引用};
}
const closure = createClosure();
closure(); // 调用闭包，释放 bigData

4、DOM 引用未解绑

        DOM 被移除时，如果事件监听没有解绑，闭包可能继续引用 DOM。

const element = document.getElementById('btn');
element.onclick = () => {console.log('clicked');
};

        应在DOM被销毁时及时解绑事件。

element.removeEventListener('click', handler);

 5、被遗忘的监听器、websocket、观察者等（如 IntersectionObserver）

        比如元素删除了，observer 还在监听，需要使用 observer.disconnect() 手动解除观察。

const observer = new IntersectionObserver(() => {console.log('intersected');
});
observer.observe(document.getElementById('foo'));

6、缓存未清理（Map / WeakMap 使用不当）

        Map 会强引用 key 和 value，导致无法释放。致无法释放。

const cache = new Map();
function addToCache(key, value) {cache.set(key, value); // 永久引用
}

三、结语

        内存泄漏的本质是代码“留下来不该留下来的东西”的体现。通过了解 JavaScript 的垃圾回收机制和闭包原理，我们可以更有意识地优化代码，避免性能隐患。

        说实话闭包这个东西，说简单几句话就说完了， 但是要扯到各种作用域，垃圾回收机制，各种作用域创建的函数上下文，可能一万字都讲不清楚，今天就说到这里，有探究想法的读者可以在评论区讨论。

        只有锻炼思维才能可持续地解决问题，只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助，麻烦您点个赞支持一下，还可以收藏起来以备不时之需，有疑问和错误欢迎在评论区指出~

        其他热门文章，请关注：

        极致的灵活度满足工程美学：用Vue Flow绘制一个完美流程图

        你真的会使用Vue3的onMounted钩子函数吗？Vue3中onMounted的用法详解

        DeepSeek：全栈开发者视角下的AI革命者

        通过array.filter()实现数组的数据筛选、数据清洗和链式调用

        通过Array.sort() 实现多字段排序、排序稳定性、随机排序洗牌算法、优化排序性能

        TreeSize：免费的磁盘清理与管理神器，解决C盘爆满的燃眉之急

        通过MongoDB Atlas 实现语义搜索与 RAG——迈向AI的搜索机制

        深入理解 JavaScript 中的 Array.find() 方法：原理、性能优势与实用案例详解

        el-table实现动态数据的实时排序，一篇文章讲清楚elementui的表格排序功能

        前端实战：基于Vue3与免费满血版DeepSeek实现无限滚动+懒加载+瀑布流模块及优化策略

        MutationObserver详解+案例——深入理解 JavaScript 中的 MutationObserver

        JavaScript中通过array.map(）实现数据转换、创建派生数组、异步数据流处理、DOM操作等

        高效工作流：用Mermaid绘制你的专属流程图；如何在Vue3中导入mermaid绘制流程图

        干货含源码！如何用Java后端操作Docker（命令行篇）

        在线编程实现！如何在Java后端通过DockerClient操作Docker生成python环境

        Dockerfile全面指南：从基础到进阶，掌握容器化构建的核心工具