JavaScript内存管理&垃圾回收机制解析

JavaScript内存管理&垃圾回收机制

JavaScript（和其他高级语言）在创建变量（对象、字符串等）时自动进行了分配内存，并且在不适用它们时“自动”释放，释放的过程称为垃圾回收。

内存生命周期
不管什么程序语言，内存生命周期基本是一致的：
分配你所需要的内存
使用分配到的内存（读、写）
不需要时将其释放/归还
所有语言第二部分都是明确的。第一和第三部分在底层语言中是明确的，但在像JavaScript这些高级语言中，大部分都是隐含的。

JavaScript 的内存分配

值的初始化

为了不让程序员费心分配内存，JavaScript 在定义变量时就完成了内存分配。

var n = 123; // 给数值变量分配内存
var s = "azerty"; // 给字符串分配内存

var o = {
  a: 1,
  b: null
}; // 给对象及其包含的值分配内存

// 给数组及其包含的值分配内存（就像对象一样）
var a = [1, null, "abra"]; 

function f(a){
  return a + 2;
} // 给函数（可调用的对象）分配内存

// 函数表达式也能分配一个对象
someElement.addEventListener('click', function(){
  someElement.style.backgroundColor = 'blue';
}, false);

通过函数调用分配内存

有些函数调用结果是分配对象内存：

var d = new Date(); // 分配一个 Date 对象

var e = document.createElement('div'); // 分配一个 DOM 元素

有些方法分配新变量或者新对象：

var s = "azerty";
var s2 = s.substr(0, 3); // s2 是一个新的字符串
// 因为字符串是不变量，
// JavaScript 可能决定不分配内存，
// 只是存储了 [0-3] 的范围。

var a = ["ouais ouais", "nan nan"];
var a2 = ["generation", "nan nan"];
var a3 = a.concat(a2); 
// 新数组有四个元素，是 a 连接 a2 的结果

使用值

使用值的过程实际上是对分配内存进行读取与写入的操作。读取与写入可能是写入一个变量或者一个对象的属性值，甚至传递函数的参数。

当内存不再需要使用时释放

大多数内存管理的问题都在这个阶段。在这里最艰难的任务是找到“哪些被分配的内存确实已经不再需要了”。它往往要求开发人员来确定在程序中哪一块内存不再需要并且释放它。

高级语言解释器嵌入了“垃圾回收器”，它的主要工作是跟踪内存的分配和使用，以便当分配的内存不再使用时，自动释放它。这只能是一个近似的过程，因为要知道是否仍然需要某块内存是无法判定的（无法通过某种算法解决）。

垃圾回收

如上文所述自动寻找是否一些内存“不再需要”的问题是无法判定的。因此，垃圾回收实现只能有限制的解决一般问题。本节将解释必要的概念，了解主要的垃圾回收算法和它们的局限性。

引用

垃圾回收算法主要依赖于引用的概念。在内存管理的环境中，一个对象如果有访问另一个对象的权限（隐式或者显式），叫做一个对象引用另一个对象。例如，一个Javascript对象具有对它原型的引用（隐式引用）和对它属性的引用（显式引用）。
在这里，“对象”的概念不仅特指 JavaScript 对象，还包括函数作用域（或者全局词法作用域）。

引用计数垃圾收集

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

var o = { 
  a: {
    b:2
  }
}; 
// 两个对象被创建，一个作为另一个的属性被引用，另一个被分配给变量o
// 很显然，没有一个可以被垃圾收集


var o2 = o; // o2变量是第二个对“这个对象”的引用

o = 1;      // 现在，“这个对象”只有一个o2变量的引用了，“这个对象”的原始引用o已经没有

var oa = o2.a; // 引用“这个对象”的a属性
               // 现在，“这个对象”有两个引用了，一个是o2，一个是oa

o2 = "yo"; // 虽然最初的对象现在已经是零引用了，可以被垃圾回收了
           // 但是它的属性a的对象还在被oa引用，所以还不能回收

oa = null; // a属性的那个对象现在也是零引用了
           // 它可以被垃圾回收了

限制：循环引用

该算法有个限制：无法处理循环引用的事例。在下面的例子中，两个对象被创建，并互相引用，形成了一个循环。它们被调用之后会离开函数作用域，所以它们已经没有用了，可以被回收了。然而，引用计数算法考虑到它们互相都有至少一次引用，所以它们不会被回收。

function f(){
  var o = {};
  var o2 = {};
  o.a = o2; // o 引用 o2
  o2.a = o; // o2 引用 o

  return "azerty";
}

f();

实际例子
IE 6, 7 使用引用计数方式对 DOM 对象进行垃圾回收。该方式常常造成对象被循环引用时内存发生泄漏：

