JavaScript 工作原理（一）——内存管理与四种常见内存泄漏的处理方法

转载：JavaScript 工作原理（一）——内存管理与四种常见内存泄漏的处理方法

概述

像 C 语言，拥有底层原始的内存管理方法，例如：malloc() 和 free()。这些原始的方法被开发者用来从操作系统中分配内存和释放内存。

然而，JavaScript 当一些东西（objects，strings，etc.）被创建的时候分配内存并且当它们不再被使用的时候“自动”释放它们，这个过程被称为垃圾回收。

释放资源的这种看似“自动”的性质是造成困扰的根源。它给 JavaScript （和其它高级语言）开发者一个错误的印象——他们可以选择不关心内存管理。这是一个很大的错误。

即使是使用高级语言，开发者对内存管理也应该有所了解（至少要有基础的了解）。有时，开发者必须理解自动内存管理会遇到问题（例如：垃圾回收中的错误或者性能问题等），以便能够正确处理它们。（或者是找到适当的解决方法，用最小的代价去解决。）

内存的生命周期

无论你使用那种语言，内存的生命周期基本是都差不多：
在这里插入图片描述

一下是生命周期中每一步发生了什么的一个概述：

Allocate memory —— 操作系统分配内存，允许你的程序使用它。在基础语言中（例如 C ），这是一个开发者自己处理的明确操作。然而，在高级语言中，它已经为你处理了。
Use memory —— 现在你就可以使用之前分配好的内存了。当你在代码中使用变量时，读和写的操作正在发生。
Release memory —— 现在该释放你不再需要的内存了，以便它们能够被再次使用。与分配内存的操作一样，这种操作在基础语言中是明确执行的。

引用计数——垃圾回收

这是最简单的垃圾回收算法。如果一个对象指向它的引用数为 0，那么它就应该被“垃圾回收”了。

循环依赖造成的问题
出现循环依赖就会产生限制。在以下的示例中，将创建两个对象并引用彼此，从而创建了一个循环。在函数调用之后，它们离开了作用域，因此它们实际上已经无用了，可以被释放了。然而，引用计数算法认为，由于两个对象中的每一个至少被引用了一次，所以也不能被垃圾回收。

function f() {
  var o1 = {};
  var o2 = {};
  o1.p = o2; // o1 references o2
  o2.p = o1; // o2 references o1. This creates a cycle.
}
 
f();

在这里插入图片描述

标记扫描算法

为了确定一个对象是否被需要，这个算法会确定对象是否可以访问。

该算法由以下步骤组成：

垃圾回收器构建“roots”列表。Roots 通常是代码中保留引用的全局变量。在 JavaScript 中，“window” 对象可以作为 root 全局变量示例。
所有的 roots 被检查并标记为 active（即不是垃圾）。所有的 children 也被递归检查。从 root 能够到达的一切都不被认为是垃圾。
所有为被标记为 active 的内存可以被认为是垃圾了。收集器限制可以释放这些内存并将其返回到操作系统。

这个算法优于前一个，因为“一个对象零引用”会让这个对象不是可达的。反过来就不一定对了，因为存在循环引用。

截至 2012 年，所有现代浏览器都配备了 mark-and-sweep 机制的垃圾回收器。过去几年，JavaScript 垃圾回收（代数、增量、并行、并行垃圾收集）领域的所有改进都是对该算法（mark-and-sweep）的实现进行改进，但并没有对垃圾回收算法本身进行改进，其目标是确定一个对象是否可达。

什么是内存泄漏

实质上，内存泄漏可以被定义为应用程序不再需要的内存，但由于某种原因，内存不会返回到操作系统或可用内存池中。

编程语言支持多种管理内存的方法。然而，某块内存是否被使用实际上是一个不确定的问题。换句话说，只有开发人员可以清楚一块内存是否可以释放到操作系统又或者不该被释放。

四种常见的 JavaScript 内存泄漏

1：Global variables

JavaScript 以有趣的方式处理未声明的变量：对未声明的变量的引用在全局对象内创建一个新变量。在浏览器中，全局对象就是 window。换种说法：

function foo(arg) {
    bar = "some text";
}

