JavaScript 常见内存泄漏场景与解决方案详解

内存泄漏与内存溢出的定义

内存泄漏？

根据官方定义，内存泄漏（Memory Leak）指的是程序中动态分配的堆内存因某些原因未被程序释放或无法释放，从而导致系统内存资源的浪费。这种情况可能引发程序运行速度显著下降，甚至导致系统崩溃等严重后果。

通俗来说，内存泄漏是由于疏忽或错误导致程序未能释放已不再使用的内存。当某些内存不再被需要却未及时释放时，就会造成内存资源的浪费。

避免内存泄漏？

在局部作用域中，函数执行完毕后，其变量通常不再具有存在价值，垃圾回收机制会据此判断并回收这些内存。然而，对于全局变量，很难判断其何时不再使用，因此无法正常回收。建议尽量少使用全局变量。此外，在使用闭包时，极易造成严重的内存泄漏，因为闭包内部的局部变量会一直保存在内存中，无法被自动回收。

内存溢出？

当程序运行所需的内存超过系统剩余可用内存时，就会抛出内存溢出错误。

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

JavaScript常见内存泄漏场景

常见的js内存泄漏

意外全局变量

1. 意外的全局变量

在JavaScript中，如果使用了未声明的变量，该变量会在全局对象中创建一个新的变量。在浏览器环境下，这个全局对象即为window。

function foo() {
a = 'test'
}
// 上面的写法等价于
function foo() {
window.a = 'test'
}

function foo() {
this.a = 'test'
// 函数自身发生调用，this指向全局对象window
}
foo();

上述代码中的变量a本应是foo()内部作用域变量的引用，但由于未使用var（或let/const）进行声明，该变量被创建为全局变量。这种做法是错误的，会导致内存泄漏。

解决方式：在js文件开头添加 ‘use strict'，开启严格模式。（或者一般将使用过后的全局变量设置为 null 或者将它重新赋值，这个会涉及的缓存的问题，需要注意）

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

未清理的计时器与回调

2. 计时器和回调函数timers

定时器setInterval或者setTimeout在不需要使用的时候，没有被clear，导致定时器的回调函数及其内部依赖的变量都不能被回收，这就会造成内存泄漏。

解决方式：当不需要interval或者timeout的时候，调用clearInterval或者clearTimeout

DOM元素相关泄漏

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可能会存在内存泄漏

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。