今天的一道面试题(19) - V8垃圾回收机制

参考 - 浏览器工作原理与实践

V8的内存管理机制

栈中的内存是如何回收的

function foo(){
    var a = 1
    var b = {name:" 极客邦 "}
    function showName(){
      var c = " 极客时间 "
      var d = {name:" 极客时间 "}
    }
    showName()
}
foo()

showName函数被调用时,其调用栈和堆空间状态图如下所示:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ienGqoxe-1636384980917)(http://blog.poetries.top/img-repo/2019/11/11.png)]

原始类型的数据被分配到栈中,引用类型的数据会被分配到堆中。当 foo 函数执行结束之后,foo 函数的执行上下文会从堆中被销毁掉

有一个记录当前执行状态的指针ESP,当 showName 函数执行完成之后,函数执行流程就进入了 foo 函数,那这时就需要销毁 showName 函数的执行上下文了。ESP 这时候就帮上忙了,JavaScript 会将 ESP 下移到 foo 函数的执行上下文,这个下移操作就是销毁 showName 函数执行上下文的过程。

另: 函数上下文分为: 全局上下文, 函数上下文, eval()

堆中的内存是如何回收

在 V8 中会把堆分为新生代老生代两个区域,新生代中存放的是生存时间短的对象,老生代中存放的生存时间久的对象。

副垃圾回收器 - 新生代

副垃圾回收器主要负责新生区的垃圾回收。而通常情况下,大多数小的对象都会被分配到新生区,所以说这个区域虽然不大,但是垃圾回收还是比较频繁的。

新生代中用Scavenge 算法来处理。所谓 Scavenge 算法,是把新生代空间对半划分为两个区域,一半是对象区域,一半是空闲区域,如下图所示

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cDfJ5NLH-1636384980920)(http://blog.poetries.top/img-repo/2019/11/13.png)]

新加入的对象都会存放到对象区域,当对象区域快被写满时,就需要执行一次垃圾清理操作。

垃圾回收过程中

  1. 对对象区域中的垃圾做标记
  2. 副垃圾回收器把存活的对象复制到空闲区域, 并有序排列起来(清除内存碎片)
  3. 对象区域与空闲区域角色翻转(可以保证新生代中的这两块区域无限重复使用下去)

主垃圾回收器 - 老生代

经过两次垃圾回收依然还存活的对象,会被移动到老生区中

主垃圾回收器主要负责老生区中的垃圾回收。除了新生区中晋升的对象,一些大的对象会直接被分配到老生区。因此老生区中的对象有两个特点,一个是对象占用空间大,另一个是对象存活时间长。

主垃圾回收器是采用标记清除的算法进行垃圾回收的

  1. 标记阶段: 从一组根元素开始,递归遍历这组根元素,在这个遍历过程中,能到达的元素称为活动对象,没有到达的元素就可以判断为垃圾数据。
  2. 清除过程. 直接将垃圾数据清除

当对一块内存多次执行标记-清除算法后,会产生大量不连续的内存碎片。这时候就需要标记-整理

这个标记过程仍然与标记-清除算法里的是一样的,但后续步骤不是直接对可回收对象进行清理,而是让所有存活的对象都向一端移动,然后直接清理掉端边界以外的内存。

全停顿

由于 JavaScript 是运行在主线程之上的,一旦执行垃圾回收算法,都需要将正在执行的 JavaScript 脚本暂停下来,待垃圾回收完毕后再恢复脚本执行。我们把这种行为叫做全停顿

在老生代垃圾回收中, 全停顿会很影响性能. 所以V8有个增量标记的算法, 将标记过程分成一个个小任务进行. 小任务穿插在js中执行, 从而减小卡顿

如何避免内存泄漏

  • 尽可能少的创建全局变量
  • 手动清除定时器
  • 手动清除事件监听器
  • 手动清除订阅发布事件监听器
<template>
  <div @click="onClick"></div>
</template>

<script>
import customEvent from 'event'
export default {
  methods: {
    onClick() {
      customEvent.emit('test', { type: 'click' })
    },
  },
  mounted() {
    customEvent.on('test', data => {
      // 一些逻辑
      console.log(data)
    })
  },
}
</script>

上面的组件销毁的时候,自定义 test 事件还是在监听中,里面涉及到的内存都是没法回收的(浏览器会认为这是必须的内存,不是垃圾内存),需要在组件销毁的时候移除相关的事件,如下:

<template>
  <div @click="onClick"></div>
</template>

<script>
import customEvent from 'event'

export default {
  methods: {
    onClick() {
      customEvent.emit('test', { type: 'click' })
    },
  },
  mounted() {
    customEvent.on('test', data => {
      // 一些逻辑
      console.log(data)
    })
  },
  beforeDestroy() {
    customEvent.off('test')
  },
}
</script>
  • 少用闭包
  • 清除DOM引用
  • 弱引用, 内存回收不会考虑到这个引用是否存在
let map = new WeakSet();
let value = { test: 22};
map.add(value);

value = null;
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值