一个意想不到的Javascript内存泄漏

原文：http://point.davidglasser.net/2013/06/27/surprising-javascript-memory-leak.html

本周我在Meter的同事追踪到了一个奇怪的Javascript内存泄漏。我找遍了互联网，尝试了各种关键字：javascript closure memory leak，无果。所以，这可能是一个未知的问题。（你们所找到的都是讲老版本的IE的垃圾回收算法的问题，但是我碰到的这个问题甚至影响到我当前装的最新Chrome浏览器。）

Update:Vyacheslav Egorov向我指出他曾经写过的一篇同样主题的文章，这篇文章有更详细的样例，更好的配图，加上一些V8内部机制的知识，很棒的一篇文章。甚至，还有一篇论文专门来讲这个问题的最佳实现方式，但是这篇文章并不是用Javascipt来说明的。

考虑如下代码:

var run = function () {
  var str = new Array(1000000).join('*');
  var doSomethingWithStr = function () {
    if (str === 'something')
      console.log("str was something");
  };
  doSomethingWithStr();
};
setInterval(run, 1000);

 

 每一秒钟执行一次run函数，它会申请一个巨大的字符串，创建一个闭包来使用它，调用闭包，然后返回。闭包返回之后，它会被垃圾回收，因为没有什么引用str对象了，所以str也被回收。 但是如果我们在run里面持续调用闭包呢？

var run = function () {
  var str = new Array(1000000).join('*');
  var logIt = function () {
    console.log('interval');
  };
  setInterval(logIt, 100);
};
setInterval(run, 1000);

 

 每一秒钟run申请一个巨大的字符串，并且在内部调用logIt 10次,logIt持续运行，而str在它的词法作用域内，所以这可能构成内存泄漏。 幸运的是，JavaScript的引擎（至少在最新的Chrome）足够聪明，它能检测到logIt并没有使用到str，所以str不会被放到logIt的词法作用域环境，所以呢每次run结束后，str被GC是没有问题的。 太棒了，JavaScript能帮助我们防止内存泄漏，对吗？让我们来点更复杂的，把前两个例子合并起来。

var run = function () {
  var str = new Array(1000000).join('*');
  var doSomethingWithStr = function () {
    if (str === 'something')
      console.log("str was something");
  };
  doSomethingWithStr();
  var logIt = function () {
    console.log('interval');
  }
  setInterval(logIt, 100);
};
setInterval(run, 1000);

 

打开Chrome开发者工具，切换到Memory View视图，然后点record。

看起来每秒钟都会增加1M的内存使用，甚至点击垃圾回收按钮来强直GC也不起作用，所以看起来str泄漏了。 不过这个看起来不是和之前的一样的情形吗，str只被run和doSomethingWithStr引用了。一旦run运行结束，doSomeThingWithStr会被回收。run里唯一一个引起泄漏的便是第二个闭包：logIt，并且logIt根本没指向str。 所以，尽管没有任何代码指向str，它也没有被GC，为什么呢？

好吧，闭包的典型实现是每一个函数对象有一个类似字典的对象来代表它的词法环境。如果定义在run里的函数确实使用了str，即使str被一次又一次的赋值，它也能保证两者引用的是相同的对象。如果变量没有被任何闭包使用的话，V8引擎足够聪明来让变量在函数的词法环境之外，所以第一个示例没有发生内存泄漏。 但是一旦一个变量被任一个闭包使用了，它会在所有的闭包词法环境结束之后才被释放，这会导致内存泄漏。

 

到这里，你能想到一个更智能的词法环境的实现来避免这个问题。每一个闭包用一个字典记录它真正使用的变量，字典里的变量应当是一个可变单元，能被多个闭包共享词法环境。根据我阅读ECMA V5文档，这个方法是的合法的。ECMA文档指出词法环境是纯粹的规范机制，而不需要与EcmaScript的实现保持一致。

 

我们在Meter碰到的问题看起来是这样：我们只是希望用一个新对象取代一个对象，并且原来的对象被释放。

var theThing = null;
var replaceThing = function () {
  var originalThing = theThing;
  // 定义一个引用originalThing的闭包但是没有真正调用的
  // 但是因为闭包的存在，originalThing会在词法环境中
  //所有定义在replaceThing的闭包都能访问。
  //你把这个函数去掉，就没有泄漏了。
  var unused = function () {
    if (originalThing)
      console.log("hi");
  };
  theThing = {
    longStr: new Array(1000000).join('*'),
    // originalThing理论上会被这个someMethod使用
    //虽然很明显这个函数没有使用它。
    //但是因为originalThing是词法作用域的一部分，someMethod会保持对originalThing的引用。
    //尽管我们每次调用都会把theThing覆盖但是原先的值永远不会被清除。
    someMethod: function () {}
  };
  // 如果你在这里加上 `originalThing = null` 就不会泄漏了
};
setInterval(replaceThing, 1000);

 

很显然someMethod是个闭包，repalceThing执行结束后，因为theThing还引用着someMethod，originalThing就不会被释放。

一旦了解了这些，解决这个问题就很简单了。总结一下：如果你有一个大的对象被一些闭包使用，但是不是每一个闭包使用。只要保证使用完后本地变量不再指向它。不幸的是，这些Bug很难察觉。如果Javascript能让你不用考虑就好了。