[摘譯]js內存泄漏常見的四種狀況

本文主要選取了4 Types of Memory Leaks in JavaScript and How to Get Rid Of Them 這篇文章中的一小部分來講明一下js中產生內存泄漏的常見狀況. 對於較難理解的第四種狀況, 參考了一些文章來進行說明.

意外的全局變量

js中若是不用var聲明變量,該變量將被視爲window對象(全局對象)的屬性,也就是全局變量.

function foo(arg) {
    bar = "this is a hidden global variable";
}

// 上面的函數等價於
function foo(arg) {
    window.bar = "this is an explicit global variable";
}

因此,你調用完了函數之後,變量仍然存在,致使泄漏.

若是不注意this的話,還可能會這麼漏:

function foo() {
    this.variable = "potential accidental global";
}

// 沒有對象調用foo, 也沒有給它綁定this, 因此this是window
foo();

你能夠經過加上'use strict'啓用嚴格模式來避免這類問題, 嚴格模式會組織你建立意外的全局變量.

被遺忘的定時器或者回調

var someResource = getData();
setInterval(function() {
    var node = document.getElementById('Node');
    if(node) {
        node.innerHTML = JSON.stringify(someResource));
    }
}, 1000);

這樣的代碼很常見, 若是id爲Node的元素從DOM中移除, 該定時器仍會存在, 同時, 由於回調函數中包含對someResource的引用, 定時器外面的someResource也不會被釋放.

沒有清理的DOM元素引用

var elements = {
    button: document.getElementById('button'),
    image: document.getElementById('image'),
    text: document.getElementById('text')
};

function doStuff() {
    image.src = 'http://some.url/image';
    button.click();
    console.log(text.innerHTML);
}

function removeButton() {
    document.body.removeChild(document.getElementById('button'));
    
    // 雖然咱們用removeChild移除了button, 可是還在elements對象裏保存着#button的引用
    // 換言之, DOM元素還在內存裏面.
}

閉包

先看這樣一段代碼:

var theThing = null;
var replaceThing = function () {
  var someMessage = '123'
  theThing = {
    someMethod: function () {
      console.log(someMessage);
    }
  };
};

調用replaceThing以後, 調用theThing.someMethod, 會輸出123, 基本的閉包, 我想到這裏應該不難理解.

解釋一下的話, theThing包含一個someMethod方法, 該方法引用了函數中的someMessage變量, 因此函數中的someMessage變量不會被回收, 調用someMethod能夠拿到它正確的console.log出來.

接下來我這麼改一下:

var theThing = null;
var replaceThing = function () {
  var originalThing = theThing;
  var someMessage = '123'
  theThing = {
    longStr: new Array(1000000).join('*'),        // 大概佔用1MB內存
    someMethod: function () {
      console.log(someMessage);
    }
  };
};

咱們先作一個假設, 若是函數中全部的私有變量, 無論someMethod用不用, 都被放進閉包的話, 那麼會發生什麼呢.

第一次調用replaceThing, 閉包中包含originalThing = null和someMessage = '123', 咱們設函數結束時, theThing的值爲theThing_1.

第二次調用replaceThing, 若是咱們的假設成立, originalThing = theThing_1和someMessage = '123'.咱們設第二次調用函數結束時, theThing的值爲theThing_2.注意, 此時的originalThing保存着theThing_1, theThing_1包含着和theThing_2大相徑庭的someMethod, theThing_1的someMethod中包含一個someMessage, 一樣若是咱們的假設成立, 第一次的originalThing = null應該也在.

因此, 若是咱們的假設成立, 第二次調用之後, 內存中有theThing_1和theThing_2, 由於他們都是靠longStr把佔用內存撐起來, 因此第二次調用之後, 內存消耗比第一次多1MB.

若是你親自試了(使用Chrome的Profiles查看每次調用後的內存快照), 會發現咱們的假設是不成立的, 瀏覽器很聰明, 它只會把someMethod用到的變量保存下來, 用不到的就不保存了, 這爲咱們節省了內存.

但若是咱們這麼寫:

var theThing = null;
var replaceThing = function () {
  var originalThing = theThing;
  var unused = function () {
    if (originalThing)
      console.log("hi");
  };
  var someMessage = '123'
  theThing = {
    longStr: new Array(1000000).join('*'),
    someMethod: function () {
      console.log(someMessage);
    }
  };
};

unused這個函數咱們沒有用到, 可是它用了originalThing變量, 接下來, 若是你一次次調用replaceThing, 你會看到內存1MB 1MB的漲.

也就是說, 雖然咱們沒有使用unused, 可是由於它使用了originalThing, 使得它也被放進閉包了, 內存漏了.

強烈建議讀者親自試試在這幾種狀況下產生的內存變化.

這種狀況產生的緣由, 通俗講, 是由於不管someMethod仍是unused, 他們其中所須要用到的在replaceThing中定義的變量是保存在一塊兒的, 因此就漏了.

若是我沒有說明第四種狀況, 能夠參考如下連接, 或是在評論區評論.

參考連接

• An interesting kind of JavaScript memory leak

• 一個意想不到的Javascript內存泄漏

• Grokking V8 closures for fun (and profit?)