谈谈 JavaScript 中的垃圾回收机制 (Garbage Collection)，例如标记-清除 (Mark-and-Sweep) 和引用计数 (Reference Counting)。

各位观众老爷，晚上好！今儿个咱们聊聊 JavaScript 里的“清道夫”—— 垃圾回收机制 (Garbage Collection)，简称 GC。这玩意儿听起来高大上，其实干的就是捡破烂的活儿，把咱们程序里没用的内存给清理掉，腾地方给新人住。

为啥需要这玩意儿？你想啊，咱们写程序，各种变量、对象，用完了就扔，要是没人管，内存早晚被塞满，程序就崩溃了，这就叫“内存泄漏”。所以，GC 的任务就是防止内存泄漏，保证程序能长期稳定运行。

JavaScript 是一门自带 GC 的语言，省去了咱们手动管理内存的麻烦。但是，了解它的工作原理，能帮助咱们写出更高效的代码，避免一些常见的内存泄漏陷阱。

今天咱们主要讲两种经典的 GC 算法：标记-清除 (Mark-and-Sweep) 和 引用计数 (Reference Counting)。别怕，我会尽量说得通俗易懂，保证你听完能跟朋友吹牛逼。

一、引用计数 (Reference Counting)

这玩意儿简单粗暴，就像给每个对象贴个标签，记录有多少人“引用”它。每当有人引用它，标签上的数字就加一；没人引用了，就减一。如果标签上的数字变成零，那就说明这对象可以扔了，没人要了。

举个例子：

let obj1 = { name: "张三" }; // obj1 的引用计数为 1
let obj2 = obj1; // obj1 的引用计数变为 2 (obj2 也引用了它)

obj1 = null; // obj1 不再引用该对象，引用计数变为 1
obj2 = null; // obj2 也不再引用该对象，引用计数变为 0，该对象被回收

优点：

简单直接： 容易理解，实现起来也相对简单。
实时性高： 发现垃圾立马回收，不会等到内存不够了才动手。

缺点：

循环引用： 这是它的致命弱点。如果两个对象互相引用，即使它们已经没用了，它们的引用计数永远不会变成零，导致内存泄漏。
额外开销： 每次引用关系发生变化，都要更新引用计数，这会增加运行时的开销。

循环引用的例子：

function createCircularReference() {
  let obj1 = {};
  let obj2 = {};

  obj1.prop = obj2; // obj1 引用 obj2
  obj2.prop = obj1; // obj2 引用 obj1

  return { obj1, obj2 }; //返回两个对象，避免它们立即被回收
}

let {obj1, obj2} = createCircularReference();

// 即使我们不再使用 obj1 和 obj2，它们仍然互相引用，导致内存泄漏
// obj1和obj2现在变成了全局变量，如果没有手动设置null，即使函数结束，它们依然存在

obj1 = null;
obj2 = null; //手动解除引用

在这个例子中，obj1 和 obj2 互相引用，即使我们把 obj1 和 obj2 设置为 null，它们的引用计数仍然为 1，永远不会被回收。

表格总结：

特性	引用计数 (Reference Counting)
原理	记录对象被引用的次数
优点	简单、实时性高
缺点	循环引用、额外开销
是否常用	早期使用，现代引擎已放弃

由于循环引用的问题，现代 JavaScript 引擎 (比如 V8) 已经放弃了引用计数，转而使用更强大的标记-清除算法。

二、标记-清除 (Mark-and-Sweep)

标记-清除算法是一种更智能的 GC 算法，它不像引用计数那样死板，而是通过判断对象是否“可达”来决定是否回收。

工作流程：

标记 (Marking)： 从根对象 (root object) 开始，递归地遍历所有可达的对象，并给它们打上标记。根对象通常是全局对象 (比如 window 对象) 或者当前执行栈中的变量。
清除 (Sweeping)： 遍历整个堆内存，把没有标记的对象视为垃圾，回收它们的内存。

举个例子：

假设咱们的内存里有一堆对象，其中一些是可达的 (可以从根对象访问到)，另一些是不可达的 (无法从根对象访问到)。

  +-------+      +-------+      +-------+
  |  A    |----->|  B    |----->|  C    |
  +-------+      +-------+      +-------+
     ^                 ^
     |                 |
  +-------+      +-------+
  | Root  |----->|  D    |
  +-------+      +-------+
             +-------+
             |  E    |  <---孤立对象
             +-------+

在这个例子中：

