JavaScript内存泄漏指不再需要的对象未被释放，导致内存持续增长甚至崩溃；常见原因包括全局变量滥用、未清理定时器、闭包保留大对象、未解绑事件监听器及DOM引用残留。
JavaScript内存泄漏是指程序中已经不再需要的对象或数据没有被及时释放，导致内存占用持续增长，最终可能拖慢页面甚至导致浏览器崩溃。
常见内存泄漏场景
理解哪些操作容易引发泄漏，是避免它的第一步：
-
全局变量滥用：意外创建全局变量（比如忘记用
var/let/const声明），会让变量长期驻留在内存中。 -
未清理的定时器：使用
setInterval或setTimeout后，如果组件卸载或对象销毁了，但定时器没清除，回调函数仍持有对外部作用域的引用。 - 闭包中保留大对象引用：闭包内部函数持续引用大型数组、DOM节点或缓存数据，而外部已无需该函数时，这些数据无法被回收。
-
未解绑的事件监听器：给DOM元素绑定事件后，元素被移除但没调用
removeEventListener，监听函数及其作用域链仍被保留。 -
DOM引用残留：把DOM节点保存在JS变量中（如
const el = document.getElementById('x')），之后该节点从文档中删除，但JS仍持有引用，导致整个DOM子树无法释放。
如何检测内存泄漏
借助浏览器开发者工具快速定位问题：
- 打开Chrome DevTools → Memory 面板 → 点击 Record Allocation Timeline，操作页面后停止录制，观察是否有持续增长且不回落的蓝色小方块（代表新分配但未释放的对象）。
- 使用 Heap Snapshot：在关键节点（如页面加载后、操作后、关闭前）拍快照，对比两次快照，筛选“Objects allocated between snapshots”，重点关注数量异常增多或保留时间过长的构造函数（如
Array、Object、自定义类）。 - 留意控制台警告，例如
Detached DOM tree提示——说明有DOM节点被移除但仍被JS引用。
实用的预防与修复方法
写代码时养成几个关键习惯，能大幅降低泄漏风险：
立即学习“Java免费学习笔记（深入）”；
-
手动清理副作用：在React中利用
useEffect返回清理函数；在Vue中用onBeforeUnmount；原生JS中，在移除元素前调用clearInterval、removeEventListener、置空引用（myVar = null）。 -
限制缓存生命周期：避免无限增长的Map或Object缓存。可加大小限制+LRU策略，或用
WeakMap/WeakSet存储仅需临时关联的数据（它们不阻止垃圾回收）。 - 谨慎使用闭包：只在闭包内保留真正需要的数据，大对象尽量延迟创建或按需获取，不用时主动解除引用。
- 避免循环引用（尤其在旧IE中）：JS对象和DOM节点互相引用时，老版本GC可能无法识别。现代引擎已改善，但保持单向引用仍是好实践（如DOM→JS，而非双向绑定）。
一个典型修复示例
错误写法：
function init() {
const btn = document.getElementById('btn');
const data = new Array(1000000).fill('cache'); // 大数组
btn.addEventListener('click', () => {
console.log(data.length); // 闭包捕获data
});
}
init(); // 页面卸载后，btn和data都还在内存里
修复后：
function init() {
const btn = document.getElementById('btn');
const data = new Array(1000000).fill('cache');
const handler = () => console.log(data.length);
btn.addEventListener('click', handler);
// 卸载时清理
return () => {
btn.removeEventListener('click', handler);
// data会在handler被移除后，若无其他引用，可被回收
};
}
// 使用方负责调用清理函数
const cleanup = init();
// 页面离开前
cleanup();
不复杂但容易忽略，关键是让引用关系清晰、生命周期可控。
