内存泄漏指已分配的内存因引用未清除而无法被回收，常见于全局变量、定时器、事件监听器、闭包和DOM引用未释放；可通过Chrome DevTools的堆快照、内存分配时间线及performance.memory监控检测；修复方法包括解绑事件、清除定时器、避免意外全局变量、谨慎使用闭包、及时释放DOM引用，并采用WeakMap/WeakSet等弱引用结构预防。
JavaScript性能优化中，内存泄漏是一个常见但容易被忽视的问题。它会导致页面运行缓慢、卡顿，甚至崩溃。尤其在单页应用（SPA）或长时间运行的Web应用中，内存泄漏影响尤为明显。及时检测并修复内存泄漏，是提升应用稳定性和用户体验的关键。
什么是JavaScript内存泄漏？
内存泄漏指的是程序中已分配的内存无法被回收，即使这部分内存已经不再使用。JavaScript具有自动垃圾回收机制，通常通过标记清除来释放无引用的对象。但在某些情况下，开发者无意中保留了对不需要对象的引用，导致垃圾回收器无法正确清理。
常见的内存泄漏场景包括：
- 意外的全局变量
- 未清除的定时器或回调
- 闭包引用外部大对象
- 事件监听器未解绑
- DOM引用未释放（如缓存了已移除的DOM节点）
如何检测内存泄漏？
立即学习“Java免费学习笔记（深入）”；
1. 使用Chrome DevTools的Memory面板
- 打开DevTools → Memory标签
- 执行操作前后分别进行堆快照（Heap Snapshot）
- 对比快照，查看对象数量是否异常增长
- 重点关注Detached DOM Trees（分离的DOM树），这是典型的泄漏信号
2. 记录内存分配时间线（Record Allocation Timeline）
- 该功能可实时追踪内存分配情况
- 观察是否存在持续增长的对象未被回收
- 定位到具体代码行，便于排查
3. 监控内存使用指标
可通过performance.memory（非标准但Chrome支持）获取JS堆使用情况：console.log(performance.memory);
包含totalJSHeapSize、usedJSHeapSize等字段，可用于自动化监控或日志上报。
常见泄漏场景与修复方法
1. 清理事件监听器
当DOM元素被移除时，若事件监听器未解绑，其回调函数可能仍持有对元素的引用。
element.addEventListener('click', handler);
// 使用后应解绑
element.removeEventListener('click', handler);对于一次性事件，可使用{ once: true }选项避免遗忘解绑。
2. 清除定时器
setInterval或setTimeout在组件销毁时必须清除。
const timer = setInterval(() => { /* ... */ }, 1000);
// 组件卸载时
clearInterval(timer);3. 避免意外的全局变量
未声明的变量会挂载到window上，长期驻留内存。
function leak() {
// 错误：漏写var/let/const
leakedVar = 'I am global now';
}开启严格模式（'use strict'）可防止此类错误。
4. 谨慎使用闭包
闭包会保留对外部作用域的引用，若引用大对象且长期不释放，会造成泄漏。
function outer() {
const bigData = new Array(10000).fill('data');
return function inner() {
console.log('still holding bigData');
};
}确保不再需要时，将引用置为null。
5. 及时解除DOM引用
缓存DOM节点时，需在节点移除后清空引用。
let cachedElement = document.getElementById('tmp');
// 后续该元素被remove()
cachedElement = null; // 手动释放预防策略与最佳实践
除了修复已知问题，建立良好的编码习惯更能从根本上减少泄漏风险。
- 组件化开发中，在销毁生命周期中统一清理资源（如Vue的beforeUnmount，React的useEffect返回清理函数）
- 使用WeakMap/WeakSet存储关联数据，它们不会阻止垃圾回收
- 避免长时间持有大型数据结构的引用
- 定期进行内存测试，特别是在核心功能迭代后
基本上就这些。内存泄漏虽隐蔽，但通过工具辅助和规范编码，完全可以控制在合理范围内。
