垃圾回收&内存泄漏
Tao. Lv2
  2021-06-02 14:03:01 2021-06-02 14:03      2.6k Words  9 Mins

一、前言

在C与C++等语言中，开发人员可以直接控制内存的申请和回收。但是在Java、C#、JavaScript语言中，变量的内存空间的申请和释放都由程序自己处理，开发人员不需要关心。也就是说Javascript具有自动垃圾回收机制(Garbage Collecation)。

内存生命周期

image-20220220183834258

JS 环境中分配的内存有如下声明周期：

  1. 内存分配：当我们申明变量、函数、对象的时候，系统会自动为他们分配内存
  2. 内存使用：即读写内存，也就是使用变量、函数等
  3. 内存回收：使用完毕，由垃圾回收机制自动回收不再使用的内存

二、垃圾回收

1.引用计数

所谓”引用计数”是指语言引擎有一张”引用表”，保存了内存里面所有的资源（通常是各种值）的引用次数。如果一个值的引用次数是0，就表示这个值不再用到了，因此可以将这块内存释放。

image-20220220183754070

上图中，左下角的两个值，没有任何引用，所以可以释放。

如果一个值不再需要了，引用数却不为0，垃圾回收机制无法释放这块内存，从而导致内存泄漏。

1
2
3
var arr = [1, 2, 3, 4];
arr = [2, 4, 5]
console.log('浪里行舟');

上面代码中，数组[1, 2, 3, 4]是一个值，会占用内存。变量arr是仅有的对这个值的引用，因此引用次数为1。尽管后面的代码没有用到arr，它还是会持续占用内存。至于如何释放内存，我们下文介绍。

第三行代码中，数组[1, 2, 3, 4]引用的变量arr又取得了另外一个值，则数组[1, 2, 3, 4]的引用次数就减1，此时它引用次数变成0，则说明没有办法再访问这个值了，因而就可以将其所占的内存空间给收回来。

但是引用计数有个最大的问题： 循环引用

1
2
3
4
5
6
7
function func() {
    let obj1 = {};
    let obj2 = {};

    obj1.a = obj2; // obj1 引用 obj2
    obj2.a = obj1; // obj2 引用 obj1
}

当函数 func 执行结束后，返回值为 undefined，所以整个函数以及内部的变量都应该被回收，但根据引用计数方法，obj1 和 obj2 的引用次数都不为 0，所以他们不会被回收。

优势

  1. 可即刻回收垃圾，当被引用数值为0时，对象马上会把自己作为空闲空间连到空闲链表上，也就是说。在变成垃圾的时候就立刻被回收。
  2. 因为是即时回收,那么‘程序’不会暂停去单独使用很长一段时间的GC，那么最大暂停时间很短。
  3. 不用去遍历堆里面的所有活动对象和非活动对象

劣势

  1. 计数器需要占很大的位置，因为不能预估被引用的上限，打个比方，可能出现32位即2的32次方个对象同时引用一个对象，那么计数器就需要32位。
  2. 最大的劣势是无法解决循环引用无法回收的问题

循环引用 引申到深拷贝如何解决循环引用问题

2.标记清除

对进入环境离开环境的变量都进行标记，标记清除

标记清除算法将“不再使用的对象”定义为“无法达到的对象”。 简单来说，就是从根部（在JS中就是全局对象）出发定时扫描内存中的对象。 凡是能从根部到达的对象，都是还需要使用的。 那些无法由根部出发触及到的对象被标记为不再使用，稍后进行回收。

从这个概念可以看出，无法触及的对象包含了没有引用的对象这个概念（没有任何引用的对象也是无法触及的对象）。 但反之未必成立。

工作流程：

  1. 垃圾收集器会在运行的时候会给存储在内存中的所有变量都加上标记。
  2. 从根部出发将能触及到的对象的标记清除。
  3. 那些还存在标记的变量被视为准备删除的变量。
  4. 最后垃圾收集器会执行最后一步内存清除的工作，销毁那些带标记的值并回收它们所占用的内存空间。
markandsweeo

循环引用不再是问题了

再看之前循环引用的例子：

1
2
3
4
5
6
7
8
9
10
function f(){
  var o = {};
  var o2 = {};
  o.a = o2; // o 引用 o2
  o2.a = o; // o2 引用 o

  return "azerty";
}

f();

函数调用返回之后，两个循环引用的对象在垃圾收集时从全局对象出发无法再获取他们的引用。 因此，他们将会被垃圾回收器回收。

优势：

  • 实现简单，打标记也就是打或者不打两种可能，所以就一位二进制位就可以表示
  • 解决了循环引用问题

