前端內存泄漏

前端的學習已經進入了一個艱難的上升期，愈來愈發現本身學習的東西還多得多，須要掌握的知識面寬廣了不少，知識點須要理解的深度也加深了不少。今天看到前端內存泄漏相關，本身總結總結，也便於本身之後學習記憶。因爲經驗所致，必然會有不足之處，歡迎指正！

什麼是內存

內存是計算機中重要的部件之一，它是與CPU進行溝通的橋樑。計算機中全部程序的運行都是在內存中進行的，所以內存的性能對計算機的影響很是大。

什麼是內存泄漏

內存泄漏（Memory Leak）是指程序中己動態分配的堆內存因爲某種緣由程序未釋放或沒法釋放，形成系統內存的浪費，致使程序運行速度減慢甚至系統崩潰等嚴重後果。 說白了就是 再也不用到的內存，沒有及時釋放，就叫作內存泄漏（memory leak）。

看完上面的解釋，腦海中就會有一點概念，計算機正常運轉會用到內存，內存像是一箇中轉站，他把你暫存的數據，立刻就會用到的數據存儲在這，以讓你更快捷方便的使用， 那你確定會想到一個問題，暫存的數據到底哪些該存儲在這裏，存儲的東西不會一直在這，又是怎麼消失的呢？

在個人理解，前端開發中，全局的、被引用的對象就會被保存在內存中。好比咱們常見的閉包：

function leak(arg) {
    this.arg = arg;
}

function test() {
    var l1= new leak('It is a leak');

    document.body.addEventListener('click', function() {
        l1.arg = 'Here you are!'
    })
}
test()
複製代碼

很明顯，l1被閉包環境引用，沒法被回收

那麼瀏覽器是怎麼判斷一個對象是否是該被垃圾回收了呢

對前端開發來講只須要理解'引用計數法'就能夠了 語言引擎有一張"引用表"，保存了內存裏面全部的資源（一般是各類值）的引用次數。若是一個值的引用次數是0，就表示這個值再也不用到了，所以能夠將這塊內存釋放。

代碼層面內存泄露的緣由

1. 循環引用
2. 閉包
3. 全局變量
4. 沒有清理的DOM元素引用
5. 被遺忘的定時器以及其中的引用

可能形成了內存泄漏要怎麼排查

1. 咱們可使用chrome瀏覽器調試工具中的內存快照，點擊左上角灰色原點就能夠保存一份快照，記錄此時內存使用狀況 能夠看到代碼中明顯的l1對象被引用致使沒法釋放，在快照中咱們也看到了一個leak實例在內存中。經過見=簡單分析就能夠知道是哪塊代碼出了問題

2. 若是是在Node環境下，能夠用Node提供的process.memoryUsage()方法來檢查內存泄露:具體方法能夠參考阮一峯的例子： github.com/ruanyf/es6t…

• rss (resident set size) : 全部內存佔用，包括指令區和堆棧。
• heapTotal : "堆"佔用的內存，包括用到的和未用到的。
• heapUsed : 用到的堆。
• external : V8引擎內部C++對象佔用的內存。

判斷內存泄露以heapUsed爲準。

如何處理

1. 避免循環引用等發生源
2. 變量致使的內存泄露，將變量清除 a = null
3. 事件監聽致使的內存泄露，監聽後移除