JS常見內存洩漏及解決方案解析

內存洩漏？

官方解釋：內存洩漏（Memory Leak）是指程序中己動態分配的堆內存由於某種原因程序未釋放或無法釋放，造成系統內存的浪費，導致程序運行速度減慢甚至系統崩潰等嚴重後果。

通俗點就是指由於疏忽或者錯誤造成程序未能釋放已經不再使用的內存，不再用到的內存卻沒有及時釋放，從而造成內存上的浪費。

避免內存洩漏？

在局部作用域中，等函數執行完畢，變量就沒有存在的必要了，垃圾回收機制很虧地做出判斷並且回收，但是對於全局變量，很難判斷什麼時候不用這些變量，無法正常回收；所以，儘量少使用全局變量。在使用閉包的時候，就會造成嚴重的內存洩漏，因為閉包中的局部變量，會一直保存在內存中。

內存溢出？

當程序運行需要的內存超過了剩餘的內存時, 就出拋出內存溢出的錯誤。
例如下面的代碼，謹慎試用，可能會卡窗口。。。。

 var obj = {} for (var i = 0; i<100000; i++) { obj[i] = new Array(10000000) } console.log('------')

常見的js內存洩漏

1. 意外的全局變量

在js中，一個未聲明變量的使用，會在全局對象中創建一個新的變量；在瀏覽器環境下，全局對象就是window：

 function foo() { a = 'test' } // 上面的寫法等價於 function foo() { window.a = 'test' }

 function foo() { this.a = 'test' // 函數自身發生調用，this指向全局對象window } foo();

上面的a變量應該是foo()內部作用域變量的引用，由於沒有使用var來聲明這個變量，這時變量a就被創建成了全局變量，這個就是錯誤的，會導致內存洩漏。

解決方式： 在js文件開頭添加 ‘use strict'，開啟嚴格模式。（或者一般將使用過後的全局變量設置為 null 或者將它重新賦值，這個會涉及的緩存的問題，需要注意）

2. 計時器和回調函數timers

定時器setInterval或者setTimeout在不需要使用的時候，沒有被clear，導致定時器的回調函數及其內部依賴的變量都不能被回收，這就會造成內存洩漏。

解決方式：當不需要interval或者timeout的時候，調用clearInterval或者clearTimeout

3. DOM洩漏

1）給DOM對象添加的屬性是一個對象的引用

var a = {};
document.getElementById('id').diyProp = a;

解決方法：在window.onload時間中加上 document.getElementById('id').diyProp = null;

2）元素引用沒有清理

var a = document.getElementById('id');
document.body.removeChild(a);
// 不能回收，因為存在變量a對它的引用。雖然我們用removeChild移除了，但是還在對象裡保存著#的引用，即DOM元素還在內存裡面。

解決方法： a = null;

3）事件的綁定沒有移除

解決方法： 移除時間的監聽

4. js閉包

閉包在IE6下會造成內存洩漏，但是現在已經無須考慮了。值得注意的是閉包本身不會造成內存洩漏，但閉包過多很容易導致內存洩漏。閉包會造成對象引用的生命週期脫離當前函數的上下文，如果閉包如果使用不當，可以導致環形引用（circular reference），類似於死鎖，只能避免，無法發生之後解決，即使有垃圾回收也還是會內存洩露。

這個，另外找個時間詳細說明一下，這裡就不贅述了

5. console

控制檯日誌記錄對總體內存內置文件的影響，也是個重大的問題，同時也是容易被忽略的。記錄錯誤的對象，可以將大量的數據保留在內存中。傳遞給console.log的對象是不能被垃圾回收，所以沒有去掉console.log可能會存在內存洩漏