缺点

  • 造成碎片化（有点类似磁盘的碎片化）
  • 再分配时遍次数多，如果一直没有找到合适的内存块大小，那么会遍历空闲链表(保存堆中所有空闲地址空间的地址形成的链表）一直遍历到尾端

三、内存泄漏

内存泄漏就是由于疏忽或错误造成程序未能释放那些已经不再使用的内存，造成内存的浪费。

1.识别方法

1.通过chrome

  1. 打开开发者工具，选择 Performance 面板
  2. 在顶部勾选 Memory
  3. 点击左上角的 record 按钮
  4. 在页面上进行各种操作，模拟用户的使用情况
  5. 一段时间后，点击对话框的 stop 按钮，面板上就会显示这段时间的内存占用情况

来看一张效果图：

image-20220220183902284

我们有两种方式来判定当前是否有内存泄漏：

  1. 多次快照后，比较每次快照中内存的占用情况，如果呈上升趋势，那么可以认为存在内存泄漏
  2. 某次快照后，看当前内存占用的趋势图，如果走势不平稳，呈上升趋势，那么可以认为存在内存泄漏

通过Node

1
2
3
4
5
6
7
console.log(process.memoryUsage());
// { 
//     rss: 27709440,
//     heapTotal: 5685248,
//     heapUsed: 3449392,
//     external: 8772 
// }

process.memoryUsage返回一个对象，包含了 Node 进程的内存占用信息。

该对象包含四个字段，单位是字节，含义如下:

  • rss（resident set size）：所有内存占用，包括指令区和堆栈。
  • heapTotal：”堆”占用的内存，包括用到的和没用到的。
  • heapUsed：用到的堆的部分。
  • external： V8 引擎内部的 C++ 对象占用的内存。

判断内存泄漏，以heapUsed字段为准。

2.常见案例

1.意外的全局变量

1
2
3
4
5
function foo() {
    bar1 = 'some text'; // 没有声明变量 实际上是全局变量 => window.bar1
    this.bar2 = 'some text' // 全局变量 => window.bar2
}
foo();

在这个例子中，意外的创建了两个全局变量 bar1 和 bar2

2.被遗忘的定时器和回调函数

在很多库中, 如果使用了观察者模式, 都会提供回调方法, 来调用一些回调函数。 要记得回收这些回调函数。举一个 setInterval的例子：

1
2
3
4
5
6
7
var serverData = loadData();
setInterval(function() {
    var renderer = document.getElementById('renderer');
    if(renderer) {
        renderer.innerHTML = JSON.stringify(serverData);
    }
}, 5000); // 每 5 秒调用一次

如果后续 renderer 元素被移除，整个定时器实际上没有任何作用。 但如果你没有回收定时器，整个定时器依然有效, 不但定时器无法被内存回收， 定时器函数中的依赖也无法回收。在这个案例中的 serverData 也无法被回收。

3. 闭包

有待考究。

知乎者言：内存泄漏是因为上世纪某些浏览器的bug，跟js没有关系

4.DOM引用

很多时候, 我们对 Dom 的操作, 会把 Dom 的引用保存在一个数组或者 Map 中。

1
2
3
4
5
6
7
8
9
10
var elements = {
    image: document.getElementById('image')
};
function doStuff() {
    elements.image.src = 'http://example.com/image_name.png';
}
function removeImage() {
    document.body.removeChild(document.getElementById('image'));
    // 这个时候我们对于 #image 仍然有一个引用, Image 元素, 仍然无法被内存回收.
}

上述案例中，即使我们对于 image 元素进行了移除，但是仍然有对 image 元素的引用，依然无法对齐进行内存回收。

另外需要注意的一个点是，对于一个 Dom 树的叶子节点的引用。 举个例子: 如果我们引用了一个表格中的td元素，一旦在 Dom 中删除了整个表格，我们直观的觉得内存回收应该回收除了被引用的 td 外的其他元素。 但是事实上，这个 td 元素是整个表格的一个子元素，并保留对于其父元素的引用。 这就会导致对于整个表格，都无法进行内存回收。所以我们要小心处理对于 Dom 元素的引用。

参考

浪里行舟：https://juejin.cn/post/6844903833387155464

简单了解JavaScript垃圾回收机制：https://juejin.cn/post/6844903556265279502

「前端进阶」JS中的内存管理：https://juejin.cn/post/6844903869525262349

一文搞懂V8引擎的垃圾回收：https://juejin.cn/post/6844904016325902344

聊聊V8引擎的垃圾回收：https://juejin.cn/post/6844903591510016007

总结

JavaScript具有自动垃圾回收机制(Garbage Collecation)，有引用计数与标记清除两种方法，引用计数是记录所有对象的引用次数，输入一个值的引用次数为0，就表示这个值不再用到，便会清除这块内存，但有个重大问题就是循环引用问题。标记清除是在运行的时候给内存所有变量加上标记，从根部出发将能触及的对象的标记清除，那些还存在标记的变量被视为准备删除的变量，最后垃圾收集器会销毁那些带标记的变量并回收内存，标记清除解决了循环引用的问题。

内存泄漏是由于内存没有合理释放造成的