在 JavaScript 中，内存泄漏通常是由于对象或引用未被正确释放，导致它们持续占用内存。以下是常见的内存泄漏陷阱及解决方案：

一、常见陷阱与解决方案

1. 未移除事件监听器

   • 问题：框架（如 Vue、React）或手动添加的事件监听器未调用 removeEventListener。
   • 解决：

     // 框架示例（如 Vue）
     if (this.$eventBus) this.$eventBus.off('event', handler);
     
     // 手动添加
     element.removeEventListener('click', handler);
     

   • 最佳实践：使用事件委托（Event Delegation）减少监听器数量。

2. 未清除定时器

   • 问题：setInterval/setTimeout 返回的 ID 未通过 clearInterval/clearTimeout 清理。
   • 解决：

     const timerId = setInterval(() => {}, 1000);
     clearInterval(timerId); // 清理前先保存 ID
     

3. 闭包持有未释放的引用

   • 问题：函数内部引用外部变量，导致变量无法被 GC 回收。
   • 解决：
     • 使用 const 或 let 避免重复声明。
     • 通过解包操作符解绑变量：

       // 示例：循环中添加监听器
       for (let i = 0; i < elements.length; i++) {
         elements[i].addEventListener('click', () => console.log(i)); // ❌ 闭包问题
       }
       // 正确写法：解绑变量
       for (const element of elements) {
         element.addEventListener('click', () => console.log(i)); // ✅
       }
       

4. 未释放大型数据

   • 问题：图片、音频、视频等资源未销毁。
   • 解决：

     const img = new Image();
     img.src = 'path.jpg';
     img.onload = () => {
       img.onload = null; // 清理事件监听
       img = null; // 解绑变量
     };
     

5. DOM 引用未清理

   • 问题：节点被移除后仍被引用。
   • 解决：

     const div = document.getElementById('target');
     if (div) {
       div.remove(); // 或 document.body.removeChild(div);
       div = null; // 解绑变量
     }
     

6. 缓存未清理

   • 问题：缓存库（如 LRU Cache）未手动清理过期数据。
   • 解决：定期调用 clear() 或设置过期时间。

7. 全局变量污染

   • 问题：模块导出对象后未解绑，导致全局污染。
   • 解决：
     • 使用 IIFE（立即执行函数）：

       (function() {
         // 全局变量仅在函数内有效
       })();
       

     • 导出后解绑：

       export default function(){}; // 解绑后为 null
       

二、高级技巧

1. 使用 WeakMap/WeakRef

   • 场景：避免对象被 GC 回收困难。
   • 示例：

     const weakMap = new WeakMap();
     const obj = {};
     weakMap.set(obj, 'value'); // 自动释放 obj 的引用
     

2. 监控内存变化

   • 工具：Chrome DevTools 的 Memory 面板（Shift + F5）。
   • 操作：
     1. 初始内存快照（Take a Heap Snapshot）。
     2. 执行代码后再次快照，对比差异。

3. 代码规范

   • 习惯：
     • 在函数末尾添加清理逻辑（如 try/catch 块）。
     • 使用解包操作符 ... 解绑变量：

       const [a, b] = [1, 2]; // ✅ 避免重复声明
       

三、总结

关键原则：始终确保对象不再被引用时，主动调用清理逻辑，而非依赖 GC。对于复杂项目，建议结合内存分析工具定期检测。
文章来源：https://www.hdcspt.cn/baike/58.html