JavaScript 内存管理：闭包陷阱、垃圾回收与四种防泄漏姿势

一、为什么前端也要懂内存管理？

在 C/C++ 等语言中，开发者需要手动分配和释放内存。而 JavaScript 拥有自动垃圾回收机制，这让很多开发者产生了「JS 不需要关心内存」的错觉。然而，随着单页应用的复杂度飙升，SPA 页面长时间运行不刷新，内存泄漏导致的卡顿、崩溃问题日益严重。

内存泄漏并非指内存物理损坏，而是指「不再需要的内存」因为某些原因无法被回收，导致可用内存越来越少。本文将带你深入 V8 引擎内部，彻底搞懂垃圾回收逻辑，并掌握四种主流的防泄漏方案。

二、内存管理的底层基石：堆、栈与 GC 算法

要理解泄漏，必须先理解内存是如何被分配和回收的。

• 栈内存（Stack）：存放基本数据类型和对象引用地址。特点是分配快、释放快（遵循后进先出），由操作系统自动管理。
• 堆内存（Heap）：存放对象实体、数组、闭包变量等。特点是空间大但碎片化，由 V8 引擎的垃圾回收器管理。

V8 的垃圾回收策略

V8 将堆内存分为新生代和老生代，采用不同的回收算法：

1. 新生代（Scavenge 算法）：采用复制算法。将内存一分为二，只使用其中一半。GC 时将存活对象复制到另一半，然后清空当前区域。适合存活时间短的对象。
2. 老生代（Mark-Sweep & Mark-Compact）：
   • 标记清除：遍历根节点，标记所有可达对象，清除未标记对象。这是 JS 中最核心的回收逻辑——只要不可达，就会被回收。
   • 标记整理：解决标记清除产生的内存碎片问题，将存活对象向一端移动。

经典面试题：为什么WeakMap的键必须是对象？

因为 WeakMap 的键是弱引用，不计入垃圾回收的引用计数。如果键是基本类型，无法作为对象的引用地址，也就无法实现「键对象被回收时，键值对自动消失」的特性。

三、内存泄漏的四大元凶

尽管有 GC，但以下四种场景会导致对象「明明没用了，却一直被引用」，从而无法被回收。

1. 意外的全局变量

function foo() {
  bar = "这是一个全局变量"; // 忘记写 var/let/const
}

bar 变成了 window.bar，只要页面不关闭，它永远存在。

2. 被遗忘的定时器与回调

const data = { huge: "..." };
setInterval(() => {
  console.log(data); // 定时器未清除，data 永远无法回收
}, 1000);

即使组件卸载了，只要定时器还在跑，它引用的外部变量就会一直驻留内存。

3. 脱离 DOM 的引用

const elements = [];
function removeBody() {
  const body = document.body;
  document.removeChild(body); // DOM 移除了
  elements.push(body);        // 但数组里还存着它的引用！
}

DOM 节点虽然在页面上看不到了，但在 JS 堆内存中依然庞大。

4. 闭包滥用

闭包会维持对外部作用域变量的引用。如果闭包生命周期过长（如挂载在 window 上），它捕获的大对象也无法释放。

四、四种现代防泄漏解决方案

方案一：WeakRef 与 FinalizationRegistry（ES2021）

这是官方提供的「弱引用」解决方案，允许你持有对象的引用而不阻止其被回收。

const registry = new FinalizationRegistry((heldValue) => {
  console.log(`对象 ${heldValue} 已被垃圾回收`);
});

let obj = { name: "BigData" };
const weakRef = new WeakRef(obj);

// 注册清理回调
registry.register(obj, "MyObject");

// 当 obj = null 后，GC 运行时，回调会被触发
obj = null; 

优点：真正实现了非阻塞式的引用，适合缓存场景。
缺点：回收时机不确定，不能依赖它做核心业务逻辑。

方案二：AbortController 中断版

针对定时器和网络请求，使用 AbortController 统一管理生命周期，避免回调地狱中的泄漏。

const controller = new AbortController();
const signal = controller.signal;

// 监听请求
fetch('/api/data', { signal })
  .then(res => res.json())
  .catch(err => {
    if (err.name === 'AbortError') console.log('请求已取消，防止内存泄漏');
  });

// 组件卸载时调用
controller.abort(); 

优点：原生支持，不仅能取消请求，还能用于移除事件监听。

方案三：手动销毁与置空版

最朴素但也最有效的方法。在框架的生命周期钩子中显式清理。

// React useEffect 示例
useEffect(() => {
  const timer = setInterval(() => doSomething(), 1000);
  const handler = () => handleScroll();
  window.addEventListener('scroll', handler);

  // 清理函数
  return () => {
    clearInterval(timer);
    window.removeEventListener('scroll', handler);
    bigDataCache = null; // 手动断开引用
  };
}, []);

方案四：Map 替代 Object 做缓存

普通对象作为缓存时，键值对不会自动删除。使用 Map 配合业务逻辑（或 LRU 算法）可以更好管理。

const cache = new Map();

function getData(id) {
  if (cache.has(id)) return cache.get(id);
  
  const data = heavyCalculation(id);
  cache.set(id, data);
  
  // 限制缓存大小，防止无限增长
  if (cache.size > 100) {
    const firstKey = cache.keys().next().value;
    cache.delete(firstKey);
  }
  
  return data;
}

五、横向对比：Chrome DevTools 实战排查

当怀疑有泄漏时，不要猜，用工具看。

1. Performance Monitor

打开 DevTools -> More Tools -> Performance Monitor。观察 JS Heap Size 曲线。如果曲线呈锯齿状上升且波谷越来越高，说明有泄漏。

2. Heap Snapshot（堆快照）

• 操作步骤：录制快照 A -> 执行疑似泄漏操作 -> 录制快照 B -> 选择 Comparison 视图。
• 分析重点：按 Delta 排序，查看哪些对象的 (added) 数量异常增加。重点关注 Detached HTMLTreeElement（游离节点）。

3. Allocation Timeline

记录一段时间内的内存分配情况。可以看到具体是哪一行代码分配了未被回收的对象。

六、总结：防御性编程指南

内存管理不仅是性能问题，更是代码质量的体现。优秀的代码应当像呼吸一样自然：申请时明确意图，使用后及时放手。