从 4 个面试题了解“浏览器的垃圾回收”

浏览器垃圾回收一直是前端面试常考的部分，我一直不太理解。最近深入学习了一下，争取一篇文章说清楚。

我们首先带着这 4 个问题，来了解浏览器垃圾回收的过程，后面会逐一解答：

浏览器怎么进行垃圾回收？

浏览器中不同类型变量的内存都是何时释放？

哪些情况会导致内存泄露？如何避免？

weakMapweakSet和MapSet有什么区别？

ok, let's go！

什么是垃圾数据?

生活中你买了一瓶可乐，喝完之后可乐瓶就变成了垃圾，应该被回收处理。

同样地，我们在写 js 代码的时候，会频繁地操作数据。

在一些数据不被需要的时候，它就是垃圾数据，垃圾数据占用的内存就应该被回收。

变量的生命周期

比如这么一段代码：

let dog = new Object()let dog.a = new Array(1)

当 JavaScript 执行这段代码的时候，

会先在全局作用域中添加一个dog属性，并在堆中创建了一个空对象，将该对象的地址指向了dog。

随后又创建一个大小为 1 的数组，并将属性地址指向了dog.a。此时的内存布局图如下所示:

如果此时，我将另外一个对象赋给了a属性，代码如下所示:

dog.a = new Object()复制代码

此时的内存布局图：

a的指向改变了， 此时堆中的数组对象就成为了不被使用的数据，专业名词叫「不可达」的数据。

这就是需要回收的垃圾数据。

垃圾回收算法

可以将这个过程想象成从根溢出一个巨大的油漆桶，它从一个根节点出发将可到达的对象标记染色， 然后移除未标记的。

第一步：标记空间中「可达」值。

V8 采用的是可达性 (reachability) 算法来判断堆中的对象应不应该被回收。

这个算法的思路是这样的：

在浏览器环境下，根节点有很多，主要包括这几种：

这些根节点不是垃圾，不可能被回收。

第二步：回收「不可达」的值所占据的内存。

在所有的标记完成之后，统一清理内存中所有不可达的对象。

第三步，做内存整理。什么时候垃圾回收？

浏览器进行垃圾回收的时候，会暂停 JavaScript 脚本，等垃圾回收完毕再继续执行。

对于普通应用这样没什么问题这个浏览器是个垃圾中的垃圾，但对于 JS 游戏、动画对连贯性要求比较高的应用，如果暂停时间很长就会造成页面卡顿。

这就是我们接下来谈的关于垃圾回收的问题：什么时候进行垃圾回收，可以避免长时间暂停。

分代收集

浏览器将数据分为两种，一种是「临时」对象，一种是「长久」对象。

长久对象：

这两种对象对应不同的回收策略，所以，V8 把堆分为新生代和老生代两个区域， 新生代中存放临时对象，老生代中存放持久对象。

并且让副垃圾回收器、主垃圾回收器这个浏览器是个垃圾中的垃圾，分别负责新生代、老生代的垃圾回收。

这样就可以实现高效的垃圾回收啦。

一般来说，面试回答到这就够了。如果想和面试官深入交流，可以继续聊聊两个垃圾回收器。

主垃圾回收器

负责老生代的垃圾回收，有两个特点：

对象占用空间大。

对象存活时间长。

它使用「标记-清除」的算法执行垃圾回收。

首先是标记。

然后是垃圾清除。

直接将标记为垃圾的数据清理掉。

多次标记-清除后，会产生大量不连续的内存碎片，需要进行内存整理。

副垃圾回收器

负责新生代的垃圾回收，通常只支持 1~8 M 的容量。

新生代被分为两个区域：一般是对象区域，一半是空闲区域。

新加入的对象都被放入对象区域，等对象区域快满的时候，会执行一次垃圾清理。

先给对象区域所有垃圾做标记。

标记完成后，存活的对象被复制到空闲区域，并且将他们有序的排列一遍。

这就回到我们前面留下的问题 -- 副垃圾回收器没有碎片整理。因为空闲区域里此时是有序的，没有碎片，也就不需要整理了。

复制完成后，对象区域会和空闲区域进行对调。将空闲区域中存活的对象放入对象区域里。

这样，就完成了垃圾回收。

因为副垃圾回收器操作比较频繁，所以为了执行效率，一般新生区的空间会被设置得比较小。

一旦检测到空间装满了，就执行垃圾回收。

分代收集

一句话总结分代回收就是：将堆分为新生代与老生代，多回收新生代，少回收老生代。

这样就减少了每次需遍历的对象，从而减少每次垃圾回收的耗时。

增量收集

如果脚本中有许多对象，引擎一次性遍历整个对象，会造成一个长时间暂停。

所以引擎将垃圾收集工作分成更小的块，每次处理一部分，多次处理。

这样就解决了长时间停顿的问题。

闲时收集

垃圾收集器只会在 CPU 空闲时尝试运行，以减少可能对代码执行的影响。

面试题1：浏览器怎么进行垃圾回收？

从三个点来回答什么是垃圾、如何捡垃圾、什么时候捡垃圾。

什么是垃圾

如何捡垃圾（遍历算法）

什么时候捡垃圾

面试题2：浏览器中不同类型变量的内存都是何时释放？

Javascritp 中类型：值类型，引用类型。

值类型

面试题3：哪些情况会导致内存泄露？如何避免？

内存泄露是指你「用不到」（访问不到）的变量，依然占居着内存空间，不能被再次利用起来。

以 Vue 为例，通常有这些情况：

解决办法：beforeDestroy中及时销毁

闭包会导致内存泄露吗？

顺便说一个我在了解垃圾回收之前对闭包的误解。

闭包会导致内存泄露吗？正确的答案是不会。

内存泄露是指你「用不到」（访问不到）的变量，依然占居着内存空间，不能被再次利用起来。

闭包里面的变量就是我们需要的变量，不能说是内存泄露。

这个误解是如何来的？因为 IE。IE 有 bug，IE 在我们使用完闭包之后，依然回收不了闭包里面引用的变量。这是 IE 的问题，不是闭包的问题。参考这篇文章

面试题4：weakMapweakSet和MapSet有什么区别？

在 ES6 中为我们新增了两个数据结构 WeakMap、WeakSet，就是为了解决内存泄漏的问题。

它的键名所引用的对象都是弱引用，就是垃圾回收机制遍历的时候不考虑该引用。

只要所引用的对象的其他引用都被清除，垃圾回收机制就会释放该对象所占用的内存。

也就是说，一旦不再需要，WeakMap 里面的键名对象和所对应的键值对会自动消失，不用手动删除引用。

更全面的介绍可以看这里：第 4 题：介绍下 Set、Map、WeakSet 和 WeakMap 的区别

总结

现在我们简单了解了浏览器的垃圾回收机制，还记得最初的 4 个问题吗？

浏览器怎么进行垃圾回收？

答题思路：什么是垃圾、怎么收垃圾、什么时候收垃圾。

浏览器中不同类型变量的内存都是何时释放？

答题思路：分为值类型、引用类型。

哪些情况会导致内存泄露？如何避免？

答题思路：内存泄露是指你「用不到」（访问不到）的变量，依然占居着内存空间，不能被再次利用起来。

weakMapweakSet和MapSet有什么区别？

答题思路：WeakMap、WeakSet弱引用，解决了内存泄露问题。