var div;
window.onload = function(){
  div = document.getElementById("myDivElement");
  div.circularReference = div;
  div.lotsOfData = new Array(10000).join("*");
};

在上面的例子里，myDivElement 这个 DOM 元素里的 circularReference 属性引用了 myDivElement，造成了循环引用。如果该属性没有显示移除或者设为 null，引用计数式垃圾收集器将总是且至少有一个引用，并将一直保持在内存里的 DOM 元素，即使其从DOM 树中删去了。如果这个 DOM 元素拥有大量的数据 (如上的 lotsOfData 属性)，而这个数据占用的内存将永远不会被释放。

标记-清除算法

这个算法把“对象是否不再需要”简化定义为“对象是否可以获得”。
这个算法假定设置一个叫做根（root）的对象（在Javascript里，根是全局对象）。垃圾回收器将定期从根开始，找所有从根开始引用的对象，然后找这些对象引用的对象……从根开始，垃圾回收器将找到所有可以获得的对象和收集所有不能获得的对象。
这个算法比前一个要好，因为“有零引用的对象”总是不可获得的，但是相反却不一定，参考“循环引用”。
从2012年起，所有现代浏览器都使用了标记-清除垃圾回收算法。所有对JavaScript垃圾回收算法的改进都是基于标记-清除算法的改进，并没有改进标记-清除算法本身和它对“对象是否不再需要”的简化定义。
循环引用不再是问题了
在上面的示例中，函数调用返回之后，两个对象从全局对象出发无法获取。因此，他们将会被垃圾回收器回收。第二个示例同样，一旦 div 和其事件处理无法从根获取到，他们将会被垃圾回收器回收。

JavaScript垃圾回收

JavaScript中的内存管理是自动执行的，而且是不可见的。代码中创建的基本类型、函数、对象……所有这些都需要内存。
当这些被创建在内存中的内容有些不再需要了或者说失去作用了，如何找出这些已经无用的但是还占据内存的内容便是垃圾回收清理机制问题。

可达性

JavaScript 中内存管理的主要概念是可达性。
简单地说，“可达性” 值就是那些以某种方式可访问或可用的值，它们被保证存储在内存中。

1. 有一组基本的固有可达值，由于显而易见的原因无法删除。例如:
   本地函数的局部变量和参数
   当前嵌套调用链上的其他函数的变量和参数
   全局变量
   还有一些其他的，内部的
   这些值称为根。
2. 如果引用或引用链可以从根访问任何其他值，则认为该值是可访问的。
   例如，如果局部变量中有对象，并且该对象具有引用另一个对象的属性，则该对象被视为可达性， 它引用的那些也是可以访问的，详细的例子如下。
   JavaScript 引擎中有一个后台进程称为垃圾回收器，它监视所有对象，并删除那些不可访问的对象。
   一个简单的例子
   下面是最简单的例子:

// user 具有对象的引用
let user = {
    name: "John"
};

这里箭头表示一个对象引用。全局变量“user”引用对象 {name:“John”} (为了简洁起见，我们将其命名为John)。John 的 “name” 属性存储一个基本类型，因此它被绘制在对象中。
如果 user 的值被覆盖，则引用丢失:

user = null;

现在 John 变成不可达的状态，没有办法访问它，没有对它的引用。垃圾回收器将丢弃 John 数据并释放内存。
两个引用
现在让我们假设我们将引用从 user 复制到 admin:

// user具有对象的引用
    let user = {
      name: "John"
    };

    let admin = user;

现在如果我们做同样的事情:

user = null;

该对象仍然可以通过 admin 全局变量访问，所以它在内存中。如果我们也覆盖admin，那么它可以被释放。
相互关联的对象
现在来看一个更复杂的例子， family 对象：

function marry (man, woman) {
      woman.husban = man;
      man.wife = woman;

      return {
        father: man,
        mother: woman
      }
}
let family = marry({
      name: "John"
    }, {
      name: "Ann"
})

函数 marry 通过给两个对象彼此提供引用来“联姻”它们，并返回一个包含两个对象的新对象。
产生的内存结构:

到目前为止，所有对象都是可访问的。
现在让我们删除两个引用:

delete family.father;
delete family.mother.husband;

仅仅删除这两个引用中的一个是不够的，因为所有对象仍然是可访问的。
但是如果我们把这两个都删除，那么我们可以看到 John 不再有传入的引用:

输出引用无关紧要。只有传入的对象才能使对象可访问，因此，John 现在是不可访问的，并将从内存中删除所有不可访问的数据。
垃圾回收之后：

无法访问的数据块
有可能整个相互连接的对象变得不可访问并从内存中删除。
源对象与上面的相同。然后:

family = null;

内存中的图片变成:

