JavaScript内存泄漏指本该回收的内存因引用未断开而持续驻留,导致内存占用升高、页面卡顿甚至崩溃;主要类型包括意外全局变量、未清理事件监听器、闭包持有大对象、未清除定时器、DOM与JS循环引用。

JavaScript内存泄漏,是指本该被垃圾回收器释放的内存,因为某些引用关系未被正确断开,导致对象持续驻留在内存中,无法回收。它不是内存“消失”了,而是程序失去了对这部分内存的控制权,又没让引擎知道可以清理——结果就是内存占用越来越高,页面变卡,严重时崩溃。
意外的全局变量
函数内忘记用 let、const 或 var 声明变量,JS 会自动把它挂到 window(或全局对象)上,变成长期存活的全局引用。
- 比如:
function load() { data = new Array(100000); },每次调用都新增一个百万项数组,却一直挂在window.data上 - 修复方式:启用
"use strict",未声明变量直接报错;必须用全局变量时,用完后主动赋值为 null
未清理的事件监听器
DOM 元素被移除后,如果绑定的事件监听器没解绑,回调函数及其闭包里引用的数据就无法释放。
- 常见于动态渲染的列表、弹窗、图表组件等场景
- 推荐做法:使用
{ once: true }绑定一次性事件;组件销毁时调用removeEventListener;或统一用事件委托减少监听器数量
闭包持有大对象不释放
闭包会维持对外部作用域变量的引用。如果返回的函数被长期持有(如挂到全局、存入缓存、传给第三方库),它引用的大数组、大对象就一直不能回收。
立即学习“Java免费学习笔记(深入)”;
- 例如:
function createHandler() { const big = new ArrayBuffer(10 * 1024 * 1024); return () => console.log(big.byteLength); },即使业务不再需要,big仍被闭包锁住 - 缓解方案:避免在闭包中直接引用大对象;改用 WeakMap 存储关联数据;必要时手动解除引用(如设为 null)
定时器未清除
setInterval 或长期运行的 setTimeout 回调,若引用了外部作用域变量,且定时器没被清除,这些变量就会持续驻留。
- 典型问题:页面跳转或组件卸载后,定时器仍在后台执行
- 实践建议:保存定时器 ID(如
let timerId = setInterval(...)),在离开上下文前调用clearInterval(timerId);React 中放在useEffect清理函数里,Vue 中在beforeUnmount执行
DOM 节点与 JS 对象循环引用
旧版浏览器(或某些特殊场景)中,JS 对象引用 DOM 节点,DOM 节点又通过属性(如 expandoProperty)反向引用 JS 对象,形成闭环,垃圾回收器难以识别其已失效。
- 虽然现代 V8 已大幅改善,但在复杂交互、自定义属性绑定、第三方库操作 DOM 时仍可能触发
- 预防手段:移除 DOM 前,清空其自定义属性、事件绑定、数据缓存;优先使用 WeakMap 关联 JS 数据与 DOM 元素










