浏览器的GC垃圾回收机制

前言

Hello，大家好。相信“浏览器的F12调试工具”对于前端开发者来说并不陌生，是在F12工具里面，日常所用到的仅仅是Element、Console、Network等几个。

前端开发的战场都大部分在浏览器上。了解浏览器，不仅仅会对前端日常开发有帮助，而且面对各类关于底层的面试也会得心应手。

但是在目前市场上，关于浏览器的体系专题少之又少，接下来，我会持续更新系列关于浏览器的教程。从原理深入剖析到面试题解答，如有纰漏敬请指正。

正文重点开始

第一步，先认识什么是浏览器垃圾

浏览器垃圾：当一个对象（在堆-Heap里）没有任何变量或属性（在栈中）对它进行引用，此时将永远无法操作此对象。 换人话就是：需要使用时就不是垃圾，用完不要了就是垃圾。

按照V8浏览器的标准，垃圾又分2种类型：

新生代的垃圾：生存时间短的对象（如内部声明的变量，或者块级作用域中的变量等），使用完马上可以回收。
老生代的垃圾：生存时间久的对象（如挂载在windows下面的变量、JS一些API、DOM、闭包等），持久性强，需要等待用完才能回收。

那么垃圾过多，会造成什么影响？

这种对象过多会占用大量内存空间导致程序运行变慢。

内存溢出：一种程序运行出现的错误。当程序运行需要的内存超过了剩余的内存时，就会抛出内存溢出的错误。
内存泄漏：占用的内存没有及时释放；内存泄露积累多了就容易导致内存溢出。

常见造成内存泄露的情况：

意外的全局变量（如定义局部变量时忘了写var、使用完成之后未及时清除）；
没有及时清理的计数器、定时器、回调函数、监听器（这条也就是咱们最常说的闭包）；

我们开发者手动清除浏览器垃圾吗？如何手动清除？

将不再使用的对象设置为null即可。如obj=null，浏览器垃圾回收算法会不定时清除;
浏览器有手动清除垃圾的功能。F12 => performance => 🗑（可以见下图）

那么浏览器的回收机制是个啥？

一般网搜关键字”浏览器垃圾回收机制“，最多的结果就是：

现在各大浏览器通常采用的垃圾回收有两种方法：标记清除、引用计数。

其实这里面不够详细，浏览器机制远比这两个算法复杂得多，下面我解析一下。

从浏览器看看，主要的回收器分2种(Major GC、Minor GC)

Major GC（ 主垃圾回收器 ）：主要负责老生代的垃圾回收；
Minor GC（ 副垃圾回收器 ）：主要负责新生代的垃圾回收；

在浏览器中能找到他们（Major GC、Minor GC）之间的工作身影：

JS HEAP SIZE 明显降低的时候，必是Major GC在工作
反观 Minor GC，则没 Major工作这么明显，但是Minor GC工作会比Major频繁得多

爱护环境，请垃圾分类。浏览器是如何做到垃圾分类？

V8 中会把堆分为新生代和老生代两个区域，新生代中存放的是生存时间短的对象，老生代中存放的生存时间久的对象；
新生区通常只支持 1～8M 的容量，而老生区支持的容量就大很多了；
对于这两块区域，V8 分别使用两个不同的垃圾回收器，以便更高效地实施垃圾回收；

关于MajorGC - 主垃圾回收器

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

对象占用空间大。
对象存活时间长。它使用「标记-清除」（Mark-Sweep）的算法执行垃圾回收。

首先是标记。
1. 从一组根元素开始，递归遍历这组根元素。
2. 在这个遍历过程中，能到达的元素称为活动对象，没有到达的元素就可以判断为垃圾数据。
然后是垃圾清除。

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

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

关于minor GC - 副垃圾回收器

负责新生代的垃圾回收，内存占用比较小，通常只支持 1~8 M 的容量。
新生代被分为两个区域：一般是对象区域，一半是空闲区域。

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

先给对象区域所有垃圾做标记。
标记完成后，存活的对象被复制到空闲区域，并且将他们有序的排列一遍。
这就回到我们前面留下的问题 -- 副垃圾回收器没有碎片整理。因为空闲区域里此时是有序的，没有碎片，也就不需要整理了。 3.复制完成后，对象区域会和空闲区域进行对调。将空闲区域中存活的对象放入对象区域里。这样，就完成了垃圾回收。

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

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

垃圾回收的时机及方案：

分代收集

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

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

增量收集

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

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

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

闲时收集

垃圾收集器只会在 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 里面的键名对象和所对应的键值对会自动消失，不用手动删除引用。

现在我们简单了解了浏览器的垃圾回收机制？

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

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

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

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

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

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

weakMap weakSet 和 Map Set 有什么区别？

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