10深入理解V8垃圾回收及javascript垃圾回收机制

V8 垃圾回收

https://juejin.cn/post/6844904016325902344

js单线程机制及垃圾回收机制, V8引擎为了减少对应用的性能造成的影响，采用了一种比较粗暴的手段，那就是直接限制堆内存的大小.
支持在安装node时, 直接进行手动配置

• heapTotal：表示V8当前申请到的堆内存总大小。
• heapUsed：表示当前内存使用量。
• external：表示V8内部的C++对象所占用的内存。
• rss(resident set size)：表示驻留集大小，是给这个node进程分配了多少物理内存，这些物理内存中包含堆，栈和代码片段。对象，闭包等存于堆内存，变量存于栈内存，实际的JavaScript源代码存于代码段内存。使用Worker线程时，rss将会是一个对整个进程有效的值，而其他字段则只针对当前线程。

V8 的垃圾回收策略

• 新生代(new_space)：大多数的对象开始都会被分配在这里，这个区域相对较小但是垃圾回收特别频繁，该区域被分为两半，一半用来分配内存，另一半用于在垃圾回收时将需要保留的对象复制过来。
• 老生代(old_space)：新生代中的对象在存活一段时间后就会被转移到老生代内存区，相对于新生代该内存区域的垃圾回收频率较低。老生代又分为老生代指针区和老生代数据区，前者包含大多数可能存在指向其他对象的指针的对象，后者只保存原始数据对象，这些对象没有指向其他对象的指针。
• 大对象区(large_object_space)：存放体积超越其他区域大小的对象，每个对象都会有自己的内存，垃圾回收不会移动大对象区。
• 代码区(code_space)：代码对象，会被分配在这里，唯一拥有执行权限的内存区域。
• map区(map_space)：存放Cell和Map，每个区域都是存放相同大小的元素，结构简单

具体回收策略 略, 详见链接文档

JS内存管理机制

引用计数垃圾收集

这是最初级的垃圾收集算法。此算法把“对象是否不再需要”简化定义为“对象有没有其他对象引用到它”。如果没有引用指向该对象（零引用），对象将被垃圾回收机制回收。

// “这个对象”分配给 a 变量
var a = {
  a: 1,
  b: 2,
}
// b 引用“这个对象”
var b = a; 
// 现在，“这个对象”的原始引用 a 被 b 替换了
a = 1;

当前执行环境中，“这个对象”内存还没有被回收的，需要手动释放“这个对象”的内存（当然是还没离开执行环境的情况下），例如：

b = null;
// 或者 b = 1，反正替换“这个对象”就行了

ES6 把引用有区分为强引用和弱引用，这个目前只有再 Set 和 Map 中才有。

强引用才会有引用计数叠加，只有引用计数为 0 的对象的内存才会被回收，所以一般需要手动回收内存（手动回收的前提在于标记清除法还没执行，还处于当前执行环境）。

而弱引用没有触发引用计数叠加，只要引用计数为 0，弱引用就会自动消失，无需手动回收内存。

标记清除法

当变量进入执行环境时标记为“进入环境”，当变量离开执行环境时则标记为“离开环境”，被标记为“进入环境”的变量是不能被回收的，因为它们正在被使用，而标记为“离开环境”的变量则可以被回收

环境可以理解为我们的作用域，但是全局作用域的变量只会在页面关闭才会销毁。

// 假设这里是全局变量
// b 被标记进入环境
var b = 2;
function test() {
  var a = 1;
  // 函数执行时，a 被标记进入环境
  return a + b;
}
// 函数执行结束，a 被标记离开环境，被回收
// 但是 b 就没有被标记离开环境
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)
    })
  },
}
</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;