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

痛定思痛。 2022-10-25 14:05 192阅读 0赞

![format_png][]

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

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

1.  浏览器怎么进行垃圾回收？
2.  浏览器中不同类型变量的内存都是何时释放？
3.  哪些情况会导致内存泄露？如何避免？
4.  `weakMap` `weakSet` 和 `Map` `Set` 有什么区别？

ok, let's go！

# 什么是垃圾数据? #

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

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

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

## 变量的生命周期 ##

比如这么一段代码：

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

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

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

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

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

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

此时的内存布局图：![format_png 2][]

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

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

# 垃圾回收算法 #

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

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

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

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

*  从根节点（Root）出发，遍历所有的对象。
 *  可以遍历到的对象，是可达的（reachable）。
 *  没有被遍历到的对象，不可达的（unreachable）。

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

*  全局变量 `window`，位于每个 `iframe` 中
 *  文档 `DOM` 树
 *  存放在栈上的变量
 *  ...

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

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

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

## 第三步，做内存整理。 ##

*  在频繁回收对象后，内存中就会存在大量不连续空间，专业名词叫「内存碎片」。
 *  当内存中出现了大量的内存碎片，如果需要分配较大的连续内存时，就有可能出现内存不足的情况。
 *  所以最后一步是整理内存碎片。(但这步其实是可选的，因为有的垃圾回收器不会产生内存碎片，比如接下来我们要介绍的副垃圾回收器。)

# 什么时候垃圾回收？ #

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

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

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

## 分代收集 ##

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

*  临时对象：
 *   *  大部分对象在内存中存活的时间很短。
     *  比如函数内部声明的变量，或者块级作用域中的变量。当函数或者代码块执行结束时，作用域中定义的变量就会被销毁。
     *  这类对象很快就变得不可访问，应该快点回收。
 *  长久对象：
 *   *  生命周期很长的对象，比如全局的 `window、DOM、Web API` 等等。
     *  这类对象可以慢点回收。

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

并且让副垃圾回收器、主垃圾回收器，分别负责新生代、老生代的垃圾回收。

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

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

### 主垃圾回收器 ###

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

1.  对象占用空间大。
2.  对象存活时间长。

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

1.  首先是标记。

*  从一组根元素开始，递归遍历这组根元素。
 *  在这个遍历过程中，能到达的元素称为活动对象，没有到达的元素就可以判断为垃圾数据。

