来源：Maricahtml
https://juejin.im/post/6861967094318284814前端
浏览器垃圾回收一直是前端面试常考的部分，我一直不太理解。最近深刻学习了一下，争取一篇文章说清楚。web
咱们首先带着这 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) 算法来判断堆中的对象应不该该被回收。
这个算法的思路是这样的：
-
从根节点（Root）出发，遍历全部的对象。 -
能够遍历到的对象，是可达的（reachable）。 -
没有被遍历到的对象，不可达的（unreachable）。
在浏览器环境下，根节点有不少，主要包括这几种：
-
全局变量 window，位于每一个iframe中 -
文档 DOM树 -
存放在栈上的变量 -
...
这些根节点不是垃圾，不可能被回收。
第二步：回收「不可达」的值所占据的内存。
在全部的标记完成以后，统一清理内存中全部不可达的对象。
第三步，作内存整理。
-
在频繁回收对象后，内存中就会存在大量不连续空间，专业名词叫「内存碎片」。 -
当内存中出现了大量的内存碎片，若是须要分配较大的连续内存时，就有可能出现内存不足的状况。 -
因此最后一步是整理内存碎片。(但这步实际上是可选的，由于有的垃圾回收器不会产生内存碎片，好比接下来咱们要介绍的副垃圾回收器。)
何时垃圾回收？
浏览器进行垃圾回收的时候，会暂停 JavaScript 脚本，等垃圾回收完毕再继续执行。
对于普通应用这样没什么问题，但对于 JS 游戏、动画对连贯性要求比较高的应用，若是暂停时间很长就会形成页面卡顿。
这就是咱们接下来谈的关于垃圾回收的问题：何时进行垃圾回收，能够避免长时间暂停。
分代收集
浏览器将数据分为两种，一种是「临时」对象，一种是「长久」对象。
-
临时对象：
-
大部分对象在内存中存活的时间很短。 -
好比函数内部声明的变量，或者块级做用域中的变量。当函数或者代码块执行结束时，做用域中定义的变量就会被销毁。 -
这类对象很快就变得不可访问，应该快点回收。 -
长久对象：
-
生命周期很长的对象，好比全局的 window、DOM、Web API等等。 -
这类对象能够慢点回收。
这两种对象对应不一样的回收策略，因此，V8 把堆分为新生代和老生代两个区域， 新生代中存放临时对象，老生代中存放持久对象。
而且让副垃圾回收器、主垃圾回收器，分别负责新生代、老生代的垃圾回收。
这样就能够实现高效的垃圾回收啦。
通常来讲，面试回答到这就够了。若是想和面试官深刻交流，能够继续聊聊两个垃圾回收器。
主垃圾回收器
负责老生代的垃圾回收，有两个特色：
-
对象占用空间大。 -
对象存活时间长。
它使用「标记-清除」的算法执行垃圾回收。
-
首先是标记。
-
从一组根元素开始，递归遍历这组根元素。 -
在这个遍历过程当中，能到达的元素称为活动对象，没有到达的元素就能够判断为垃圾数据。 -
而后是垃圾清除。
直接将标记为垃圾的数据清理掉。 -
屡次标记-清除后，会产生大量不连续的内存碎片，须要进行内存整理。
副垃圾回收器
负责新生代的垃圾回收，一般只支持 1~8 M 的容量。
新生代被分为两个区域：通常是对象区域，一半是空闲区域。 新加入的对象都被放入对象区域，等对象区域快满的时候，会执行一次垃圾清理。
-
先给对象区域全部垃圾作标记。 -
标记完成后，存活的对象被复制到空闲区域，而且将他们有序的排列一遍。 这就回到咱们前面留下的问题 -- 副垃圾回收器没有碎片整理。由于空闲区域里此时是有序的，没有碎片，也就不须要整理了。
-
复制完成后，对象区域会和空闲区域进行对调。将空闲区域中存活的对象放入对象区域里。 这样，就完成了垃圾回收。
由于副垃圾回收器操做比较频繁，因此为了执行效率，通常新生区的空间会被设置得比较小。
一旦检测到空间装满了，就执行垃圾回收。
分代收集
一句话总结分代回收就是：将堆分为新生代与老生代，多回收新生代，少回收老生代。
这样就减小了每次需遍历的对象，从而减小每次垃圾回收的耗时。
增量收集
若是脚本中有许多对象，引擎一次性遍历整个对象，会形成一个长时间暂停。
因此引擎将垃圾收集工做分红更小的块，每次处理一部分，屡次处理。
这样就解决了长时间停顿的问题。
闲时收集
垃圾收集器只会在 CPU 空闲时尝试运行，以减小可能对代码执行的影响。
面试题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 个问题吗？
-
浏览器怎么进行垃圾回收？
答题思路：什么是垃圾、怎么收垃圾、何时收垃圾。
-
浏览器中不一样类型变量的内存都是什么时候释放？
答题思路：分为值类型、引用类型。
-
哪些状况会致使内存泄露？如何避免？
答题思路：内存泄露是指你「用不到」（访问不到）的变量，依然占居着内存空间，不能被再次利用起来。
-
weakMapweakSet和MapSet有什么区别？
答题思路：WeakMap、WeakSet 弱引用，解决了内存泄露问题。
送书啦
送一本《Web前端性能优化》，感谢北京大学出版社对鑫泽的支持。
送书规则
扫一扫上方的二维码回复：送书 便可参加！
注意：
一、开奖时间：2020年10月18日 20：00
二、中奖后联系我，告诉我邮寄地址。超过24小时未领取视为弃权，将会把中奖名额给其余读者。
三、中奖前，须是我公众号的读者。中奖后关注，则中奖无效。
更多推荐内容
↓↓↓
若是你喜欢本文
请长按二维码，关注全栈自学社区
转发朋友圈，是对我最大的支持哟
以上，即是今天的分享，但愿你们喜欢，以为内容不错的，欢迎「分享」「赞」或者点击「在看」支持，谢谢各位。
❤️爱心三连击
本文分享自微信公众号 - 掌上编程（ThePalmJava）。
若有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一块儿分享。