本文主要給大家詳細介紹了關(guān)于JavaScript中內(nèi)存泄漏的相關(guān)內(nèi)容，文中介紹的非常詳細，對大家具有一定的參考學習價值，下面來一起看看詳細的介紹：
一、什么是內(nèi)存泄漏？
程序的運行需要內(nèi)存。只要程序提出要求，操作系統(tǒng)或者運行時（runtime）就必須供給內(nèi)存。
對于持續(xù)運行的服務(wù)進程（daemon），必須及時釋放不再用到的內(nèi)存。否則，內(nèi)存占用越來越高，輕則影響系統(tǒng)性能，重則導致進程崩潰。
不再用到的內(nèi)存，沒有及時釋放，就叫做內(nèi)存泄漏（memory leak）。
有些語言（比如 C 語言）必須手動釋放內(nèi)存，程序員負責內(nèi)存管理。
char * buffer;buffer = (char*) malloc(42);// Do something with bufferfree(buffer);
上面是 C 語言代碼，malloc方法用來申請內(nèi)存，使用完畢之后，必須自己用free方法釋放內(nèi)存。
這很麻煩，所以大多數(shù)語言提供自動內(nèi)存管理，減輕程序員的負擔，這被稱為"垃圾回收機制"（garbage collector）。
二、垃圾回收機制
垃圾回收機制怎么知道，哪些內(nèi)存不再需要呢？
最常使用的方法叫做" 上圖中，左下角的兩個值，沒有任何引用，所以可以釋放。 如果一個值不再需要了，引用數(shù)卻不為0，垃圾回收機制無法釋放這塊內(nèi)存，從而導致內(nèi)存泄漏。 上面代碼中，數(shù)組[1, 2, 3, 4]是一個值，會占用內(nèi)存。變量arr是僅有的對這個值的引用，因此引用次數(shù)為1。盡管后面的代碼沒有用到arr，它還是會持續(xù)占用內(nèi)存。 如果增加一行代碼，解除arr對[1, 2, 3, 4]引用，這塊內(nèi)存就可以被垃圾回收機制釋放了。 上面代碼中，arr重置為null，就解除了對[1, 2, 3, 4]的引用，引用次數(shù)變成了0，內(nèi)存就可以釋放出來了。 因此，并不是說有了垃圾回收機制，程序員就輕松了。你還是需要關(guān)注內(nèi)存占用：那些很占空間的值，一旦不再用到，你必須檢查是否還存在對它們的引用。如果是的話，就必須手動解除引用。 三、內(nèi)存泄漏的識別方法 怎樣可以觀察到內(nèi)存泄漏呢？ 經(jīng)驗法則是，如果連續(xù)五次垃圾回收之后，內(nèi)存占用一次比一次大，就有內(nèi)存泄漏。這就要求實時查看內(nèi)存占用。 3.1 瀏覽器 Chrome 瀏覽器查看內(nèi)存占用，按照以下步驟操作。 如果內(nèi)存占用基本平穩(wěn)，接近水平，就說明不存在內(nèi)存泄漏。 反之，就是內(nèi)存泄漏了。 3.2 命令行 命令行可以使用 Node 提供的process.memoryUsage方法。 判斷內(nèi)存泄漏，以heapUsed字段為準。 四、WeakMap 前面說過，及時清除引用非常重要。但是，你不可能記得那么多，有時候一疏忽就忘了，所以才有那么多內(nèi)存泄漏。 最好能有一種方法，在新建引用的時候就聲明，哪些引用必須手動清除，哪些引用可以忽略不計，當其他引用消失以后，垃圾回收機制就可以釋放內(nèi)存。這樣就能大大減輕程序員的負擔，你只要清除主要引用就可以了。 ES6 考慮到了這一點，推出了兩種新的數(shù)據(jù)結(jié)構(gòu)：WeakSet 和 WeakMap。它們對于值的引用都是不計入垃圾回收機制的，所以名字里面才會有一個"Weak"，表示這是弱引用。 下面以 WeakMap 為例，看看它是怎么解決內(nèi)存泄漏的。 上面代碼中，先新建一個 Weakmap 實例。然后，將一個 DOM 節(jié)點作為鍵名存入該實例，并將一些附加信息作為鍵值，一起存放在 WeakMap 里面。這時，WeakMap 里面對element的引用就是弱引用，不會被計入垃圾回收機制。 也就是說，DOM 節(jié)點對象的引用計數(shù)是1，而不是2。這時，一旦消除對該節(jié)點的引用，它占用的內(nèi)存就會被垃圾回收機制釋放。Weakmap 保存的這個鍵值對，也會自動消失。 基本上，如果你要往對象上添加數(shù)據(jù)，又不想干擾垃圾回收機制，就可以使用 WeakMap。 五、WeakMap 示例 WeakMap 的例子很難演示，因為無法觀察它里面的引用會自動消失。此時，其他引用都解除了，已經(jīng)沒有引用指向 WeakMap 的鍵名了，導致無法證實那個鍵名是不是存在。 我一直想不出辦法，直到有一天賀師俊老師提示，如果引用所指向的值占用特別多的內(nèi)存，就可以通過 根據(jù)這個思路，網(wǎng)友 vtxf 補充了下面的例子。 首先，打開 Node 命令行。 上面代碼中，--expose-gc參數(shù)表示允許手動執(zhí)行垃圾回收機制。 然后，執(zhí)行下面的代碼。 上面代碼中，只要外部的引用消失，WeakMap 內(nèi)部的引用，就會自動被垃圾回收清除。由此可見，有了它的幫助，解決內(nèi)存泄漏就會簡單很多。 六、參考鏈接 總結(jié) 以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對武林網(wǎng)的支持。
const arr = [1, 2, 3, 4];console.log('hello world');let arr = [1, 2, 3, 4];console.log('hello world');arr = null;
console.log(process.memoryUsage());// { rss: 27709440,// heapTotal: 5685248,// heapUsed: 3449392,// external: 8772 }process.memoryUsage返回一個對象，包含了 Node 進程的內(nèi)存占用信息。該對象包含四個字段，單位是字節(jié)，含義如下。
const wm = new WeakMap();const element = document.getElementById('example');wm.set(element, 'some information');wm.get(element) // "some information"process.memoryUsage方法看出來。$ node --expose-gc
// 手動執(zhí)行一次垃圾回收，保證獲取的內(nèi)存使用狀態(tài)準確> 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// 此時，heapUsed 仍然為 4M 左右> process.memoryUsage(); { rss: 20537344, heapTotal: 9474048, heapUsed: 3967272, external: 8993 }// 在 WeakMap 中添加一個鍵值對，// 鍵名為對象 b，鍵值為一個 5*1024*1024 的數(shù)組 > wm.set(b, new Array(5*1024*1024));WeakMap {}// 手動執(zhí)行一次垃圾回收> global.gc();undefined// 此時，heapUsed 為 45M 左右> process.memoryUsage(); { rss: 62652416, heapTotal: 51437568, heapUsed: 45911664, external: 8951 }// 解除對象 b 的引用 > b = null;null// 再次執(zhí)行垃圾回收> global.gc();undefined// 解除 b 的引用以后，heapUsed 變回 4M 左右// 說明 WeakMap 中的那個長度為 5*1024*1024 的數(shù)組被銷毀了> process.memoryUsage(); { rss: 20639744, heapTotal: 8425472, heapUsed: 3979792, external: 8956 }
新聞熱點
疑難解答
