詳解JS常見內存泄漏及解決方案

小編這次要給大家分享的是詳解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 或者將它重新賦值，這個會涉及的緩存的問題，需要注意）

<script> 
"use strict"; 
console.log("這是嚴格模式。"); 
</script> 
<script> 
　console.log("這是正常模式。"); 
</script>

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可能會存在內存泄漏

看完這篇關于詳解JS常見內存泄漏及解決方案的文章，如果覺得文章內容寫得不錯的話，可以把它分享出去給更多人看到。