JavaScript内存泄漏是指本该被回收的对象因引用未断开而持续占用堆内存,表现为页面变卡、对象数量增长、内存单向上升;常见原因包括闭包+全局引用、未清理事件监听器、未清除定时器及Promise链、间接引用链等。

什么是 JavaScript 内存泄漏
JavaScript 内存泄漏不是“内存用完了”,而是本该被回收的对象,因为某些引用未断开,导致 GC(垃圾回收器)无法释放它——它一直留在堆内存里,持续占用资源。
常见现象包括:页面长时间运行后变卡、heap snapshot 中某类对象数量持续增长、Chrome DevTools 的 Memory 面板显示内存使用量单向上升。
闭包 + 全局引用是高频泄漏源
闭包本身不导致泄漏,但若闭包内引用了外部大对象(如 DOM 节点、大型数组),又把闭包函数挂到全局(如 window、事件总线、定时器回调),就锁住了整个作用域链。
- 避免把闭包赋值给全局变量或长期存活的对象(如
globalThis.handler = () => { ... }) - 在组件卸载、模块销毁时,手动清除闭包持有的强引用:
handler = null - 用
WeakMap存储私有数据,避免意外延长对象生命周期
const privateData = new WeakMap();
function createInstance() {
const el = document.getElementById('app');
privateData.set(el, { config: {} });
return el;
}
事件监听器没清理会拖住 DOM 和回调
给 DOM 元素绑定事件后,若元素被移除但监听器没用 removeEventListener 解绑,该元素和回调函数都会滞留内存——尤其当回调是匿名函数时,根本无法解绑。
立即学习“Java免费学习笔记(深入)”;
- 优先使用事件委托,减少直接绑定数量
- 显式保存监听器引用,确保可移除:
const handler = () => {}; el.addEventListener('click', handler); el.removeEventListener('click', handler); - 现代框架(React/Vue)中,依赖
useEffect或onUnmounted清理;纯 JS 场景建议封装on/off工具函数
定时器和 Promise 链可能隐式持有上下文
setInterval 回调若引用了外部大对象,且忘记 clearInterval,就会持续存活;未处理的 Promise(尤其是 pending 状态)也可能让其 resolve/reject 回调及闭包环境无法释放。
- 所有
setInterval/setTimeout都应配套清理逻辑,哪怕只运行一次 - 避免在
then或catch中创建新闭包并泄露(例如:在then里又发起一个没处理的请求) - 用
AbortController控制异步操作生命周期,配合fetch或自定义 Promise 封装
const controller = new AbortController();
fetch('/api/data', { signal: controller.signal })
.then(r => r.json())
.catch(err => {
if (err.name === 'AbortError') return;
console.error(err);
});
// 页面卸载前
controller.abort();
真正难排查的是间接引用链——比如一个被缓存的函数通过 console.log 打印过某个对象,DevTools 会保留对该对象的引用,导致它暂时无法回收。这类问题只在生产环境长期运行时暴露,调试时得靠 heap snapshot 对比和 retaining path 分析。











