JavaScript 記憶體流失教程

標籤：時間   顯示   技術   存在   buffer   沒有   ons   -o   3.1   

一、什麼是記憶體流失？

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

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

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

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

char * buffer;buffer = (char*) malloc(42);// Do something with bufferfree(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 內部的引用，就會自動被記憶體回收清除。由此可見，有了它的協助，解決記憶體流失就會簡單很多。

JavaScript 記憶體流失教程