一、内存泄漏定义
在计算机科学中,由于疏忽或错误造成程序未能释放已经不再使用的内存,并非指内存在物理内存泄漏是上的消失,而是应用程序分配某段内存后,由于设计错误,导致在释放该段内存之前就失去了对该段内存的控制,从而造成了内存的浪费。 C语言中,由于是手动管理内存,因此内存泄漏是经常出现的事情。
C语言中,malloc用来申请内存,使用完毕后,比较自己用free方法释放内存。这显然很不智能,所以大多数语言提供自动内存管理,减轻程序员负担,这被称为“垃圾回收机制”。
二、垃圾回收机制
JS
具有自动垃圾回收机制(GC:Garbage Collecation)
,也就是说,执行环境会负责管理代码执行过程中使用的内存。
原理:垃圾收集器会定期找出那些不再继续使用的变量,然后释放其内存。
通常情况下有两种实现方式:
- 标记清除
- 引用计数
垃圾回收器会定期扫描内存,当某个内存中的值被引用为零时就会将其回收。当前变量已经使用完毕但依然被引用,导致垃圾回收器无法回收这就造成了内存泄漏。传统页面每次跳转都会释放内存,所以并不是特别明显。
Vue单页面应用中:Web App 与 传统Web的区别,因为Web App是单页面应用页面通过路由跳转不会刷新页面,导致内存泄漏不断堆积,导致页面卡顿。
1、标记清除——JS最常用的垃圾回收机制
当变量进入执行环境时,就标记这个变量为“进入环境”。进入环境的变量所占用的内存就不能释放,当变量离开环境时,则将其标记为“离开环境”。 垃圾回收程序运行的时候,会标记内存中存储的所有变量。然后会将所有在上下文的变量,以及被在上下文中变量引用的变量的标记去掉。
在此之后再被加上标记的变量就是待删除的了,原因是任何在上下文中变量都访问不到它们了; 随后垃圾回收程序做一次内存清理,销毁带标记的所有值并收回他们的内存。
var m = 0,n = 19 // 把 m,n,add() 标记为进入环境。
add(m, n) // 把 a, b, c标记为进入环境。
console.log(n) // a,b,c标记为离开环境,等待垃圾回收。
function add(a, b) {
a++
var c = a + b
return c
}
2.引用计数
语言引擎有一张“引用表”,保存了内存里面所有的资源(通常是各种值)的引用次数。如果一个值的引用次数是0,就表示这个值不再用到了,因此可以将这块内存释放。
如果一个值不再需要了,引用数却不为0,垃圾回收机制无法释放这块内存,从而导致内存泄漏。
const arr = [1, 2, 3, 4]; //数组是一个值,会占用内存,变量arr是仅有的对这个值的引用,因此引用次数为1。
console.log('hello world'); //这里并没有用到arr,但还是会持续占用内存
如果需要这块代码被垃圾回收机制释放,那么只需要设置arr=null
,数组的引用次数就为0了,就被垃圾回收了。
三、常见的内存泄漏情况
1.意外的全局变量
// 情况1,没有修饰符
function foo(arg) {
bar = "this is a hidden global variable";
}
// 情况2,this创建的全局变量
function foo() {
this.variable = "potential accidental global";
}
// foo 调用自己,this 指向了全局对象(window)
foo();
2.定时器
var someResource = getData();
setInterval(function() {
var node = document.getElementById('Node');
if(node) {
// 处理 node 和 someResource
node.innerHTML = JSON.stringify(someResource));
}
}, 1000);
如果id为Node的元素从DOM中移除,该定时器仍会存在,同时,因为回调函数中包含对someResource的引用,定时器外面的someResource也不会被释放。
3.闭包
function bindEvent() {
var obj = document.createElement('XXX');
var unused = function () {
console.log(obj, '闭包内引用obj obj不会被释放');
};
obj = null; // 解决方法
}
闭包维持函数内局部变量,使其得不到释放。
4.没有清理DOM元素
const refA = document.getElementById('refA');
document.body.removeChild(refA); // dom删除了
console.log(refA, 'refA'); // 但是还存在引用能console出整个div 没有被回收
refA = null;
console.log(refA, 'refA'); // 解除引用
没有清理对DOM元素的引用同样造成内存泄露,包括使用事件监听addEventListener监听的时候,在不监听的情况下使用removeEventListener取消对事件监听。
四、代码关注点
- DOM中的addEventLisner 函数及派生的事件监听, 比如Jquery 中的on 函数, vue 组件实例的 $on 函数,第三方库中的初始化函数
- 其它BOM对象的事件监听, 比如websocket 实例的on 函数
- 避免不必要的函数引用
- 如果使用render 函数,避免在html标签中绑定DOM/BOM 事件
五、Vue如何处理
- 如果在
mounted/created
钩子中绑定了DOM/BOM
对象中的事件,需要在beforeDestroy
中做对应解绑处理 - 如果在
mounted/created
钩子中使用了第三方库初始化,需要在beforeDestroy
中做对应销毁处理 - 如果组件中使用了定时器,需要在
beforeDestroy
中做对应销毁处理 - 模板中不要使用表达式来绑定到特定的处理函数,这个逻辑应该放在处理函数中?
- 如果在
mounted/created
钩子中使用了$on
,需要在beforeDestroy
中做对应解绑($off)处理 - 某些组件在模板中使用事件绑定可能会出现泄漏,使用
$on
替换模板中的绑定