浏览器垃圾回收机制：V8引擎的“清道夫”是怎样工作的？

浏览器垃圾回收机制：V8引擎的"清道夫"是怎样工作的？

💡 引言：内存管理，浏览器里的"家务活"

想象一下，你的浏览器就像一个繁忙的办公室，各种各样的任务（网页、脚本、图片）都在这里有条不紊地进行着。每个任务都需要占用一定的"办公空间"（内存）。如果这些任务用完空间后不及时清理，或者有些任务偷偷摸摸地占着空间不放，那这个办公室很快就会变得一团糟，甚至瘫痪。这就是我们常说的"内存泄漏"和"内存溢出"！

为了让浏览器这个"办公室"高效运转，不至于被各种"垃圾"堆满，就需要一个勤劳的"清道夫"------垃圾回收机制（Garbage Collection，简称GC）。今天，我们就来深入了解一下Chrome V8引擎这位"清道夫"是如何工作的，特别是它那套"分代式垃圾回收"的独门秘籍。

🧹 V8垃圾回收机制：分代式GC的秘密

V8引擎为了更高效地进行垃圾回收，采用了"分代式垃圾回收"策略。简单来说，就是把内存中的对象按照"年龄"和"活跃度"分成不同的区域进行管理。就像我们生活中，新买的、经常用的东西放在随手可取的地方，不常用的、旧的东西则会收纳起来，定期清理。

V8将内存（堆）主要分为两大部分：新生代（New Space）和老生代（Old Space）。新生代存放的是那些"年轻"的对象，它们的生命周期通常比较短；老生代则存放那些"年老"的对象，它们经过多次垃圾回收依然"健在"。针对不同"年龄"的对象，V8采用了不同的垃圾回收算法，以达到最佳的回收效率。

👶 新生代算法：Scavenge的"小打小闹"

新生代中的对象，就像我们日常生活中那些"快消品"------零食、饮料、一次性用品，它们的生命周期通常很短，很快就会被创建，也很快就会被"消耗"掉。V8针对新生代采用了Scavenge算法，这是一种典型的"复制算法"。

生活中的例子：想象一下，你家里的零食柜。你刚买回来的零食（新创建的对象）都放在一个区域（From空间）。当你需要吃零食的时候，你会从这个区域拿。吃完后，有些零食的包装袋（不再活跃的对象）就直接扔掉了。而那些你还没吃完，或者你觉得很好吃还想留着的零食（活跃对象），你会把它们从"From空间"拿出来，放到另一个干净的区域（To空间）。当"From空间"的零食被拿得差不多了，或者你觉得太乱了，你就会把"From空间"清空，然后把"From空间"和"To空间"的角色互换，这样"To空间"就变成了新的"From空间"，等待新的零食进入。这个过程就是Scavenge算法的精髓！

工作原理：

新生代空间被划分为两个等大的区域：From空间（From-space）和To空间（To-space）。在任意时刻，只有一个空间处于使用状态，另一个空间是空闲的。新分配的对象会被放入From空间。当From空间被占满时，Scavenge算法就会启动：

1. 标记活跃对象：算法会检查From空间中仍然"存活"的对象（即还有引用指向它们的对象）。
2. 复制活跃对象：将这些活跃对象复制到To空间中，并且在复制过程中，会按照内存地址的顺序进行排列，避免内存碎片。
3. 清理From空间：复制完成后，From空间中所有未被复制的对象（即"垃圾"）都会被销毁。
4. 角色互换：From空间和To空间的角色会进行互换，原来的To空间变成新的From空间，等待下一次对象分配。

通过这种复制的方式，Scavenge算法能够高效地清理新生代中的垃圾，并且由于只复制活跃对象，所以对于存活对象较少的新生代来说，效率非常高。同时，复制过程也起到了内存整理的作用，避免了内存碎片。

代码解释：

虽然我们无法直接在JavaScript代码中操作V8的内存分配，但我们可以通过一些简单的代码来理解对象在新生代中的"生命周期"：

function createTemporaryObject() {
  let obj = { name: '临时对象', value: Math.random() };
  // 这个对象在函数执行完毕后，如果没有被外部引用，就可能被新生代回收
  return obj;
}

let temp1 = createTemporaryObject(); // obj1可能在新生代
let temp2 = createTemporaryObject(); // obj2可能在新生代

// 如果temp1和temp2没有被其他地方引用，它们很快就会被回收
// 如果它们被老生代的对象引用，则可能晋升到老生代

function longLivedObject() {
  let arr = [];
  for (let i = 0; i < 10000; i++) {
    arr.push({ id: i, data: 'some data' });
  }
  return arr; // 这个对象可能会很快晋升到老生代
}

let longLived = longLivedObject();

