JavaScript中的内存泄漏常见原因及排查方法有哪些？

JavaScript中的内存泄漏常见原因包括意外全局变量、未清理定时器、闭包引用、事件监听未解绑及缓存不当；排查方法包括使用Chrome DevTools分析堆快照、监控事件监听、使用WeakMap及组件销毁时手动清理资源。

• 意外的全局变量：未使用var、let或const声明的变量会成为全局变量，长期驻留内存。例如：

  function leak() { leakVariable = "我是一个意外的全局变量"; // 未声明直接赋值}

  每次调用函数都会创建无法被回收的全局变量。

• 未清理的定时器或回调：setInterval或setTimeout引用了外部对象，即使组件销毁后定时器仍在运行，导致对象无法释放。例如：

  setInterval(() => { console.log(someLargeObject); // 外部大对象被持续引用}, 1000);

  若未清除定时器，someLargeObject将无法被垃圾回收。

• 闭包引用外部大对象：闭包会保留对外部作用域的引用，若外部变量是大型数据结构且闭包长期存在，会造成泄漏。例如：

  function createLeak() { const hugeData = new Array(1000000).fill("data"); return function() { console.log(hugeData.length); // 闭包引用 hugeData };}

  即使createLeak执行完毕，返回的函数仍持有hugeData，若该函数被长期引用，数据无法释放。

• 事件监听未解绑：DOM元素被移除后，若其事件监听器未显式移除，可能导致内存残留。例如：

  const element = document.getElementById("myBtn");element.addEventListener("click", handler);// 后续移除 element 但未调用 removeEventListener

  单页应用（SPA）中频繁创建销毁组件时易发生此类问题。

• 被遗忘的缓存或Map/Set引用：使用普通对象或Map不当可能导致对象无法释放。例如：

  const cache = new Map();function setData(key, value) { cache.set(key, value); // key 是 DOM 节点或大对象}

  若cache长期存在且不清理，value将一直被引用，无法回收。

• 使用Chrome DevTools的Memory面板：

  打开开发者工具，切换至Memory标签。

  点击Take Heap Snapshot拍摄堆快照，对比多次操作前后的对象数量。

  查找本应被释放却仍存在的对象，重点关注闭包、监听器或未清理的定时器。

• 使用Performance面板记录时间线：

  录制一段时间内的内存使用情况，观察内存曲线是否持续上升且不回落。

  结合代码操作节点，定位泄漏发生的具体行为（如频繁创建销毁组件时的内存增长）。

• 监控Event Listener数量：

  在Elements面板选中DOM节点，查看Event Listeners分组。

  检查是否存在多余的监听器堆积（如已移除的元素仍绑定事件）。

• 使用WeakMap和WeakSet替代Map和Set：

  WeakMap/WeakSet的键是弱引用，不会阻止垃圾回收，适合缓存关联DOM节点或私有数据。例如：const privateData = new WeakMap();const obj = {};privateData.set(obj, { secret: "hidden" }); // obj 被回收时，数据也随之释放

• 组件销毁时手动清理资源：

  在SPA框架（如React、Vue）中，确保在卸载时执行清理逻辑：

  React示例（使用useEffect清理定时器）：useEffect(() => { const timer = setInterval(() => {}, 1000); return () => clearInterval(timer); // 组件卸载时清理}, []);

  Vue示例（使用beforeUnmount移除监听器）：beforeUnmount() { window.removeEventListener('resize', this.handler);}

• 保持引用清晰：避免意外全局变量，使用严格模式（'use strict'）可提前暴露问题。
• 及时解绑和清除：销毁组件时移除事件监听、清除定时器、释放闭包引用。
• 合理使用缓存：优先选择WeakMap/WeakSet，或为缓存设置过期机制。
• 定期检查内存状态：利用开发者工具监控内存使用，尤其在复杂应用中。