JavaScript 記憶體洩漏教程

阮一峰發表於2017-04-16
JavaScript記憶體

一、什麼是記憶體洩漏？

程式的執行需要記憶體。只要程式提出要求，作業系統或者執行時（runtime）就必須供給記憶體。

對於持續執行的服務程式（daemon），必須及時釋放不再用到的記憶體。否則，記憶體佔用越來越高，輕則影響系統效能，重則導致程式崩潰。

不再用到的記憶體，沒有及時釋放，就叫做記憶體洩漏（memory leak）。

有些語言（比如 C 語言）必須手動釋放記憶體，程式設計師負責記憶體管理。


char * buffer;
buffer = (char*) malloc(42);

// Do something with buffer

free(buffer);

上面是 C 語言程式碼，malloc方法用來申請記憶體，使用完畢之後，必須自己用free方法釋放記憶體。

這很麻煩，所以大多數語言提供自動記憶體管理，減輕程式設計師的負擔，這被稱為"垃圾回收機制"（garbage collector）。

二、垃圾回收機制

垃圾回收機制怎麼知道，哪些記憶體不再需要呢？

最常使用的方法叫做"引用計數"（reference counting）：語言引擎有一張"引用表"，儲存了記憶體裡面所有的資源（通常是各種值）的引用次數。如果一個值的引用次數是0，就表示這個值不再用到了，因此可以將這塊記憶體釋放。

上圖中，左下角的兩個值，沒有任何引用，所以可以釋放。

如果一個值不再需要了，引用數卻不為0，垃圾回收機制無法釋放這塊記憶體，從而導致記憶體洩漏。


const arr = [1, 2, 3, 4];
console.log('hello world');

上面程式碼中，陣列[1, 2, 3, 4]是一個值，會佔用記憶體。變數arr是僅有的對這個值的引用，因此引用次數為1。儘管後面的程式碼沒有用到arr，它還是會持續佔用記憶體。

如果增加一行程式碼，解除arr對[1, 2, 3, 4]引用，這塊記憶體就可以被垃圾回收機制釋放了。


let arr = [1, 2, 3, 4];
console.log('hello world');
arr = null;

上面程式碼中，arr重置為null，就解除了對[1, 2, 3, 4]的引用，引用次數變成了0，記憶體就可以釋放出來了。

因此，並不是說有了垃圾回收機制，程式設計師就輕鬆了。你還是需要關注記憶體佔用：那些很佔空間的值，一旦不再用到，你必須檢查是否還存在對它們的引用。如果是的話，就必須手動解除引用。

三、記憶體洩漏的識別方法

怎樣可以觀察到記憶體洩漏呢？

經驗法則是，如果連續五次垃圾回收之後，記憶體佔用一次比一次大，就有記憶體洩漏。這就要求實時檢視記憶體佔用。

3.1 瀏覽器

Chrome 瀏覽器檢視記憶體佔用，按照以下步驟操作。

  1. 開啟開發者工具，選擇 Timeline 皮膚
  2. 在頂部的Capture欄位裡面勾選 Memory
  3. 點選左上角的錄製按鈕。
  4. 在頁面上進行各種操作，模擬使用者的使用情況。
  5. 一段時間後，點選對話方塊的 stop 按鈕，皮膚上就會顯示這段時間的記憶體佔用情況。

如果記憶體佔用基本平穩，接近水平，就說明不存在記憶體洩漏。

反之，就是記憶體洩漏了。

3.2 命令列

命令列可以使用 Node 提供的process.memoryUsage方法。


console.log(process.memoryUsage());
// { rss: 27709440,
//  heapTotal: 5685248,
//  heapUsed: 3449392,
//  external: 8772 }

process.memoryUsage返回一個物件，包含了 Node 程式的記憶體佔用資訊。該物件包含四個欄位，單位是位元組，含義如下。

  • rss（resident set size）：所有記憶體佔用，包括指令區和堆疊。
  • heapTotal："堆"佔用的記憶體，包括用到的和沒用到的。
  • heapUsed：用到的堆的部分。
  • external： V8 引擎內部的 C++ 物件佔用的記憶體。