这个例子说明了可达性的概念是多么重要。
很明显，John和Ann仍然链接在一起，都有传入的引用。但这还不够。
“family”对象已经从根上断开了链接，不再有对它的引用，因此下面的整个块变得不可到达，并将被删除。
内部算法
基本的垃圾回收算法称为“标记-清除”，定期执行以下“垃圾回收”步骤:
垃圾回收器获取根并“标记”(记住)它们。
然后它访问并“标记”所有来自它们的引用。
然后它访问标记的对象并标记它们的引用。所有被访问的对象都被记住，以便以后不再访问同一个对象两次。
以此类推，直到有未访问的引用(可以从根访问)为止。
除标记的对象外，所有对象都被删除。
例如，对象结构如下:

我们可以清楚地看到右边有一个“不可到达的块”。现在让我们看看“标记并清除”垃圾回收器如何处理它。
第一步标记根

然后标记他们的引用

以及子孙代的引用:

现在进程中不能访问的对象被认为是不可访问的，将被删除:

这就是垃圾收集的工作原理。JavaScript引擎应用了许多优化，使其运行得更快，并且不影响执行。
一些优化:
分代回收——对象分为两组:“新对象”和“旧对象”。许多对象出现，完成它们的工作并迅速结 ，它们很快就会被清理干净。那些活得足够久的对象，会变“老”，并且很少接受检查。
增量回收——如果有很多对象，并且我们试图一次遍历并标记整个对象集，那么可能会花费一些时间，并在执行中会有一定的延迟。因此，引擎试图将垃圾回收分解为多个部分。然后，各个部分分别执行。这需要额外的标记来跟踪变化，这样有很多微小的延迟，而不是很大的延迟。
空闲时间收集——垃圾回收器只在 CPU 空闲时运行，以减少对执行的可能影响。
面试怎么回答
1）问什么是垃圾
一般来说没有被引用的对象就是垃圾，就是要被清除， 有个例外如果几个对象引用形成一个环，互相引用，但根访问不到它们，这几个对象也是垃圾，也要被清除。
2）如何检垃圾
一种算法是标记 标记-清除 算法

关于内存泄漏

什么是内存泄漏

JavaScript中的内存泄漏就是被分配的内存没有被使用，但是也不能被回收的一种现象。简单来说，我们已经无法再通过js代码来引用到某个对象，但垃圾回收器却认为这个对象还在被引用，因此在回收的时候不会释放它，这样导致内存一直被占用，会导致内存不够用而系统崩溃。
内存泄漏常见的的几种情况

全局变量

全局变量是不可回收的销毁的，所以谨慎使用，如果存入数据过大，可以再用完之后进行清空，设置为null或重新定义。

闭包

根据闭包的特性，内部函数有权访问外部函数的变量对象。所以当fn()执行之后，DOM元素已经存在于内存。

function fn(){  
    var dom = document.createElement("XXX"); 
    dom .onclick = function(){ 
        console.log("DOM被闭包引用，不进行回收处理")
    }
}
fn()

没有清理的 DOM 元素引用

function processData(data) {
  if (!data) {
    return
  }
  const url = window.URL.createObjectURL(new Blob([data]))
  const link = document.createElement('a')
  link.style.display = 'none'
  link.href = url
  link.setAttribute('download', fileName)
  document.body.appendChild(link)
  link.click()
   // document.body.removeChild(link) 记得要手动清除
}
processData(data)

被遗忘的计时器或回调

var times = new Date(); 
setInterval(function() { 
    var dom = document.getElementById('XXXX'); 
    if(dom) { 
        // 处理 dom 和 times 
        node.innerHTML = JSON.stringify(times)); 
    } 
}, 1000);

内存泄漏查找方式
调试工具——Memory——Profiles——Take snapshot

内存溢出

内存溢出(Out Of Memory，简称OOM)是指应用系统中存在无法回收的内存或使用的内存过多，最终使得程序运行要用到的内存大于能提供的最大内存。此时程序就运行不了，系统会提示内存溢出，有时候会自动关闭软件，重启电脑或者软件后释放掉一部分内存又可以正常运行该软件，而由系统配置、数据流、用户代码等原因而导致的内存溢出错误，即使用户重新执行任务依然无法避免。
前端内存溢出问题：
程序运行出现的错误，就像水杯，满了之后再加水就溢出了。同理，内存溢出就是程序运行所需的内存大于可用内存，就出现内存溢出错误。
最简单的就是写一个千万级别的循环，然后用浏览器打开，浏览器会非常卡，甚至直接报错内存不足，崩溃了。不同浏览器会有不同的表现。
内存溢出一般是内存泄漏造成的，占用的内存不需要用到了但是没有及时释放，内存泄漏积累的多了轻的话影响系统性能，严重直接引起内存溢出系统崩溃。