新生代中的对象，如果经历过一次Scavenge算法后依然存活，并且To空间的对象占比超过25%（为了不影响内存分配），它们就会被"晋升"到老生代。这就像那些你觉得特别好吃、想长期保存的零食，它们会被你从零食柜（新生代）转移到储藏室（老生代），进行更长期的保存。

👴 老生代算法：标记清除与标记压缩的"大扫除"

老生代中的对象，就像你家里的那些大件家具、珍贵收藏品，它们不会经常变动，但偶尔也需要进行一次彻底的"大扫除"和"整理"。由于老生代的对象数量多，存活时间长，如果还用Scavenge那种复制算法，效率就会很低，因为复制大量对象会非常耗时。因此，V8为老生代配备了两种更适合的算法：标记清除（Mark-Sweep）和标记压缩（Mark-Compact）。

生活中的例子：想象一下，你家里的客厅，家具摆放了很久。你不会每天都把所有家具搬出来重新摆放（Scavenge不适用）。但是，每隔一段时间，你可能会进行一次大扫除：首先，你会在所有你觉得"有用"的家具上贴上标签（标记）。然后，把那些没有贴标签的"垃圾"（比如旧报纸、废弃的包装盒）都扔掉（清除）。最后，为了让客厅看起来更整洁，你可能会把剩下的家具重新归置一下，把它们都靠拢，腾出更大的空间（压缩）。这就是老生代算法的形象比喻！

对象进入老生代的条件：

对象从新生代"晋升"到老生代，通常满足以下条件：

• "久经考验"：新生代中的对象，如果已经经历过一次Scavenge算法（也就是在新生代中"存活"了一轮），那么它就会被认为是"生命力顽强"的对象，有资格晋升到老生代。
• "空间告急"：在新生代中，如果To空间的对象占比过大（通常超过25%），为了不影响内存分配效率，新生代中的活跃对象也会被直接晋升到老生代。

老生代空间构成：

老生代不像新生代那样简单地分为From和To空间，它的内部结构更为复杂，包含多个不同的空间，用于存放不同类型的对象：

enum AllocationSpace {
  // TODO(v8:7464): Actually map this space\'s memory as read-only.
  RO_SPACE, // 不变的对象空间，例如代码的常量池

  NEW_SPACE, // 新生代用于GC复制算法的空间
  OLD_SPACE, // 老生代常驻对象空间，存放大部分老生代对象
  CODE_SPACE, // 老生代代码对象空间，存放可执行代码
  MAP_SPACE, // 老生代 map 对象空间，存放对象的隐藏类（Hidden Class）
  LO_SPACE, // 老生代大对象空间，存放占用内存较大的对象

  NEW_LO_SPACE, // 新生代大对象空间，用于新生代中过大的对象

  FIRST_SPACE = RO_SPACE,
  LAST_SPACE = NEW_LO_SPACE,

  FIRST_GROWABLE_PAGED_SPACE = OLD_SPACE,
  LAST_GROWABLE_PAGED_SPACE = MAP_SPACE
};

这些空间各自承担着不同的职责，V8会根据对象的特性将其分配到合适的空间中，从而实现更精细化的内存管理。

标记清除算法（Mark-Sweep）：

标记清除算法是老生代中最常用的垃圾回收算法。它分为"标记"和"清除"两个阶段。

触发条件：

在老生代中，以下情况会触发标记清除算法的启动：

• 某个空间没有分块的时候：当某个老生代空间没有足够的连续内存来分配新的对象时。
• 空间中对象超过一定限制：当老生代中某个空间的对象数量或大小达到预设的阈值时。
• 空间不能保证新生代中的对象移动到老生代中：当新生代需要晋升对象到老生代，但老生代没有足够的空间接收时。

工作原理：

1. 标记阶段：垃圾回收器会从一组"根对象"（Root Objects，例如全局变量、函数栈中的变量等）开始，遍历所有从根对象可达的对象。所有可达的对象都会被标记为"活跃"对象。这个过程就像你在客厅里给所有"有用"的家具贴上标签。
2. 清除阶段：遍历整个堆，将所有没有被标记的对象（即"垃圾"）进行回收，释放它们所占用的内存空间。这个过程就像你把所有没有贴标签的"垃圾"都扔掉。

性能优化：

早期的标记清除算法会有一个显著的问题，那就是在执行垃圾回收时，JavaScript的执行会被暂停，这被称为"全停顿（Stop-the-world）"。想象一下，你正在看电影，突然画面卡住了，然后告诉你正在清理垃圾，这体验肯定不好。对于大型应用来说，标记阶段可能需要几百毫秒甚至更长的时间，这会导致明显的卡顿。

为了解决这个问题，V8引擎不断进行优化：

