内存泄漏常见于意外全局变量、未清理定时器、闭包引用、事件监听未解绑及缓存不当；可通过Chrome DevTools分析堆快照、监控事件监听、使用WeakMap及组件销毁时手动清理来排查和预防。
JavaScript中的内存泄漏虽然在现代浏览器中已大幅减少，但依然可能在复杂应用中出现。内存泄漏会导致页面变慢、崩溃或占用过多系统资源。了解常见原因和排查方法能有效预防和解决这类问题。
常见内存泄漏原因
1. 意外的全局变量
未声明的变量会自动成为全局变量，长期驻留在内存中。
function leak() {
leakVariable = "我是一个意外的全局变量"; // 忘记使用 var/let/const
}每次调用函数都会创建一个无法被回收的全局变量。
2. 未清理的定时器或回调
setInterval 或 setTimeout 中引用了外部对象，即使组件已销毁，定时器仍在运行，导致对象无法释放。
setInterval(() => {
console.log(someLargeObject);
}, 1000);如果 someLargeObject 不再需要，但定时器未清除，该对象仍被引用，无法回收。
3. 闭包引用外部大对象
闭包会保留对外部作用域的引用。若闭包长期存在，而外部变量是大型数据结构，就会造成泄漏。
function createLeak() {
const hugeData = new Array(1000000).fill("data");
return function() {
console.log(hugeData.length); // 闭包引用 hugeData
};
}即使 createLeak 执行完，返回的函数仍持有 hugeData，若该函数被长期引用，数据无法释放。
立即学习“Java免费学习笔记（深入）”；
4. 事件监听未解绑
DOM 元素被移除后，若其事件监听器未被显式移除，某些情况下仍会被保留在内存中。
const element = document.getElementById("myBtn");
element.addEventListener("click", handler);
// 后续 remove element，但未 removeEventListener尤其在单页应用中频繁创建销毁组件时容易发生。
5. 被遗忘的缓存或Map/Set引用
使用普通对象或 Map/WeakMap 不当可能导致对象无法释放。
const cache = new Map();
function setData(key, value) {
cache.set(key, value); // key 是 DOM 节点或大对象
}如果 cache 长期存在且不清理，value 将一直被引用，无法回收。
排查内存泄漏的方法
1. 使用 Chrome DevTools 的 Memory 面板
- 打开 DevTools → Memory 标签
- 使用“Take Heap Snapshot”拍摄堆快照，对比多次操作前后的对象数量
- 查找本应被释放却仍存在的对象，尤其是可疑的闭包或监听器
2. 使用 Performance 面板记录时间线
- 录制一段时间内的内存使用情况
- 观察内存曲线是否持续上升且不回落
- 结合代码操作节点，定位泄漏发生的具体行为
3. 监控 Event Listener 数量
在 Elements 面板选中节点，查看 Event Listeners 分组，检查是否存在多余的监听器堆积。
4. 使用 WeakMap 和 WeakSet 替代 Map 和 Set
WeakMap/WeakSet 的键是弱引用，不会阻止垃圾回收。适合用于私有数据或缓存关联 DOM 节点。
const privateData = new WeakMap();
const obj = {};
privateData.set(obj, { secret: "hidden" }); // obj 被回收时，数据也随之释放5. 组件销毁时手动清理资源
在 SPA 框架（如 React、Vue）中，确保在卸载时执行清理：
useEffect(() => {
const timer = setInterval(() => {}, 1000);
return () => clearInterval(timer); // 清理定时器
}, []);Vue 示例：
beforeUnmount() {
window.removeEventListener('resize', this.handler);
}基本上就这些。关键在于保持引用清晰，及时解绑、清除定时器、避免意外全局变量，并善用开发者工具定期检查内存状态。不复杂但容易忽略。
