浏览器的GC垃圾回收机制
浏览器的GC垃圾回收机制前言
Hello，大家好。相信“浏览器的F12调试工具”对于前端开发者来说并不陌生，是在F12工具里面，日常所用到的仅仅是Element、Console、Network等几个。
前端开发的战场都大部分在浏览器上。了解浏览器，不仅仅会对前端日常开发有帮助，而且面对各类关于底层的面试也会得心应手。
但是在目前市场上，关于浏览器的体系专题少之又少，接下来，我会持续更新系列关于浏览器的教程。从原理深入剖析到面试题解答，如有纰漏敬请指正。
正文重点开始第一步，先认识什么是浏览器垃圾
浏览器垃圾：当一个对象（在堆-Heap里）没有任何变量或属性（在栈中）对它进行引用，此时将永远无法操作此对象。换人话就是：需要使用时就不是垃圾，用完不要了就是垃圾。
按照V8浏览器的标准，垃圾又分2种类型：
新生代的垃圾：生存时间短的对象（如内部声明的变量，或者块级作用域中的变量等），使用完马上可以回收。老生代的垃圾：生存时间久的对象（如挂载在windows下面的变量、JS一些API、DOM、闭包等），持久性强，需要等待用完才能回收。那么垃圾过多，会造成什么影响？
这种对象过多会占用大量内存空间导致程序运行变慢。
常见造成内存泄露的情况：我们开发者手动清除浏览器垃圾吗？如何手动清除？那么浏览器的回收机制是个啥？
一般网搜关键字”浏览器垃圾回收机制“，最多的结果就是：
现在各大浏览器通常采用的垃圾回收有两种方法：标记清除、引用计数。
其实这里面不够详细，浏览器机制远比这两个算法复杂得多，下面我解析一下。
从浏览器看看，主要的回收器分2种(Major GC、Minor GC)
在浏览器中能找到他们（Major GC、Minor GC）之间的工作身影：
爱护环境，请垃圾分类。浏览器是如何做到垃圾分类？
关于MajorGC - 主垃圾回收器
负责老生代的垃圾回收，有两个特点：
首先是标记。
从一组根元素开始，递归遍历这组根元素。在这个遍历过程中，能到达的元素称为活动对象，没有到达的元素就可以判断为垃圾数据。
然后是垃圾清除。
直接将标记为垃圾的数据清理掉。
多次标记-清除后，会产生大量不连续的内存碎片，需要进行内存整理。
关于minor GC - 副垃圾回收器
新加入的对象都被放入对象区域，等对象区域快满的时候，会执行一次垃圾清理。
先给对象区域所有垃圾做标记。标记完成后，存活的对象被复制到空闲区域，并且将他们有序的排列一遍。
这就回到我们前面留下的问题 -- 副垃圾回收器没有碎片整理。因为空闲区域里此时是有序的，没有碎片，也就不需要整理了。3.复制完成后，对象区域会和空闲区域进行对调。将空闲区域中存活的对象放入对象区域里。
这样，就完成了垃圾回收。
因为副垃圾回收器操作比较频繁，所以为了执行效率，一般新生区的空间会被设置得比较小。
一旦检测到空间装满了，就执行垃圾回收。
垃圾回收的时机及方案：
一句话总结分代回收就是：将堆分为新生代与老生代，多回收新生代，少回收老生代。
这样就减少了每次需遍历的对象，从而减少每次垃圾回收的耗时。
如果脚本中有许多对象，引擎一次性遍历整个对象，会造成一个长时间暂停。
所以引擎将垃圾收集工作分成更小的块，每次处理一部分，多次处理。
这样就解决了长时间停顿的问题。
垃圾收集器只会在 CPU 空闲时尝试运行，以减少可能对代码执行的影响。
前端圈子里常见面试题及解答：
1. 面试题1：浏览器怎么进行垃圾回收？
提示：从三个点来回答什么是垃圾、如何捡垃圾、什么时候捡垃圾。
什么是垃圾 ？
不再需要，即为垃圾全局变量随时可能用到，所以一定不是垃圾
如何捡垃圾（遍历算法）？
标记空间中「可达」值。从根节点（Root）出发，遍历所有的对象。可以遍历到的对象，是可达的（reachable）。没有被遍历到的对象，不可达的（unreachable）回收「不可达」的值所占据的内存。做内存整理。
什么时候捡垃圾？
前端有其特殊性，垃圾回收的时候会造成页面卡顿。分代收集、增量收集、闲时收集。
面试题2：浏览器中不同类型变量的内存都是何时释放？
Javascritp 中类型：值类型，引用类型。
值类型
面试题3：哪些情况会导致内存泄露？如何避免？
内存泄露是指你「用不到」（访问不到）的变量，依然占居着内存空间，不能被再次利用起来。
以 Vue 为例，通常有这些情况：解决办法：
闭包会导致内存泄露吗？
顺便说一个我在了解垃圾回收之前对闭包的误解。
闭包会导致内存泄露吗？正确的答案是不会。
内存泄露是指你「用不到」（访问不到）的变量，依然占居着内存空间，不能被再次利用起来。
闭包里面的变量就是我们需要的变量，不能说是内存泄露。
这个误解是如何来的？ 因为 IE。IE 有 bug，IE 在我们使用完闭包之后，依然回收不了闭包里面引用的变量。 这是 IE 的问题，不是闭包的问题。
面试题4：weakMap weakSet 和 Map Set 有什么区别？
在 ES6 中为我们新增了两个数据结构 WeakMap、WeakSet，就是为了解决内存泄漏的问题。
它的键名所引用的对象都是弱引用，就是垃圾回收机制遍历的时候不考虑该引用。
只要所引用的对象的其他引用都被清除，垃圾回收机制就会释放该对象所占用的内存。
也就是说，一旦不再需要，WeakMap 里面的键名对象和所对应的键值对会自动消失，不用手动删除引用。
现在我们简单了解了浏览器的垃圾回收机制？
浏览器怎么进行垃圾回收？
浏览器中不同类型变量的内存都是何时释放？
哪些情况会导致内存泄露？如何避免？
weakMap weakSet 和 Map Set 有什么区别？
