JavaScript中內(nèi)存泄漏怎么辦

這篇文章主要介紹JavaScript中內(nèi)存泄漏怎么辦，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

一、什么是內(nèi)存泄漏？

程序的運(yùn)行需要內(nèi)存。只要程序提出要求，操作系統(tǒng)或者運(yùn)行時(shí)（runtime）就必須供給內(nèi)存。

對于持續(xù)運(yùn)行的服務(wù)進(jìn)程（daemon），必須及時(shí)釋放不再用到的內(nèi)存。否則，內(nèi)存占用越來越高，輕則影響系統(tǒng)性能，重則導(dǎo)致進(jìn)程崩潰。

不再用到的內(nèi)存，沒有及時(shí)釋放，就叫做內(nèi)存泄漏（memory leak）。

有些語言（比如 C 語言）必須手動(dòng)釋放內(nèi)存，程序員負(fù)責(zé)內(nèi)存管理。

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

// Do something with buffer

free(buffer);

上面是 C 語言代碼，malloc方法用來申請內(nèi)存，使用完畢之后，必須自己用free方法釋放內(nèi)存。

這很麻煩，所以大多數(shù)語言提供自動(dòng)內(nèi)存管理，減輕程序員的負(fù)擔(dān)，這被稱為"垃圾回收機(jī)制"（garbage collector）。

二、垃圾回收機(jī)制

垃圾回收機(jī)制怎么知道，哪些內(nèi)存不再需要呢？

最常使用的方法叫做"引用計(jì)數(shù)"（reference counting）：語言引擎有一張"引用表"，保存了內(nèi)存里面所有的資源（通常是各種值）的引用次數(shù)。如果一個(gè)值的引用次數(shù)是0，就表示這個(gè)值不再用到了，因此可以將這塊內(nèi)存釋放。

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

如果一個(gè)值不再需要了，引用數(shù)卻不為0，垃圾回收機(jī)制無法釋放這塊內(nèi)存，從而導(dǎo)致內(nèi)存泄漏。

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

上面代碼中，數(shù)組[1, 2, 3, 4]是一個(gè)值，會(huì)占用內(nèi)存。變量arr是僅有的對這個(gè)值的引用，因此引用次數(shù)為1。盡管后面的代碼沒有用到arr，它還是會(huì)持續(xù)占用內(nèi)存。

如果增加一行代碼，解除arr對[1, 2, 3, 4]引用，這塊內(nèi)存就可以被垃圾回收機(jī)制釋放了。

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

上面代碼中，arr重置為null，就解除了對[1, 2, 3, 4]的引用，引用次數(shù)變成了0，內(nèi)存就可以釋放出來了。

因此，并不是說有了垃圾回收機(jī)制，程序員就輕松了。你還是需要關(guān)注內(nèi)存占用：那些很占空間的值，一旦不再用到，你必須檢查是否還存在對它們的引用。如果是的話，就必須手動(dòng)解除引用。

三、內(nèi)存泄漏的識(shí)別方法

怎樣可以觀察到內(nèi)存泄漏呢？

經(jīng)驗(yàn)法則是，如果連續(xù)五次垃圾回收之后，內(nèi)存占用一次比一次大，就有內(nèi)存泄漏。這就要求實(shí)時(shí)查看內(nèi)存占用。

3.1 瀏覽器

Chrome 瀏覽器查看內(nèi)存占用，按照以下步驟操作。

• 打開開發(fā)者工具，選擇 Timeline 面板

• 在頂部的Capture字段里面勾選 Memory

• 點(diǎn)擊左上角的錄制按鈕。

• 在頁面上進(jìn)行各種操作，模擬用戶的使用情況。

• 一段時(shí)間后，點(diǎn)擊對話框的 stop 按鈕，面板上就會(huì)顯示這段時(shí)間的內(nèi)存占用情況。
  

如果內(nèi)存占用基本平穩(wěn)，接近水平，就說明不存在內(nèi)存泄漏。

反之，就是內(nèi)存泄漏了。

3.2 命令行

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

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

process.memoryUsage返回一個(gè)對象，包含了 Node 進(jìn)程的內(nèi)存占用信息。該對象包含四個(gè)字段，單位是字節(jié)，含義如下。