如果 bar 被假定为仅仅在函数 foo 的作用域范围内持有对变量的引用，但是你却忘记了使用 var 来声明它，那么就会创建一个意外的全局变量。

在这个例子中，泄漏一个简单的字符串不会有太大的伤害，但肯定会变得更糟的。

为了防止这些错误的发生，可以在 JavaScript 文件开头添加 “use strict”，使用严格模式。这样在严格模式下解析 JavaScript 可以防止意外的全局变量。

即使我们讨论了如何预防意外全局变量的产生，但是仍然会有很多代码用显示的方式去使用全局变量。这些全局变量是无法进行垃圾回收的（除非将它们赋值为 null 或重新进行分配）。特别是用来临时存储和处理大量信息的全局变量非常值得关注。如果你必须使用全局变量来存储大量数据，那么，请确保在使用完之后，对其赋值为 null 或者重新分配。

2：被忘记的 Timers 或者 callbacks

在 JavaScript 中使用 setInterval 非常常见。

大多数库都会提供观察者或者其它工具来处理回调函数，在他们自己的实例变为不可达时，会让回调函数也变为不可达的。对于 setInterval，下面这样的代码是非常常见的：


var serverData = loadData();
setInterval(function() {
    var renderer = document.getElementById('renderer');
    if(renderer) {
        renderer.innerHTML = JSON.stringify(serverData);
    }
}, 5000);

renderer 可能在将来会被移除，使得 interval 内的整个块都不再被需要。但是，interval handler 因为 interval 的存活，所以无法被回收（需要停止 interval，才能回收）。如果 interval handler 无法被回收，则它的依赖也不能被回收。这意味着 serverData——可能存储了大量数据，也不能被回收。在观察者模式下，重要的是在他们不再被需要的时候显式地去删除它们（或者让相关对象变为不可达）。

3：闭包

JavaScript 开发的一个关键方面就是闭包：一个可以访问外部（封闭）函数变量的内部函数。由于 JavaScript 运行时的实现细节，可以通过以下方式泄漏内存：


var theThing = null;
var replaceThing = function () {
  var originalThing = theThing;
  var unused = function () {
    if (originalThing) // a reference to 'originalThing'
      console.log("hi");
  };
  theThing = {
    longStr: new Array(1000000).join('*'),
    someMethod: function () {
      console.log("message");
    }
  };
};
setInterval(replaceThing, 1000);

这个代码片段做了一件事：每次调用 replaceThing 时，theThing 都会获得一个新对象，它包含一个大的数组和一个新的闭包（someMethod）。同时，变量 unused 保留了一个拥有 originalThing 引用的闭包（前一次调用 theThing 赋值给了 originalThing）。已经有点混乱了吗？重要的是，一旦一个作用域被创建为闭包，那么它的父作用域将被共享。

4：DOM 引用

有时候，在数据结构中存储 DOM 结构是有用的。假设要快速更新表中的几行内容。将每行 DOM 的引用存储在字典或数组中可能是有意义的。当这种情况发生时，就会保留同一 DOM 元素的两份引用：一个在 DOM 树种，另一个在字典中。如果将来某个时候你决定要删除这些行，则需要让两个引用都不可达。


var elements = {
    button: document.getElementById('button'),
    image: document.getElementById('image')
};
function doStuff() {
    elements.image.src = 'http://example.com/image_name.png';
}
function removeImage() {
    // The image is a direct child of the body element.
    document.body.removeChild(document.getElementById('image'));
    // At this point, we still have a reference to #button in the
    //global elements object. In other words, the button element is
    //still in memory and cannot be collected by the GC.
}

还有一个额外的考虑，当涉及 DOM 树内部或叶子节点的引用时，必须考虑这一点。假设你在 JavaScript 代码中保留了对 table 特定单元格（）的引用。有一天，你决定从 DOM 中删除该 table，但扔保留着对该单元格的引用。直观地来看，可以假设 GC 将收集除了该单元格之外所有的内容。实际上，这不会发生的：该单元格是该 table 的子节点，并且 children 保持着对它们 parents 的引用。也就是说，在 JavaScript 代码中对单元格的引用会导致整个表都保留在内存中的。保留 DOM 元素的引用时，需要仔细考虑。

=====================