js垃圾回收机制个人总结

js垃圾回收机制

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 把堆分为新生代和老生代两个区域，新生代中存放临时对象，老生代中存放持久对象。
并且让副垃圾回收器、主垃圾回收器，分别负责新生代、老生代的垃圾回收。
这样就可以实现高效的垃圾回收啦。

主垃圾回收器

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

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

它使用「标记-清除」的算法执行垃圾回收。
也就是标记，对标记为不可达的进行回收，然后进行内存整理。

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

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

3.多次标记-清除后，会产生大量不连续的内存碎片，需要进行内存整理
在这里插入图片描述
副垃圾回收器

负责新生代的垃圾回收，通常只支持 1~8 M 的容量。

新生代被分为两个区域：一般是对象区域，一半是空闲区域。
在这里插入图片描述
新加入的对象都被放入对象区域，等对象区域快满的时候，会执行一次垃圾清理。

先给对象区域所有垃圾做标记。
标记完成后，存活的对象被复制到空闲区域，并且将他们有序的排列一遍。

这就回到我们前面留下的问题 – 副垃圾回收器没有碎片整理。因为空闲区域里此时是有序的，没有碎片，也就不需要整理了。

3.复制完成后，对象区域会和空闲区域进行对调。将空闲区域中存活的对象放入对象区域里。

在这里插入图片描述

这样，就完成了垃圾回收。
因为副垃圾回收器操作比较频繁，所以为了执行效率，一般新生区的空间会被设置得比较小。
一旦检测到空间装满了，就执行垃圾回收。

总结：
一句话总结就是将堆分为新生代和老生代，新生代多回收，不需要内存整理，老生代少回收，需要内存整理。

2.增量收集

如果脚本中有许多对象，引擎一次性遍历整个对象，会造成一个长时间暂停。所以引擎将垃圾收集工作分成更小的块，每次处理一部分，多次处理。这样就解决了长时间停顿的问题。
在这里插入图片描述

3.闲时收集

垃圾收集器只会在 CPU 空闲时尝试运行，以减少可能对代码执行的影响。

面试问题

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

从三个点来回答什么是垃圾、如何捡垃圾、什么时候捡垃圾。

1.什么是垃圾

一般对象不被引用，不再需要就是垃圾，特殊情况就是一些对象互相引用，但是根断了引用，也是垃圾。全局变量随时可能用到，不是垃圾。

2.如何回收垃圾

标记空间可达值

从根节点（Root）出发，遍历所有的对象。
可以遍历到的对象，是可达的（reachable）。
没有被遍历到的对象，不可达的（unreachable）
回收「不可达」的值所占据的内存。
做内存整理。

回收的优化方法有分代收集，增量收集，闲时收集

3.什么时候回收

前端有其特殊性，垃圾回收的时候会造成页面卡顿。

在cpu空闲时候回进行垃圾回收

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

Javascritp 中类型：值类型，引用类型。

引用类型：在没有引用之后。通过v8自动回收

值类型：

如果处于闭包的情况下，要等闭包没有引用才会被 V8 回收。
非闭包的情况下，等待 V8 的新生代切换的时候回收。

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

内存泄露是指你「用不到」（访问不到）的变量，依然占居着内存空间，内侧无法释放，也不能被再次利用起来。

常见的内存泄露：

意外的全局变量，比如在局部变量中没有用 var定义变量，使变量变成了全局的变量。
定时器设置了，后面不需要时没有清除定时器
脱离 DOM 的引用（详细可以去看相关博客）

Vue 为例，通常有这些情况：

监听在 window/body 等事件没有解绑
绑在 EventBus 的事件没有解绑
Vuex 的 $store，watch 了之后没有 unwatch
使用第三方库创建，没有调用正确的销毁函数

解决办法：beforeDestroy 中及时销毁

绑定了 DOM/BOM 对象中的事件 addEventListener ，removeEventListener。
观察者模式 $o n ，$ 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