• 2011年，增量标记（Incremental Marking）：V8将标记过程分解为多个小步骤，每次只标记一部分对象，然后将控制权交还给JavaScript主线程。这样，垃圾回收和JavaScript执行可以交替进行，减少了单次停顿的时间，提高了用户体验。这就像把一次大扫除分成多次小扫除，每次只清理一小部分，不至于让你的电影卡顿太久。
• 2018年，并发标记（Concurrent Marking）：这是V8在垃圾回收方面的一个重大突破。并发标记允许垃圾回收器在单独的线程中与JavaScript主线程同时进行标记操作。这意味着在标记阶段，JavaScript可以几乎不受影响地继续执行，只有在少数关键时刻才需要短暂的停顿。这就像你一边看电影，一边有专门的清洁工在旁边默默地帮你清理垃圾，你几乎感觉不到它的存在。

标记压缩算法（Mark-Compact）：

标记清除算法虽然解决了内存回收的问题，但它会产生大量的内存碎片。当内存中散落着许多不连续的小块空闲内存时，即使总的空闲内存足够，也可能无法分配一个大的连续内存块，从而导致新的内存分配失败。为了解决内存碎片问题，V8引入了标记压缩算法。

工作原理：

标记压缩算法通常在标记清除之后执行，或者当内存碎片达到一定程度时触发。它在标记阶段与标记清除相同，但清除阶段有所不同：

1. 标记阶段：同标记清除，标记所有活跃对象。
2. 压缩阶段：在清除未标记对象的同时，将所有活跃对象向内存的一端移动，然后直接清理掉边界之外的所有内存。这个过程就像你把客厅里所有有用的家具都推到一边，然后把剩下的空间全部清空，这样就得到了一个大的连续空闲区域。

通过标记压缩，V8能够有效地消除内存碎片，为后续的大对象分配提供连续的内存空间，从而提高内存的利用率和分配效率。

⚠️ 内存泄漏：那些年我们不小心留下的"烂摊子"

了解了V8的垃圾回收机制，我们知道它很努力地在帮我们清理内存。但是，有些时候，我们程序员会不小心"帮倒忙"，导致一些本该被回收的内存，却一直被"霸占"着，无法被垃圾回收器清理。这就造成了内存泄漏（Memory Leak）。

生活中的例子：想象一下，你家里堆积的旧物，你以为没用就扔在一边，结果越堆越多，占满了空间，最后连走路的地方都没有了。这些"旧物"就是内存泄漏，它们本该被扔掉，却因为各种原因被你"留"了下来。

内存泄漏会导致应用程序的性能下降，甚至崩溃。下面我们来看看几种常见的内存泄漏场景，以及如何避免它们：

1. 意外的全局变量

在JavaScript中，如果你在函数内部定义变量时没有使用var、let或const关键字，那么这个变量就会自动成为全局对象（在浏览器中是window对象）的属性。全局变量的生命周期直到页面关闭才会结束，如果创建了大量的意外全局变量，就会导致内存泄漏。

代码示例：

function accidentalGlobal() {
  // 这里的'data'没有使用var、let或const声明，它会成为全局变量
  data = '这是一段不小心泄露到全局的数据'; 
}

accidentalGlobal();

// 此时，data可以在全局访问到，并且不会被垃圾回收
console.log(window.data); 

如何避免：

始终使用var、let或const来声明变量，确保变量的作用域在预期范围内。

function correctDeclaration() {
  const data = '这是一段不会泄露的数据'; 
  console.log(data);
}

correctDeclaration();
// console.log(window.data); // ReferenceError: data is not defined

2. 未取消的定时器

setInterval和setTimeout是JavaScript中常用的定时器函数。如果我们在使用setInterval时，忘记在不需要的时候清除它，那么回调函数中引用的变量就会一直存在于内存中，即使DOM元素已经被移除，定时器仍然会继续执行，导致内存泄漏。

代码示例：

let count = 0;
let element = document.getElementById('myButton');

setInterval(function() {
  // 这里的匿名函数形成了闭包，引用了外部的count和element
  // 如果element被移除，但定时器未清除，element及其相关内存仍会被保留
  if (element) {
    element.textContent = count++;
  }
}, 1000);

// 假设某个时候，myButton元素被从DOM中移除了
// document.body.removeChild(element);
// 但定时器仍然在运行，导致内存泄漏

如何避免：

在使用定时器时，务必在不再需要时使用clearInterval或clearTimeout来清除它们。

let count = 0;
let element = document.getElementById('myButton');
let timerId;

if (element) {
  timerId = setInterval(function() {
    element.textContent = count++;
  }, 1000);
}

// 当不再需要时，清除定时器
// 例如，在组件卸载时或者特定事件发生时
function stopTimer() {
  clearInterval(timerId);
  element = null; // 解除对DOM元素的引用
}

// 假设在某个事件触发时调用stopTimer
// setTimeout(stopTimer, 5000); // 5秒后停止定时器

3. DOM引用未释放

