javascript中内存泄漏是什么_如何避免呢_技术教程

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();