[摘譯]js記憶體洩漏常見的四種情況

LeuisKen發表於2016-04-08

本文主要選取了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);

這樣的程式碼很常見, 如果idNode的元素從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 = nullsomeMessage = '123', 我們設函式結束時, theThing的值為theThing_1.

第二次呼叫replaceThing, 如果我們的假設成立, originalThing = theThing_1someMessage = '123'.我們設第二次呼叫函式結束時, theThing的值為theThing_2.注意, 此時的originalThing儲存著theThing_1, theThing_1包含著和theThing_2截然不同的someMethod, theThing_1someMethod中包含一個someMessage, 同樣如果我們的假設成立, 第一次的originalThing = null應該也在.

所以, 如果我們的假設成立, 第二次呼叫以後, 記憶體中有theThing_1theThing_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中定義的變數是儲存在一起的, 所以就漏了.

如果我沒有說明第四種情況, 可以參考以下連結, 或是在評論區評論.

參考連結

相關文章