JavaScript 中的内存管理是自动执行的,而且是不可见的。我们创建基本类型、对象、函数……所有这些都需要内存。
带着这 4 个问题,来了解浏览器垃圾回收的过程,后面会逐一解答:
浏览器怎么进行垃圾回收?浏览器中不同类型变量的内存都是何时释放?哪些情况会导致内存泄露?如何避免?weakMap weakSet 和 Map Set 有什么区别? 一.什么是垃圾一般来说没有被引用的对象就是垃圾,就是要被清除, 有个例外如果几个对象引用形成一个环,互相引用,但根访问不到它们,这几个对象也是垃圾,也要被清除。
全局变量变量一定不是垃圾,因为随时会用到。
理解什么是垃圾
举栗1
新建一个对象,user引用这个对象
let user = { name: “John” }
如果把引用断掉:
user = null;
此时John这个对象已经没有变量引用,因此就成了垃圾,等待被回收。
举栗2:
let user = { name: "kele"}let admin = user;此时,kele这个对象被两个变量引用如果把user引用断掉user = null;此时Kele这个对象还不能被回收,因为还有admin引用着举栗3:
//家庭婚姻案例哈哈哈 function marry(man, woman) { woman.husban = man; man.wife = woman; return { father: man, mother:woman } } let family = marry({ name: 'John' }, { name:'Ann' } )此时内存结构:
如果我们删除一个引用:
delete family.father
或者删除
delete family.mother.husband
此时只删除上面其中一个是不会产生垃圾的,因为他们还存在引用
如果同时删除上面两个,那么father就没有了引用,虽然father有引用其他的,但是father已经不可达了(如果这里不理解可达和不可达可以往后拉一下,后面具体介绍),从根遍历找不到了,所以father成了垃圾回收数据。
如果从根上断了,则这条引用链就成垃圾回收数据了
family=null;
虽然John和Ann依然互相引用,但是这块都不可达了,访问不到了,浏览会回收掉。
基本的垃圾回收算法为“标记-清除”,定期执行垃圾回收
回收基本步骤:
1. 第一步:标记空间中「可达」值。
V8 采用的是可达性 (reachability) 算法来判断堆中的对象应不应该被回收。
这个算法的思路是这样的:
从根节点(Root)出发,遍历所有的对象。可以遍历到的对象,是可达的(reachable)。没有被遍历到的对象,不可达的(unreachable)。在浏览器环境下,根节点有很多,主要包括这几种:
全局变量 window,位于每个 iframe 中文档 DOM 树存放在栈上的变量…这些根节点不是垃圾,不可能被回收。
2. 第二步:回收 不可达 的值占用的内存
在所有的标记完成之后,统一清理内存中所有不可达的对象。
3.第三步,做内存整理
在频繁回收对象后,内存中就会存在大量不连续空间,专业名词叫「内存碎片」。当内存中出现了大量的内存碎片,如果需要分配较大的连续内存时,就有可能出现内存不足的情况。所以最后一步是整理内存碎片。(但这步其实是可选的,因为有的垃圾回收器不会产生内存碎片,比如接下来我们要介绍的副垃圾回收器。)什么时候进行垃圾回收
浏览器进行垃圾回收的时候,会暂停 JavaScript 脚本,等垃圾回收完毕再继续执行。
对于普通应用这样没什么问题,但对于 JS 游戏、动画对连贯性要求比较高的应用,如果暂停时间很长就会造成页面卡顿。
这就是我们接下来谈的关于垃圾回收的问题:什么时候进行垃圾回收,可以避免长时间暂停。
垃圾回收机制一些优化
1.分代收集
浏览器将数据分为两种,一种是「临时」对象,一种是「长久」对象
临时对象: 大部分对象在内存中存活的时间很短。比如函数内部声明的变量,或者块级作用域中的变量。当函数或者代码块执行结束时,作用域中定义的变量就会被销毁。这类对象很快就变得不可访问,应该快点回收。 长久对象: 生命周期很长的对象,比如全局的 window、DOM、Web API 等等。这类对象可以慢点回收。这两种对象对应不同的回收策略,所以,V8 把堆分为hhdxrk代和老生代两个区域, hhdxrk代中存放临时对象,老生代中存放持久对象。
并且让副垃圾回收器、主垃圾回收器,分别负责hhdxrk代、老生代的垃圾回收。
这样就可以实现高效的垃圾回收啦。
主垃圾回收器
负责老生代的垃圾回收,有两个特点:
对象占用空间大。对象存活时间长。它使用「标记-清除」的算法执行垃圾回收。
也就是标记,对标记为不可达的进行回收,然后进行内存整理。
从一组根元素开始,递归遍历这组根元素。
- 在这个遍历过程中,能到达的元素称为活动对象,没有到达的元素就可以判断为垃圾数据。然后是垃圾清除。
直接将标记为垃圾的数据清理掉。
3.多次标记-清除后,会产生大量不连续的内存碎片,需要进行内存整理
副垃圾回收器
负责hhdxrk代的垃圾回收,通常只支持 1~8 M 的容量。
hhdxrk代被分为两个区域:一般是对象区域,一半是空闲区域。
新加入的对象都被放入对象区域,等对象区域快满的时候,会执行一次垃圾清理。
这就回到我们前面留下的问题 – 副垃圾回收器没有碎片整理。因为空闲区域里此时是有序的,没有碎片,也就不需要整理了。
3.复制完成后,对象区域会和空闲区域进行对调。将空闲区域中存活的对象放入对象区域里。
这样,就完成了垃圾回收。因为副垃圾回收器操作比较频繁,所以为了执行效率,一般hhdxrk区的空间会被设置得比较小。
一旦检测到空间装满了,就执行垃圾回收。
总结:
一句话总结就是将堆分为hhdxrk代和老生代,hhdxrk代多回收,不需要内存整理,老生代少回收,需要内存整理。
2.增量收集
如果脚本中有许多对象,引擎一次性遍历整个对象,会造成一个长时间暂停。所以引擎将垃圾收集工作分成更小的块,每次处理一部分,多次处理。这样就解决了长时间停顿的问题。
3.闲时收集
垃圾收集器只会在 CPU 空闲时尝试运行,以减少可能对代码执行的影响。
面试问题1.浏览器怎么进行垃圾回收?
从三个点来回答什么是垃圾、如何捡垃圾、什么时候捡垃圾。
1.什么是垃圾
一般对象不被引用,不再需要就是垃圾,特殊情况就是一些对象互相引用,但是根断了引用,也是垃圾。全局变量随时可能用到,不是垃圾。
2.如何回收垃圾
标记空间可达值
从根节点(Root)出发,遍历所有的对象。
可以遍历到的对象,是可达的(reachable)。
没有被遍历到的对象,不可达的(unreachable)
回收「不可达」的值所占据的内存。
做内存整理。
回收的优化方法有分代收集,增量收集,闲时收集
3.什么时候回收
前端有其特殊性,垃圾回收的时候会造成页面卡顿。
在cpu空闲时候回进行垃圾回收
2.浏览器中不同类型变量的内存都是何时释放?
Javascritp 中类型:值类型,引用类型。
引用类型:在没有引用之后。通过v8自动回收
值类型:
如果处于闭包的情况下,要等闭包没有引用才会被 V8 回收。非闭包的情况下,等待 V8 的hhdxrk代切换的时候回收。3.哪些情况会导致内存泄露?如何避免?
内存泄露是指你「用不到」(访问不到)的变量,依然占居着内存空间,内侧无法释放,也不能被再次利用起来。
常见的内存泄露:
意外的全局变量,比如在局部变量中没有用 var定义变量,使变量变成了全 局的变量。定时器设置了,后面不需要时没有清除定时器脱离 DOM 的引用(详细可以去看相关博客)Vue 为例,通常有这些情况:
监听在 window/body 等事件没有解绑绑在 EventBus 的事件没有解绑Vuex 的 $store,watch 了之后没有 unwatch使用第三方库创建,没有调用正确的销毁函数解决办法:beforeDestroy 中及时销毁
绑定了 DOM/BOM 对象中的事件 addEventListener ,removeEventListener。观察者模式 o n , on, on,off处理。如果组件中使用了定时器,应销毁处理。如果在 mounted/created 钩子中使用了第三方库初始化,对应的销毁。使用弱引用 weakMap、weakSet。闭包会导致内存泄露吗?
闭包会导致内存泄露吗?正确的答案是不会。(很多博客说会有内存泄露,大家可以去看看)
内存泄露是指你「用不到」(访问不到)的变量,依然占居着内存空间,不能被再次利用起来。
闭包里面的变量就是我们需要的变量,不能说是内存泄露。
4.weakMap weakSet 和 Map Set 有什么区别?
在 ES6 中为我们新增了两个数据结构 WeakMap、WeakSet,就是为了解决内存泄漏的问题。
它的键名所引用的对象都是弱引用,就是垃圾回收机制遍历的时候不考虑该引用。
只要所引用的对象的其他引用都被清除,垃圾回收机制就会释放该对象所占用的内存。
也就是说,一旦不再需要,WeakMap 里面的键名对象和所对应的键值对会自动消失,不用手动删除引用。
最后总结
浏览器怎么进行垃圾回收?答题思路:什么是垃圾、怎么收垃圾、什么时候收垃圾。
浏览器中不同类型变量的内存都是何时释放?答题思路:分为值类型、引用类型。
哪些情况会导致内存泄露?如何避免?答题思路:内存泄露是指你「用不到」(访问不到)的变量,依然占居着内存空间,不能被再次利用起来。
weakMap weakSet 和 Map Set 有什么区别?答题思路:WeakMap、WeakSet 弱引用,解决了内存泄露问题。
本文是学习js垃圾回收机制时看的文章和自己做的一些笔记,有不足之处多多指出!
本文参考文章如下,小伙伴们可以去看看,写的很好!
前端面试:谈谈 JS 垃圾回收机制:https://segmentfault.com/a/1190000018605776
从 4 个面试题了解「浏览器的垃圾回收」:https://mp.weixin.qq.com/s/3RcC0cMPRNbtPvQwUDyZ2g