#yyds幹貨盤點#監控前端記憶體洩漏

記憶體洩漏是可以分成兩類的，一種是比較嚴重的，洩漏的就一直回收不回來了，另一種嚴重程度稍微輕點，就是沒有及時清理導緻的記憶體洩漏，一段時間後還是可以被清理掉

不管哪一種，利用開發者工具抓到的記憶體圖，應該都會看到一段時間内，記憶體占用不斷的直線式下降，這是因為不斷發生 GC，也就是垃圾回收導緻的

針對第一種比較嚴重的，會發現，記憶體圖裡即使不斷發生 GC 後，所使用的記憶體總量仍舊在不斷增長

另外，記憶體不足會造成不斷 GC，而 GC 時是會阻塞主線程的，是以會影響到頁面性能，造成卡頓，是以記憶體洩漏問題還是需要關注的

我們假設這麼一種場景，然後來用開發者工具檢視下記憶體洩漏：

場景一：在某個函數内申請一塊記憶體，然後該函數在短時間内不斷被調用

// 點選按鈕，就執行一次函數，申請一塊記憶體
startBtn.addEventListener("click", function() {
  var a = new Array(100000).fill(1);
  var b = new Array(20000).fill(1);
});      

一個頁面能夠使用的記憶體是有限的，當記憶體不足時，就會觸發垃圾回收機制去回收沒用的記憶體。而在函數内部使用的變量都是局部變量，函數執行完畢，這塊記憶體就沒用可以被回收了。

是以當我們短時間内不斷調用該函數時，可以發現，函數執行時，發現記憶體不足，垃圾回收機制工作，回收上一個函數申請的記憶體，因為上個函數已經執行結束了，記憶體無用可被回收了

呈現記憶體使用量的圖表就是一條橫線過去，中間出現多處豎線，其實就是表示記憶體清空，再申請，清空再申請，每個豎線的位置就是垃圾回收機制工作以及函數執行又申請的時機

// 點選按鈕，就執行一次函數，申請一塊記憶體
var arr = [];
startBtn.addEventListener("click", function() {
    var a = new Array(100000).fill(1);
    var b = new Array(20000).fill(1);
    arr.push(b);
});