A、B、C、D 是可达对象，因为它们可以从根对象 Root 访问到。
E 是不可达对象，因为它没有被任何对象引用，也无法从根对象访问到。

标记-清除算法会标记 A、B、C、D，然后清除 E。

解决了循环引用问题：

标记-清除算法可以解决循环引用的问题，因为它不依赖于引用计数。即使两个对象互相引用，只要它们无法从根对象访问到，就会被视为垃圾回收。

function createCircularReference() {
  let obj1 = {};
  let obj2 = {};

  obj1.prop = obj2;
  obj2.prop = obj1;

  return { obj1, obj2 };
}

let {obj1, obj2} = createCircularReference();

obj1 = null;
obj2 = null;

// 即使 obj1 和 obj2 互相引用，但它们已经无法从根对象访问到，会被标记为垃圾回收

在这个例子中，即使 obj1 和 obj2 互相引用，但当我们把 obj1 和 obj2 设置为 null 后，它们就无法从根对象访问到了，会被标记-清除算法识别为垃圾并回收。

优点：

解决了循环引用问题： 这是它最大的优势。
相对简单： 实现起来比一些更高级的 GC 算法要简单。

缺点：

暂停时间： 在标记和清除阶段，JavaScript 引擎需要暂停程序的执行，这会导致页面卡顿，影响用户体验。
内存碎片： 清除垃圾后，可能会留下一些不连续的内存空间，导致内存碎片。

表格总结：

特性	标记-清除 (Mark-and-Sweep)
原理	判断对象是否可达
优点	解决循环引用问题
缺点	暂停时间、内存碎片
是否常用	现代引擎主要使用

三、V8 引擎的优化：分代回收 (Generational Garbage Collection)

V8 引擎 (Chrome 和 Node.js 使用的 JavaScript 引擎) 在标记-清除算法的基础上进行了优化，引入了分代回收的概念。

核心思想：

大部分对象很快就会变成垃圾： 经验表明，大部分对象在创建后很快就会失去引用，变成垃圾。
把内存分成不同的代： V8 引擎把内存分成新生代 (young generation) 和老生代 (old generation)。
针对不同代采用不同的回收策略： 新生代空间较小，垃圾回收频率较高；老生代空间较大，垃圾回收频率较低。

工作流程：

新生代回收 (Minor GC)：
- 新生代主要存放新创建的对象。
- 采用 Scavenge 算法，将新生代分为两个区域：From 空间和 To 空间。
- 活动对象从 From 空间复制到 To 空间，然后 From 空间和 To 空间互换。
- 死亡对象直接清理。
- 回收速度非常快，暂停时间很短。
老生代回收 (Major GC)：
- 老生代主要存放存活时间较长的对象。
- 采用标记-清除 (Mark-and-Sweep) 和标记-整理 (Mark-and-Compact) 算法。
- 标记-整理算法会在清除垃圾后，将剩余的对象移动到一起，减少内存碎片。
- 回收速度较慢，暂停时间较长。

为什么要分代？

分代回收的思想是基于一个重要的观察： 大部分对象在内存中存活的时间很短。 把内存分成新生代和老生代，可以针对不同生命周期的对象采用不同的回收策略，从而提高垃圾回收的效率。

Scavenge 算法：

Scavenge 算法是新生代垃圾回收的核心算法，它的工作方式如下：

分配： 新对象首先被分配到 From 空间。
垃圾回收： 当 From 空间快满时，触发垃圾回收。
复制： 遍历 From 空间，将所有存活的对象复制到 To 空间。
交换： From 空间和 To 空间的角色互换。
清理： 原来的 From 空间中的所有对象都变成了垃圾，可以被直接清理掉。

Scavenge 算法的优点是速度非常快，因为只需要复制存活的对象，而不需要遍历整个堆内存。

例子：

function allocateAndRelease() {
  for (let i = 0; i < 10000; i++) {
    let obj = { data: new Array(100).fill(i) }; // 创建一个包含大量数据的对象
    // obj 在循环结束后会失去引用，变成垃圾，适合新生代回收
  }
}

allocateAndRelease();

function longLivedObject() {
  globalThis.longTermData = { data: new Array(1000).fill("long-lived") }; // 创建一个全局对象，存活时间较长，适合老生代回收
}

longLivedObject();

在这个例子中，allocateAndRelease 函数创建了大量的临时对象，这些对象在循环结束后会失去引用，变成垃圾，适合新生代回收。 longLivedObject 函数创建了一个全局对象，这个对象会一直存活到程序结束，适合老生代回收。

表格总结：

