JavaScript 內存泄漏

轉載自：http://www.ruanyifeng.com/blog/2017/04/memory-leak.html

1、什麼是內存泄漏？

程序的運行須要內存。只要程序提出要求，操做系統或者運行時（runtime）就必須供給內存。
對於持續運行的服務進程（daemon），必須及時釋放再也不用到的內存。不然，內存佔用愈來愈高，輕則影響系統性能，重則致使進程崩潰。

再也不用到的內存，沒有及時釋放，就叫作內存泄漏（memory leak）。
有些語言（好比 C 語言）必須手動釋放內存，程序員負責內存管理。

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

// Do something with buffer

free(buffer);

上面是 C 語言代碼，malloc方法用來申請內存，使用完畢以後，必須本身用free方法釋放內存。
這很麻煩，因此大多數語言提供自動內存管理，減輕程序員的負擔，這被稱爲"垃圾回收機制"（garbage collector）。

2、垃圾回收機制

垃圾回收機制怎麼知道，哪些內存再也不須要呢？
最常使用的方法叫作"引用計數"（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]引用，這塊內存就能夠被垃圾回收機制釋放了。

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

上面代碼中，arr重置爲null，就解除了對[1, 2, 3, 4]的引用，引用次數變成了0，內存就能夠釋放出來了。
所以，並非說有了垃圾回收機制，程序員就輕鬆了。你仍是須要關注內存佔用：那些很佔空間的值，一旦再也不用到，你必須檢查是否還存在對它們的引用。若是是的話，就必須手動解除引用。

3、內存泄漏的識別方法

怎樣能夠觀察到內存泄漏呢？
經驗法則是，若是連續五次垃圾回收以後，內存佔用一次比一次大，就有內存泄漏。這就要求實時查看內存佔用。

3.1 瀏覽器

Chrome 瀏覽器查看內存佔用，按照如下步驟操做。

• 打開開發者工具，選擇 Timeline 面板
• 在頂部的Capture字段裏面勾選 Memory
• 點擊左上角的錄製按鈕。
• 在頁面上進行各類操做，模擬用戶的使用狀況。
• 一段時間後，點擊對話框的 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字段爲準。

4、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。

5、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

> const 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 內部的引用，就會自動被垃圾回收清除。因而可知，有了它的幫助，解決內存泄漏就會簡單不少。
===================分割線，以上爲阮神的博客內容，看了以後，本人仍是沒能理解，因此，繼續查找了其餘的資料和博客=========================

Mark-and-sweep算法

大多數的垃圾收集器（簡稱 GC）使用一個叫作 mark-and-sweep 的算法。

JavaScript內存分配和回收的關鍵詞：GC根、做用域

GC根

通常指全局且不會被垃圾回收的對象。好比：window、document或者是頁面上存在的dom元素。JavaScript的垃圾回收算法會判斷某塊對象內存是不是GC根可達（存在一條由GC根對象到該對象的引用），若是不是那這塊內存將會被標記回收。

做用域

在JavaScript的做用域裏，咱們可以新建對象來分配內存。好比說調用函數，函數執行的過程當中就會建立一塊做用域，若是是建立的是做用域內的局部對象，看成用域運行結束後，全部的局部對象（GC根沒法觸及）都會被標記回收，在JavaScript中能引發做用域分配的有函數調用、with和全局做用域。

做用域的分類：局部做用域、全局做用域、閉包做用域

局部做用域

數調用會建立局部做用域，在局部做用域中的新建的對象，若是函數運行結束後，該對象沒有做用域外部的引用，那該對象將會標記回收

全局做用域

每一個JavaScript進程都會有一個全局做用域，全局做用域上的引用的對象都是常駐內存的，直到進程退出內存纔會自動釋放。

手動釋放全局做用域上的引用的對象有兩種方式：

global.foo = undefined

從新賦值改變引用

delete global.foo

刪除對象屬性

閉包做用域

在JavaScript語言中有閉包的概念,**閉包指的是包含自由變量的代碼塊、自由變量不是在這個代碼塊內或者任何全局上下文中定義的，而是在定義代碼塊的環境中定義（局部變量）。

var closure = (function(){
    //這裏是閉包的做用域
    var i = 0 // i就是自由變量
    return function（）{
        console.log(i++)
    }
})()

閉包做用域會保持對自由變量的引用。上面代碼的引用鏈就是:

window -> closure -> i

閉包做用域還有一個重要的概念，閉包對象是當前做用域中的全部內部函數做用域共享的，而且這個當前做用域的閉包對象中除了包含一條指向上一層做用域閉包對象的引用外，其他的存儲的變量引用必定是當前做用域中的全部內部函數做用域中使用到的變量 ==========寫不下去了。。。。下次再完善==========