[JavaScript 隨筆] 垃圾回收

ConardLi 發(fā)布于2019-08-21 10:38 / 2299人閱讀

摘要：在中，由于垃圾回收是自動進行的，所以人們在編碼時可能不太會注意這方面。時，引擎統(tǒng)一對所有這些狀態(tài)的對象進行回收。，表示釋放該對象后能得到的內(nèi)存大小。

在 JavaScript 中，由于垃圾回收是自動進行的，所以人們在編碼時可能不太會注意這方面。但事實是，一些 webapp 在使用一段時間后，會出現(xiàn)卡頓的現(xiàn)象，特別是那些單頁應(yīng)用，包括 WebView 方式的手機 app 。這個現(xiàn)象在傳統(tǒng)的“單擊 - 刷新”類型的頁面中并不明顯，因為頁面刷新之后，所有沒有被回收的垃圾對象也會被清除，但是在單頁應(yīng)用中，如果沒有手動去點瀏覽器的刷新按鈕，那么就算是很小的內(nèi)存泄露，隨著頁面停留時間的增長，累積的泄露會越來越多，在手機上的感覺就更明顯了。

所以這里想討論一下內(nèi)存泄露是如何發(fā)生的，以及如何去避免。

開門見山，一般有兩種方式的垃圾回收機制，一個是“引用計數(shù)”，當一個對象被引用的次數(shù)為 0 時，該對象就可以被回收；另一個是“標記清除”，當一個對象不能再被訪問到時，對該對象進行標記，等下一輪 GC 事件發(fā)生時，這些對象就會被清除。從 2012 年起，所有的現(xiàn)代瀏覽器都是基于“標記清除”的回收算法，所以，如果需要兼容更早的瀏覽器，可能需要做更多的事。GC 的時機由 JS 引擎決定，需要知道的事，當 GC 進行時，主線程會被阻塞，這個時間可以通過 Chrome 的 Timeline 工具看到，最少也會超過 10 ms 吧。

Chrome DevTools - Timeline

在 Chrome 中可以很直觀方便地看到垃圾回收事件的執(zhí)行。打開 Chrome 的 Timeline，只需要勾選“Memory”就可以了，并且在左邊的 View 中選中第二個。

然后單擊放大鏡下面的圓點，這時候 Chrome 會開始記錄內(nèi)存分配、繪制等事件，等你打開一張頁面，比如百度吧，再單擊這個圓點（現(xiàn)在應(yīng)該是紅色的了），就會看到一條藍色的折線。不同頁面不一樣，但幾乎都會有一個突然下降的地方，比如下圖中 1200 ms 左邊的地方，單擊它，就能在下方顯示 GC 事件所用的時間，以及它回收了多少內(nèi)存。

如果你看到自己網(wǎng)站的這條藍色折線是呈上升趨勢，在不斷的 GC 后，內(nèi)存還是在上升，就極有可能是發(fā)生了內(nèi)存泄露，需要排查一下代碼。

引用計數(shù)

這里的問題在于“循環(huán)引用”，如果對象 a 的屬性引用了 b，而 b 的屬性引用了 a，由于引擎只有在變量的引用次數(shù)為 0 的情況下才會回收，這里 a 和 b 的引用次數(shù)至少有 1，所以就算它們所在的函數(shù)執(zhí)行完了，這兩個變量還是無法被回收掉。

function foo() {
  var a = {},
      b = {};
      
  a.attr = b;
  b.attr = a;
}

foo();

當 foo 函數(shù)執(zhí)行很多次之后，就會有很多個無法被回收的 a 和 b 存在。

實際情況可能是這樣的：

function foo() {
  var text = document.getElementById("input-text");

  text.onfocus = function() {
    text.value = "";
  }
}

foo();

意思是，當光標移到輸入框時，清空原有的內(nèi)容。考慮 text 變量和 foo 里面的匿名函數(shù)，text 的 onfocus 屬性引用了匿名函數(shù)，而該匿名函數(shù)引用了 text 變量（循環(huán)了），所以當 foo 執(zhí)行結(jié)束后，這兩個對象由于引用次數(shù)大于 0 而無法被回收。

對于這種情況，只需要在 foo 的末尾對 text 變量置空就可以了。

text = null;

如果你用 Chrome 運行這個例子的話，會看到藍線還是降到初始的高度了，因為 Chrome 是基于“標記清除”的算法來回收內(nèi)存的，所以不會有“循環(huán)引用”的問題。

標記清除

對于標記清除，心中要想象一個樹，每個頁面都存在一個根，每當一個函數(shù)執(zhí)行，就會生成一個節(jié)點。自然，嵌套的函數(shù)調(diào)用就會有子節(jié)點。一般情況下（沒有閉包），當函數(shù)執(zhí)行完時，內(nèi)部的變量都是無法被其他代碼訪問的，所以它就被標記為“無法被訪問”。GC 時，JS 引擎統(tǒng)一對所有這些狀態(tài)的對象進行回收。

介紹兩個概念。Shallow Size，表示該對象本身占用的內(nèi)存。Retained Size，表示釋放該對象后能得到的內(nèi)存大小。什么意思？比如上圖綠色的 #3，這個綠色的面積就是 Shallow Size。釋放 #3 后，#4 和 #5 也會被釋放，所以 Retained Size 就是 #3、#4、#5 的總大小。

在“標記清除”算法中，難點是如何判斷一個對象已經(jīng)是“無法被訪問”了。

DOM 片段

如果用樹去分析垃圾回收，會發(fā)現(xiàn)其實我們需要做的事情很少，因為當一個函數(shù)執(zhí)行完之后，它連帶的對象都會被清除。就算有閉包，當引用該閉包的函數(shù)執(zhí)行完時，這些閉包也同樣會被標記。

那么在哪里會發(fā)生內(nèi)存泄露呢？看這個例子。

var btn = document.getElementById("btn");

btn.onclick = function() {
  var fragment = document.createElement("div");
}

它表示每單擊一次按鈕，就創(chuàng)建一個

，它沒有引用任何對象，但是回調(diào)結(jié)束之后，這個空的

是不會被回收的。

DOM 事件

var content = document.getElementById("content");
content.innerHTML = "";

var button = document.getElementById("button");
button.addEventListener("click", function() {});

content.innerHTML = "";

這段代碼過后，雖然