当我们将DOM元素的引用存储在JavaScript变量中，但随后该DOM元素被从文档中移除时，如果JavaScript变量仍然持有对该元素的引用，那么该元素及其子元素所占用的内存将无法被垃圾回收。这就像你把一个旧家具扔出了房间，但你手里还拿着它的照片，导致你总觉得它还在家里占着地方。

代码示例：

let detachedElement = document.getElementById('myDiv');

// 假设在某个操作后，myDiv被从DOM中移除了
// detachedElement.parentNode.removeChild(detachedElement);

// 此时，虽然myDiv不在DOM树中，但detachedElement变量仍然引用着它
// 导致myDiv及其子元素无法被垃圾回收
console.log(detachedElement); // 仍然可以访问到这个元素

如何避免：

当DOM元素不再需要时，及时将JavaScript变量对它的引用设置为null。

let detachedElement = document.getElementById('myDiv');

// 移除DOM元素
if (detachedElement && detachedElement.parentNode) {
  detachedElement.parentNode.removeChild(detachedElement);
}

// 解除引用，允许垃圾回收
detachedElement = null;

4. 不合理的闭包

闭包是JavaScript中一个强大而常用的特性，它允许函数访问并操作其外部作用域的变量。然而，如果闭包不当地引用了外部作用域中不再需要的变量，就可能导致内存泄漏。这就像你打包行李，把一些没用的东西也一起打包了，导致行李箱越来越重。

代码示例：

function outer() {
  let largeData = new Array(1000000).join('x'); // 一个很大的字符串
  let element = document.getElementById('myElement');

  function inner() {
    // inner函数形成了闭包，引用了largeData和element
    console.log(largeData.length);
    console.log(element.id);
  }

  return inner;
}

let doSomething = outer();
// 即使outer函数执行完毕，largeData和element仍然被doSomething（inner函数）引用着
// 导致它们无法被垃圾回收

// doSomething = null; // 只有当doSomething被设置为null时，largeData和element才可能被回收

如何避免：

谨慎使用闭包，确保闭包只引用其真正需要的变量。在不再需要时，及时解除对闭包的引用。

function outerOptimized() {
  let largeData = null; // 初始时不创建大对象
  let element = document.getElementById('myElement');

  function inner(data) {
    // inner函数只通过参数接收需要的数据
    console.log(data.length);
    console.log(element.id);
  }

  // 在需要时才创建大对象，并传递给inner
  const tempLargeData = new Array(1000000).join('x');
  return function() { inner(tempLargeData); };
}

let doSomethingOptimized = outerOptimized();
// 当doSomethingOptimized不再被引用时，tempLargeData和element才可能被回收

// 或者，如果inner函数不需要一直持有对largeData的引用，可以在使用后解除
function outerBetter() {
  let largeData = new Array(1000000).join('x');
  let element = document.getElementById('myElement');

  return function() {
    console.log(largeData.length);
    console.log(element.id);
    // 如果largeData只在这里使用一次，可以考虑在用完后设置为null
    // largeData = null; // 但这会影响后续调用，需谨慎
  };
}

let doSomethingBetter = outerBetter();
// doSomethingBetter = null; // 及时解除对闭包的引用

内存泄漏是一个常见但容易被忽视的问题。作为开发者，我们需要时刻关注内存的使用情况，并养成良好的编程习惯，避免不必要的内存占用。

✨ 总结：做个"内存管理大师"

通过今天的讲解，相信你对浏览器V8引擎的垃圾回收机制有了更深入的了解。从新生代的Scavenge算法，到老生代的标记清除和标记压缩算法，V8引擎都在不遗余力地为我们管理内存，确保浏览器的流畅运行。同时，我们也认识到了内存泄漏的危害，以及如何通过规范的编程习惯来避免这些"内存杀手"。

作为一名前端开发者，理解并掌握这些内存管理知识至关重要。它不仅能帮助我们写出更健壮、性能更好的代码，还能在遇到性能问题时，更快地定位和解决问题。让我们一起努力，做个"内存管理大师"，让我们的浏览器始终保持最佳状态！

📚 参考文献

• 1\] 深入理解Chrome V8垃圾回收机制. GitHub. [github.com/yacan8/blog...](https://link.juejin.cn?target=https%3A%2F%2Fgithub.com%2Fyacan8%2Fblog%2Fissues%2F33 "https://github.com/yacan8/blog/issues/33")

• 3\] JavaScript 垃圾回收. lizhen's blog. [lz5z.com/JavaScript-...](https://link.juejin.cn?target=https%3A%2F%2Flz5z.com%2FJavaScript-Garbage-Collection%2F "https://lz5z.com/JavaScript-Garbage-Collection/")

在你的开发生涯中，有没有遇到过让你头疼的内存泄漏问题？你是如何发现并解决它们的？欢迎在评论区分享你的经验和故事，我们一起交流学习！