判斷記憶體洩漏，以heapUsed欄位為準。

四、WeakMap

前面說過，及時清除引用非常重要。但是，你不可能記得那麼多，有時候一疏忽就忘了，所以才有那麼多記憶體洩漏。

最好能有一種方法，在新建引用的時候就宣告，哪些引用必須手動清除，哪些引用可以忽略不計，當其他引用消失以後，垃圾回收機制就可以釋放記憶體。這樣就能大大減輕程式設計師的負擔，你只要清除主要引用就可以了。

ES6 考慮到了這一點，推出了兩種新的資料結構：WeakSet 和 WeakMap。它們對於值的引用都是不計入垃圾回收機制的，所以名字裡面才會有一個"Weak"，表示這是弱引用。

下面以 WeakMap 為例，看看它是怎麼解決記憶體洩漏的。


const wm = new WeakMap();

const element = document.getElementById('example');

wm.set(element, 'some information');
wm.get(element) // "some information"

上面程式碼中，先新建一個 Weakmap 例項。然後，將一個 DOM 節點作為鍵名存入該例項，並將一些附加資訊作為鍵值，一起存放在 WeakMap 裡面。這時，WeakMap 裡面對element的引用就是弱引用，不會被計入垃圾回收機制。

也就是說，DOM 節點物件的引用計數是1，而不是2。這時，一旦消除對該節點的引用，它佔用的記憶體就會被垃圾回收機制釋放。Weakmap 儲存的這個鍵值對，也會自動消失。

基本上，如果你要往物件上新增資料，又不想干擾垃圾回收機制，就可以使用 WeakMap。

五、WeakMap 示例

WeakMap 的例子很難演示，因為無法觀察它裡面的引用會自動消失。此時，其他引用都解除了，已經沒有引用指向 WeakMap 的鍵名了，導致無法證實那個鍵名是不是存在。

我一直想不出辦法，直到有一天賀師俊老師提示，如果引用所指向的值佔用特別多的記憶體，就可以透過process.memoryUsage方法看出來。

根據這個思路，網友 vtxf 補充了下面的例子。

首先，開啟 Node 命令列。


$ node --expose-gc

上面程式碼中，--expose-gc參數列示允許手動執行垃圾回收機制。

然後，執行下面的程式碼。


// 手動執行一次垃圾回收，保證獲取的記憶體使用狀態準確
> global.gc(); 
undefined

// 檢視記憶體佔用的初始狀態，heapUsed 為 4M 左右
> process.memoryUsage(); 
{ rss: 21106688,
  heapTotal: 7376896,
  heapUsed: 4153936,
  external: 9059 }

> let wm = new WeakMap();
undefined

> let b = new Object();
undefined

> global.gc();
undefined

// 此時，heapUsed 仍然為 4M 左右
> process.memoryUsage(); 
{ rss: 20537344,
  heapTotal: 9474048,
  heapUsed: 3967272,
  external: 8993 }

// 在 WeakMap 中新增一個鍵值對，
// 鍵名為物件 b，鍵值為一個 5*1024*1024 的陣列  
> wm.set(b, new Array(5*1024*1024));
WeakMap {}

// 手動執行一次垃圾回收
> global.gc();
undefined

// 此時，heapUsed 為 45M 左右
> process.memoryUsage(); 
{ rss: 62652416,
  heapTotal: 51437568,
  heapUsed: 45911664,
  external: 8951 }

// 解除物件 b 的引用  
> b = null;
null

// 再次執行垃圾回收
> global.gc();
undefined

// 解除 b 的引用以後，heapUsed 變回 4M 左右
// 說明 WeakMap 中的那個長度為 5*1024*1024 的陣列被銷燬了
> process.memoryUsage(); 
{ rss: 20639744,
  heapTotal: 8425472,
  heapUsed: 3979792,
  external: 8956 }

上面程式碼中，只要外部的引用消失，WeakMap 內部的引用，就會自動被垃圾回收清除。由此可見，有了它的幫助，解決記憶體洩漏就會簡單很多。

六、參考連結

（完）

相關文章