• rss（resident set size）：所有內(nèi)存占用，包括指令區(qū)和堆棧。

• heapTotal："堆"占用的內(nèi)存，包括用到的和沒用到的。

• heapUsed：用到的堆的部分。

• external： V8 引擎內(nèi)部的 C++ 對象占用的內(nèi)存。
  

判斷內(nèi)存泄漏，以heapUsed字段為準(zhǔn)。

四、WeakMap

前面說過，及時(shí)清除引用非常重要。但是，你不可能記得那么多，有時(shí)候一疏忽就忘了，所以才有那么多內(nèi)存泄漏。

最好能有一種方法，在新建引用的時(shí)候就聲明，哪些引用必須手動(dòng)清除，哪些引用可以忽略不計(jì)，當(dāng)其他引用消失以后，垃圾回收機(jī)制就可以釋放內(nèi)存。這樣就能大大減輕程序員的負(fù)擔(dān)，你只要清除主要引用就可以了。

ES6 考慮到了這一點(diǎn)，推出了兩種新的數(shù)據(jù)結(jié)構(gòu)：WeakSet 和 WeakMap。它們對于值的引用都是不計(jì)入垃圾回收機(jī)制的，所以名字里面才會(huì)有一個(gè)"Weak"，表示這是弱引用。

下面以 WeakMap 為例，看看它是怎么解決內(nèi)存泄漏的。

const wm = new WeakMap();

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

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

上面代碼中，先新建一個(gè) Weakmap 實(shí)例。然后，將一個(gè) DOM 節(jié)點(diǎn)作為鍵名存入該實(shí)例，并將一些附加信息作為鍵值，一起存放在 WeakMap 里面。這時(shí)，WeakMap 里面對element的引用就是弱引用，不會(huì)被計(jì)入垃圾回收機(jī)制。

也就是說，DOM 節(jié)點(diǎn)對象的引用計(jì)數(shù)是1，而不是2。這時(shí)，一旦消除對該節(jié)點(diǎn)的引用，它占用的內(nèi)存就會(huì)被垃圾回收機(jī)制釋放。Weakmap 保存的這個(gè)鍵值對，也會(huì)自動(dòng)消失。

基本上，如果你要往對象上添加數(shù)據(jù)，又不想干擾垃圾回收機(jī)制，就可以使用 WeakMap。

五、WeakMap 示例

WeakMap 的例子很難演示，因?yàn)闊o法觀察它里面的引用會(huì)自動(dòng)消失。此時(shí)，其他引用都解除了，已經(jīng)沒有引用指向 WeakMap 的鍵名了，導(dǎo)致無法證實(shí)那個(gè)鍵名是不是存在。

我一直想不出辦法，直到有一天賀師俊老師提示，如果引用所指向的值占用特別多的內(nèi)存，就可以通過process.memoryUsage方法看出來。

根據(jù)這個(gè)思路，網(wǎng)友 vtxf 補(bǔ)充了下面的例子。

首先，打開 Node 命令行。

$ node --expose-gc

上面代碼中，--expose-gc參數(shù)表示允許手動(dòng)執(zhí)行垃圾回收機(jī)制。

然后，執(zhí)行下面的代碼。

// 手動(dòng)執(zhí)行一次垃圾回收，保證獲取的內(nèi)存使用狀態(tài)準(zhǔn)確
> global.gc(); 
undefined

// 查看內(nèi)存占用的初始狀態(tài)，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

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

// 在 WeakMap 中添加一個(gè)鍵值對，
// 鍵名為對象 b，鍵值為一個(gè) 5*1024*1024 的數(shù)組 
> wm.set(b, new Array(5*1024*1024));
WeakMap {}

// 手動(dòng)執(zhí)行一次垃圾回收
> global.gc();
undefined

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

// 解除對象 b 的引用 
> b = null;
null

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

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

上面代碼中，只要外部的引用消失，WeakMap 內(nèi)部的引用，就會(huì)自動(dòng)被垃圾回收清除。由此可見，有了它的幫助，解決內(nèi)存泄漏就會(huì)簡單很多。

以上是“JavaScript中內(nèi)存泄漏怎么辦”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！