特性	新生代 (Young Generation)	老生代 (Old Generation)
对象生命周期	短	长
回收频率	高	低
回收算法	Scavenge	标记-清除、标记-整理
空间大小	小	大

四、如何避免内存泄漏？

了解了垃圾回收机制，咱们就能更好地避免内存泄漏，写出更健壮的代码。

一些常见的内存泄漏场景：

意外的全局变量： 在非严格模式下，如果给未声明的变量赋值，会自动创建全局变量。全局变量的生命周期很长，很容易导致内存泄漏。
闭包： 闭包可以访问外部函数的变量，如果闭包一直存在，会导致外部函数的变量无法被回收。
未清理的定时器和事件监听器： 如果不再需要使用定时器或事件监听器，一定要及时清理，否则它们会一直占用内存。
DOM 引用： 如果 JavaScript 对象持有 DOM 元素的引用，即使 DOM 元素从页面中移除，JavaScript 对象仍然会阻止它的回收。

一些避免内存泄漏的技巧：

使用严格模式： 严格模式会禁止意外的全局变量。
避免创建不必要的全局变量： 尽量使用局部变量。
小心使用闭包： 确保闭包在不再需要时被释放。
及时清理定时器和事件监听器： 使用 clearInterval 和 removeEventListener。
避免循环引用： 尽量打破循环引用关系。
使用 WeakMap 和 WeakSet： WeakMap 和 WeakSet 对对象的引用是弱引用，不会阻止对象的回收。

WeakMap 和 WeakSet：

WeakMap 和 WeakSet 是 ES6 引入的两种新的数据结构，它们对对象的引用是弱引用，这意味着如果一个对象只被 WeakMap 或 WeakSet 引用，那么这个对象仍然可以被垃圾回收。

WeakMap 的例子：

let map = new WeakMap();

let obj = { name: "张三" };

map.set(obj, "一些数据");

obj = null; // obj 不再被其他对象引用，可以被垃圾回收

// 即使 obj 被回收了，map 仍然存在，但它的键值对也会被自动删除

WeakSet 的例子：

let set = new WeakSet();

let obj = { name: "李四" };

set.add(obj);

obj = null; // obj 不再被其他对象引用，可以被垃圾回收

// 即使 obj 被回收了，set 仍然存在，但它的元素也会被自动删除

WeakMap 和 WeakSet 非常适合用于存储与对象相关联的元数据，而又不想阻止对象的回收。

使用 Chrome DevTools 调试内存泄漏：

Chrome DevTools 提供了强大的内存分析工具，可以帮助咱们检测和诊断内存泄漏问题。

打开 Chrome DevTools： 按 F12 或右键选择“检查”。
选择 "Memory" 面板： 在 DevTools 中选择 "Memory" 面板。
拍摄堆快照： 点击 "Take heap snapshot" 按钮，可以拍摄当前堆内存的快照。
比较快照： 拍摄多个快照，比较它们之间的差异，可以找到内存泄漏的对象。
使用 Allocation instrumentation on timeline： 这个工具可以记录内存分配的详细信息，帮助咱们找到内存泄漏的根源。

例子：

假设咱们有一个简单的程序，它会创建一个大的数组，但不释放它。

function createLargeArray() {
  let arr = new Array(1000000).fill(1); // 创建一个包含 100 万个元素的数组
  // arr 没有被释放，导致内存泄漏
}

createLargeArray();

使用 Chrome DevTools 可以很容易地找到这个内存泄漏：

打开 DevTools，选择 "Memory" 面板。
拍摄一个堆快照。
运行 createLargeArray 函数。
再次拍摄一个堆快照。
比较两个快照，可以看到一个很大的数组被分配了，但没有被释放。

五、总结

今天咱们聊了 JavaScript 垃圾回收机制的两种经典算法：引用计数和标记-清除，以及 V8 引擎的分代回收优化。掌握这些知识，可以帮助咱们写出更高效、更健壮的代码，避免内存泄漏，让程序跑得更快更稳。

记住，垃圾回收器虽然能自动清理垃圾，但它不是万能的。咱们作为程序员，也要养成良好的编码习惯，主动避免内存泄漏，才能让程序更健康。

希望今天的分享对你有所帮助，谢谢大家！下课！

一、引用计数 (Reference Counting)

二、标记-清除 (Mark-and-Sweep)

三、V8 引擎的优化：分代回收 (Generational Garbage Collection)

四、如何避免内存泄漏？

五、总结

发表回复 取消回复

发表回复取消回复