JS 内存管理

2021-07-15 18:45:28

平时投入业务逻辑比较多，有段时间没有关注这些底层的知识了，看完之后，感觉再也不能愉快地写js了。之前倒是关注js语言自身语法陷阱多一些，开发过程中通过JSLinter 或 Eslinter等工具，基本可以避免这些问题，不过倒是很少关心js内存管理等这方面的内容，幸运的是，从2012年起，所有现代浏览器都使用了标记-清除垃圾回收算法，对我这种对这些方面关注比较少的同学来说算是命好了…

不过跟前同事交流时，说是以前老旧的浏览器（指老的IE）可能有内存泄漏，例如给dom元素绑定了事件，后来删除了dom，但是没有主动移除事件。现在的浏览器基本上不会有内存泄漏了。

PS: 当然, 本文只是针对浏览器端的js，至于V8的垃圾回收和内存限制，这里暂不讨论

简介

诸如 C 语言这般的低级语言一般都有低级的内存管理原语，比如 malloc() 和 free()。而另外一些高级语言，比如 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 的结果

值的使用

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

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

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

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

垃圾回收

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

引用

垃圾回收算法主要依赖于引用（reference）的概念。在内存管理的环境中，一个对象如果有访问另一个对象的权限（隐式或者显式），叫做一个对象引用另一个对象。例如，一个Javascript对象具有对它原型的引用（隐式引用）和对它属性的引用（显式引用）。

在这里，“对象”的概念不仅特指 JavaScript 对象，还包括函数作用域（或者全局词法作用域）。

引用计数垃圾收集

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

示例

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


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

o = 1;      // 现在，“这个对象”的原始引用o被o2替换了

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 和其事件处理无法从根获取到，他们将会被垃圾回收器回收
。

限制: 那些无法从根对象查询到的对象都将被清除

尽管这是一个限制，但实践中我们很少会碰到类似的情况，所以开发者不太会去关心垃圾回收机制。

参考

IBM article on “Memory leak patterns in JavaScript” (2007)
Kangax article on how to register event handler and avoid memory leaks (2010)
Performance
其他参考：
javascript的垃圾回收机制 (比我小点儿，目测比我牛多了的小哥，值得学习)

码农公寓

简介