JavaScript 中的垃圾回收：内存泄漏的常见模式与排查方法

描述

内存泄漏是 JavaScript 开发中常见的问题，指的是程序中已分配的内存由于某种原因未能被垃圾回收器释放，导致内存占用不断上升，最终可能引发性能下降、页面崩溃等问题。虽然 JavaScript 具有自动垃圾回收机制，但不当的代码写法仍会导致内存泄漏。理解内存泄漏的常见模式和排查方法，是优化前端应用性能和稳定性的关键。

知识讲解

我们将从内存泄漏的常见模式、排查工具的使用、预防和修复方法三个步骤，详细拆解这一知识点。

步骤 1：理解内存泄漏的常见模式

内存泄漏通常源于对变量、对象或 DOM 元素的引用被无意中保留。以下是几种典型模式：

1. 意外创建的全局变量：
   在非严格模式下，未声明的变量赋值会隐式创建全局变量。全局变量在页面卸载前不会被回收。

   function leak() {
     leakedVar = 'I am a global now'; // 没有使用 var、let、const
     this.anotherLeak = 'Oops'; // 在非严格模式下，this 可能指向 window
   }
   leak();
   // leakedVar 和 anotherLeak 成为全局属性，直到页面关闭
   

2. 被遗忘的定时器或回调：
   定时器（setInterval、setTimeout）或事件监听器未及时清理，会阻止其引用的函数和外部变量被回收。

   const data = fetchHugeData();
   setInterval(() => {
     console.log(data); // data 一直被引用，即使组件已卸载
   }, 1000);
   // 如果忘记 clearInterval，data 和整个闭包都无法释放
   

3. 脱离 DOM 的引用：
   在 JavaScript 中保存了对 DOM 元素的引用，即使该元素已从页面移除，只要引用存在，元素及其关联数据就无法被回收。

   const elements = [];
   function addElement() {
     const div = document.createElement('div');
     document.body.appendChild(div);
     elements.push(div); // 保存引用
   }
   // 即使从 DOM 中移除 div，elements 数组仍持有引用，div 无法被回收
   

4. 闭包的不当使用：
   闭包会保留其外部函数作用域的变量引用，如果闭包长期存在（如被赋值给全局变量、事件回调），则引用的变量也无法释放。

   function outer() {
     const bigData = new Array(1000000).fill('data');
     return function inner() {
       console.log('inner');
       // bigData 被 inner 闭包引用，即使 outer 执行完毕
     };
   }
   const holdClosure = outer(); // bigData 无法释放，因为 holdClosure 引用 inner
   

5. 未清理的事件监听器：
   添加事件监听器后，如果没有在适当时机移除，监听器函数及其闭包会一直保留，导致关联的 DOM 元素或数据无法回收。

   const button = document.getElementById('myButton');
   button.addEventListener('click', () => {
     console.log('clicked');
   });
   // 如果 button 被移除但监听器未移除，相关函数和闭包可能泄漏
   

6. Map 或 Set 中的强引用：
   使用 Map 或 Set 存储对象时，如果对象作为键或值，只要 Map/Set 存在，对象就不会被回收。WeakMap 和 WeakSet 可避免此问题。

   const map = new Map();
   let obj = { data: 'large' };
   map.set(obj, 'metadata');
   obj = null; // obj 引用解除，但 map 中仍保留键的强引用，对象无法被回收
   

步骤 2：使用开发者工具排查内存泄漏

现代浏览器（如 Chrome）的开发者工具提供了强大的内存分析功能，帮助你定位泄漏点。

1. 性能监控（Performance Monitor）：

   • 打开开发者工具，选择 Performance Monitor 面板。
   • 观察 JS Heap Size 的变化，在操作页面（如切换路由、重复某个动作）时，如果内存持续上升且不回落，可能存在泄漏。

2. 内存快照（Memory Snapshot）：

   • 在 Memory 面板，选择 Heap snapshot。
   • 在页面初始状态拍一个快照，执行可能泄漏的操作，再拍一个快照，比较两个快照。
   • 关注 Comparison 视图，查看新增对象和未释放对象，检查其保留树（Retainers）找到引用源头。

3. 时间轴记录（Allocation instrumentation on timeline）：

   • 在 Memory 面板，选择 Allocation instrumentation on timeline，开始记录。
   • 操作页面，工具会实时显示内存分配的时间线和分配位置。
   • 蓝色条形表示未回收的内存，点击可查看分配时的调用栈，定位泄漏代码。

4. 分离的 DOM 节点检测：

   • 在 Memory 面板，选择 Heap snapshot，搜索 Detached。
   • 查看 Detached HTMLElement，这些是从 DOM 移除但仍被 JavaScript 引用的元素，可能是泄漏点。

步骤 3：预防和修复内存泄漏

基于常见模式和排查结果，采取相应措施：

1. 避免全局变量：
   使用严格模式（'use strict'），避免意外创建全局变量；及时将不再需要的全局变量设为 null。

   'use strict';
   function safe() {
     let localVar = 'I am local'; // 不会泄漏到全局
   }
   

2. 清理定时器和监听器：
   在组件销毁或不再需要时，调用 clearInterval、clearTimeout 和 removeEventListener。

   class Component {
     constructor() {
       this.timer = setInterval(() => {}, 1000);
       window.addEventListener('resize', this.handleResize);
     }
     destroy() {
       clearInterval(this.timer);
       window.removeEventListener('resize', this.handleResize);
     }
   }
   

3. 管理 DOM 引用：
   移除 DOM 元素时，同时移除 JavaScript 中对它的引用（如从数组中移除、设为 null）。

   const elements = [];
   function cleanup() {
     elements.forEach(el => el.remove());
     elements.length = 0; // 清空引用，允许垃圾回收
   }
   

4. 使用弱引用：
   对于缓存或映射，考虑使用 WeakMap 或 WeakSet，它们不阻止键对象的垃圾回收。

   const weakMap = new WeakMap();
   let obj = { id: 1 };
   weakMap.set(obj, 'data');
   obj = null; // obj 可被回收，weakMap 中的条目自动移除
   

5. 注意闭包生命周期：
   如果闭包不需要长期存在，在适当时机解除对它的引用（如赋值为 null）。

   let closure = outer();
   // 使用后解除引用
   closure = null;
   

6. 代码审查和测试：
   定期进行代码审查，重点关注事件监听器、定时器、全局存储和大型数据结构的生命周期。编写自动化测试，模拟长时间运行，用内存工具验证是否存在泄漏。

总结

内存泄漏的排查需要结合代码模式分析和工具使用。通过理解常见泄漏模式（如全局变量、未清理的定时器、DOM 引用、闭包等），并利用开发者工具的内存分析功能（快照、时间轴记录），可以定位泄漏点。修复时，需确保及时清理引用、使用弱引用数据结构，并遵循良好的代码规范。定期进行内存监控，是维护应用长期稳定性的重要实践。