*  然后是垃圾清除。![format_png 3][]直接将标记为垃圾的数据清理掉。
 *  多次标记-清除后，会产生大量不连续的内存碎片，需要进行内存整理。![format_png 4][]
 *  ### 副垃圾回收器 ###
    
    负责新生代的垃圾回收，通常只支持 1~8 M 的容量。
    
    新生代被分为两个区域：一般是对象区域，一半是空闲区域。![format_png 5][]新加入的对象都被放入对象区域，等对象区域快满的时候，会执行一次垃圾清理。
    
    1.  先给对象区域所有垃圾做标记。
    2.  标记完成后，存活的对象被复制到空闲区域，并且将他们有序的排列一遍。![format_png 6][]这就回到我们前面留下的问题 -- 副垃圾回收器没有碎片整理。因为空闲区域里此时是有序的，没有碎片，也就不需要整理了。
    3.  复制完成后，对象区域会和空闲区域进行对调。将空闲区域中存活的对象放入对象区域里。![format_png 7][]这样，就完成了垃圾回收。
    
    因为副垃圾回收器操作比较频繁，所以为了执行效率，一般新生区的空间会被设置得比较小。
    
    一旦检测到空间装满了，就执行垃圾回收。
    
    ### 分代收集 ###
    
    一句话总结分代回收就是：将堆分为新生代与老生代，多回收新生代，少回收老生代。
    
    这样就减少了每次需遍历的对象，从而减少每次垃圾回收的耗时。![format_png 8][]
    
    ## 增量收集 ##
    
    如果脚本中有许多对象，引擎一次性遍历整个对象，会造成一个长时间暂停。
    
    所以引擎将垃圾收集工作分成更小的块，每次处理一部分，多次处理。
    
    这样就解决了长时间停顿的问题。![format_png 9][]
    
    ## 闲时收集 ##
    
    垃圾收集器只会在 CPU 空闲时尝试运行，以减少可能对代码执行的影响。
    
    # 面试题1：浏览器怎么进行垃圾回收？ #
    
    从三个点来回答什么是垃圾、如何捡垃圾、什么时候捡垃圾。
    
    1.  什么是垃圾
    
     *  不再需要，即为垃圾
     *  全局变量随时可能用到，所以一定不是垃圾
 *  如何捡垃圾（遍历算法）
 *   *  标记空间中「可达」值。
        
            - 从根节点（Root）出发，遍历所有的对象。
            - 可以遍历到的对象，是可达的（reachable）。
            - 没有被遍历到的对象，不可达的（unreachable）
     *  回收「不可达」的值所占据的内存。
     *  做内存整理。
 *  什么时候捡垃圾
 *   *  前端有其特殊性，垃圾回收的时候会造成页面卡顿。
     *  分代收集、增量收集、闲时收集。
    
    # 面试题2：浏览器中不同类型变量的内存都是何时释放？ #
    
    Javascritp 中类型：值类型，引用类型。
    
     *  引用类型
     *   *  在没有引用之后，通过 V8 自动回收。
     *  值类型
     *   *  如果处于闭包的情况下，要等闭包没有引用才会被 V8 回收。
         *  非闭包的情况下，等待 V8 的新生代切换的时候回收。
    
    # 面试题3：哪些情况会导致内存泄露？如何避免？ #
    
    > 内存泄露是指你「用不到」（访问不到）的变量，依然占居着内存空间，不能被再次利用起来。
    
    以 Vue 为例，通常有这些情况：
    
     *  监听在 `window/body` 等事件没有解绑
     *  绑在 `EventBus` 的事件没有解绑
     *  `Vuex` 的 `$store`，`watch` 了之后没有 `unwatch`
     *  使用第三方库创建，没有调用正确的销毁函数
    
    解决办法：`beforeDestroy` 中及时销毁
    
     *  绑定了 `DOM/BOM` 对象中的事件 `addEventListener` ，`removeEventListener`。
     *  观察者模式 `$on`，`$off`处理。
     *  如果组件中使用了定时器，应销毁处理。
     *  如果在 `mounted/created` 钩子中使用了第三方库初始化，对应的销毁。
     *  使用弱引用 `weakMap`、`weakSet`。
    
    ## 闭包会导致内存泄露吗？ ##
    
    顺便说一个我在了解垃圾回收之前对闭包的误解。
    
    闭包会导致内存泄露吗？正确的答案是不会。
    
    内存泄露是指你「用不到」（访问不到）的变量，依然占居着内存空间，不能被再次利用起来。
    
    闭包里面的变量就是我们需要的变量，不能说是内存泄露。
    
    > 这个误解是如何来的？因为 IE。IE 有 bug，IE 在我们使用完闭包之后，依然回收不了闭包里面引用的变量。这是 IE 的问题，不是闭包的问题。参考这篇文章
    
    # 面试题4：`weakMap` `weakSet` 和 `Map` `Set` 有什么区别？ #
    
    在 ES6 中为我们新增了两个数据结构 WeakMap、WeakSet，就是为了解决内存泄漏的问题。
    
    它的键名所引用的对象都是弱引用，就是垃圾回收机制遍历的时候不考虑该引用。
    
    只要所引用的对象的其他引用都被清除，垃圾回收机制就会释放该对象所占用的内存。
    
    也就是说，一旦不再需要，WeakMap 里面的键名对象和所对应的键值对会自动消失，不用手动删除引用。
    
    更全面的介绍可以看这里：第 4 题：介绍下 Set、Map、WeakSet 和 WeakMap 的区别
    
    # 总结 #
    
    现在我们简单了解了浏览器的垃圾回收机制，还记得最初的 4 个问题吗？
    
    1.  浏览器怎么进行垃圾回收？
    
    答题思路：什么是垃圾、怎么收垃圾、什么时候收垃圾。
    
    1.  浏览器中不同类型变量的内存都是何时释放？
    
    答题思路：分为值类型、引用类型。
    
    1.  哪些情况会导致内存泄露？如何避免？
    
    答题思路：内存泄露是指你「用不到」（访问不到）的变量，依然占居着内存空间，不能被再次利用起来。
    
    1.  `weakMap` `weakSet` 和 `Map` `Set` 有什么区别？
    
    答题思路：`WeakMap`、`WeakSet` 弱引用，解决了内存泄露问题。
    
    源自：https://juejin.im/post/6861967094318284814

[format_png]: /images/20221024/4d6c6201c455427e82cbe359f52d060e.png
[format_png 1]: /images/20221024/4f360d0d6d4a4bbda2eeb5c49a114479.png
[format_png 2]: /images/20221024/22b020460edc488480308dd96422b13d.png
[format_png 3]: /images/20221024/d51cd05b66064decb0ee6946521e20f6.png
[format_png 4]: /images/20221024/e16f0705f6c848228917beb6907f144f.png
[format_png 5]: /images/20221024/6b47660eee7b4b40bfae86fbbdd5173f.png
[format_png 6]: /images/20221024/a3a01223d78a460886ee7a9999fb171f.png
[format_png 7]: /images/20221024/28b9b35f03db4ad79d134c8bd3b1a35a.png
[format_png 8]: /images/20221024/41da689f9a0748dca74aca5ecd83bc74.png
[format_png 9]: /images/20221024/cd9c5f9d7753460080b66c2aa12b1dfd.png