js垃圾回收机制之避免内存泄漏

参考：http://mp.weixin.qq.com/s?__biz=MzAxODE2MjM1MA==&mid=2651552115&idx=1&sn=71b48649dae392a7ac914b5f46b7b0bc&chksm=8025aeb2b75227a4c858f19d36e2d02b685712cd65608a4a72b472f0b61c0f696becaf7dbe3e&mpshare=1&scene=23&srcid=0511TjFNkFaM8Fu9rq8gbtf1#rd

js是一门具有自动垃圾回收机制的语言，开发人员不必担心内分分配和回收问题；

1离开作用域的值自动标记为可以回收，因此将在垃圾收集期间被删除

2标记清除是目前主流的垃圾收集算法，思想是给不使用的值加上标记然后回收其内存

3另一种垃圾收集算法是引用计数，思想是跟踪记录所有值被引用的次数，js引擎目前都不支持这种算法，但IE中访问非原生js对象（COM） 这种算法会导致问题

4当代码中存在循环引用现象时，引用计数会导致问题

5解除变量的引用不仅有助于消除循环引用现象，而且对垃圾收集也有好处，为确保有效回收内存，应及时解除不再使用的全局对象及循环引用变量的引用。

防止内存泄漏：

1避免使用全局变量

2注意this关键字的使用

如果不注意 this 的话,还可能会这么泄漏:

function foo() {
    this.variable = "potential accidental global";
}

// 没有对象调用foo, 也没有给它绑定this, 所以this是window
foo();

3定时器合理使用

被遗忘的定时器或者回调

var someResource = getData();
setInterval(function() {
    var node = document.getElementById('Node');
    if(node) {
        node.innerHTML = JSON.stringify(someResource));
    }
}, 1000);

这样的代码很常见, 如果 id 为 Node 的元素从 DOM 中移除, 该定时器仍会存在, 同时, 因为回调函数中包含对 someResource 的引用, 定时器外面的 someResource 也不会被释放.

4观察者代码循环引用

5及时解除绑定的事件

详细介绍

一、垃圾回收机制—GC

Javascript具有自动垃圾回收机制(GC:Garbage Collecation)，也就是说，执行环境会负责管理代码执行过程中使用的内存。

原理：垃圾收集器会定期（周期性）找出那些不在继续使用的变量，然后释放其内存。

JavaScript垃圾回收的机制很简单：找出不再使用的变量，然后释放掉其占用的内存，但是这个过程不是实时的，因为其开销比较大，所以垃圾回收器会按照固定的时间间隔周期性的执行。

不再使用的变量也就是生命周期结束的变量，当然只可能是局部变量，全局变量的生命周期直至浏览器卸载页面才会结束。局部变量只在函数的执行过程中存在，而在这个过程中会为局部变量在栈或堆上分配相应的空间，以存储它们的值，然后在函数中使用这些变量，直至函数结束，而闭包中由于内部函数的原因，外部函数并不能算是结束。

还是上代码说明吧：

?

1 2 3 4 5 6 7 8 9 10 11

function fn1() {   var obj = {name: 'hanzichi' , age: 10}; }   function fn2() {   var obj = {name: 'hanzichi' , age: 10};   return obj; }   var a = fn1(); var b = fn2();

我们来看代码是如何执行的。首先定义了两个function，分别叫做fn1和fn2，当fn1被调用时，进入fn1的环境，会开辟一块内存存放对象{name: 'hanzichi', age: 10}，而当调用结束后，出了fn1的环境，那么该块内存会被js引擎中的垃圾回收器自动释放；在fn2被调用的过程中，返回的对象被全局变量b所指向，所以该块内存并不会被释放。

这里问题就出现了：到底哪个变量是没有用的？所以垃圾收集器必须跟踪到底哪个变量没用，对于不再有用的变量打上标记，以备将来收回其内存。用于标记的无用变量的策略可能因实现而有所区别，通常情况下有两种实现方式：标记清除和引用计数。引用计数不太常用，标记清除较为常用。

二、标记清除

js中最常用的垃圾回收方式就是标记清除。当变量进入环境时，例如，在函数中声明一个变量，就将这个变量标记为“进入环境”。从逻辑上讲，永远不能释放进入环境的变量所占用的内存，因为只要执行流进入相应的环境，就可能会用到它们。而当变量离开环境时，则将其标记为“离开环境”。

?

1 2 3 4 5

function test(){   var a = 10 ; //被标记 ，进入环境   var b = 20 ; //被标记 ，进入环境 } test(); //执行完毕 之后 a、b又被标离开环境，被回收。

　　垃圾回收器在运行的时候会给存储在内存中的所有变量都加上标记（当然，可以使用任何标记方式）。然后，它会去掉环境中的变量以及被环境中的变量引用的变量的标记（闭包）。而在此之后再被加上标记的变量将被视为准备删除的变量，原因是环境中的变量已经无法访问到这些变量了。最后，垃圾回收器完成内存清除工作，销毁那些带标记的值并回收它们所占用的内存空间。

　　到目前为止，IE、Firefox、Opera、Chrome、Safari的js实现使用的都是标记清除的垃圾回收策略或类似的策略，只不过垃圾收集的时间间隔互不相同。

三、引用计数

　　引用计数的含义是跟踪记录每个值被引用的次数。当声明了一个变量并将一个引用类型值赋给该变量时，则这个值的引用次数就是1。如果同一个值又被赋给另一个变量，则该值的引用次数加1。相反，如果包含对这个值引用的变量又取得了另外一个值，则这个值的引用次数减1。当这个值的引用次数变成0时，则说明没有办法再访问这个值了，因而就可以将其占用的内存空间回收回来。这样，当垃圾回收器下次再运行时，它就会释放那些引用次数为0的值所占用的内存。

?

1 2 3 4 5 6

function test(){   var a = {} ; //a的引用次数为0   var b = a ; //a的引用次数加1，为1   var c =a; //a的引用次数再加1，为2   var b ={}; //a的引用次数减1，为1 }

　　Netscape Navigator3是最早使用引用计数策略的浏览器，但很快它就遇到一个严重的问题：循环引用。循环引用指的是对象A中包含一个指向对象B的指针，而对象B中也包含一个指向对象A的引用。

?

1 2 3 4 5 6 7 8

function fn() {   var a = {};   var b = {};   a.pro = b;   b.pro = a; }   fn();

　　以上代码a和b的引用次数都是2，fn()执行完毕后，两个对象都已经离开环境，在标记清除方式下是没有问题的，但是在引用计数策略下，因为a和b的引用次数不为0，所以不会被垃圾回收器回收内存，如果fn函数被大量调用，就会造成内存泄露。在IE7与IE8上，内存直线上升。

我们知道，IE中有一部分对象并不是原生js对象。例如，其内存泄露DOM和BOM中的对象就是使用C++以COM对象的形式实现的，而COM对象的垃圾回收机制采用的就是引用计数策略。因此，即使IE的js引擎采用标记清除策略来实现，但js访问的COM对象依然是基于引用计数策略的。换句话说，只要在IE中涉及COM对象，就会存在循环引用的问题。

?

1 2 3 4

var element = document.getElementById( "some_element" ); var myObject = new Object(); myObject.e = element; element.o = myObject;

　　这个例子在一个DOM元素（element)与一个原生js对象（myObject)之间创建了循环引用。其中，变量myObject有一个名为element的属性指向element对象；而变量element也有一个属性名为o回指myObject。由于存在这个循环引用，即使例子中的DOM从页面中移除，它也永远不会被回收。

看上面的例子，有同学回觉得太弱了，谁会做这样无聊的事情，其实我们是不是就在做

?

1 2 3 4

window.onload= function outerFunction(){   var obj = document.getElementById( "element" );   obj.onclick= function innerFunction(){}; };

这段代码看起来没什么问题，但是obj引用了document.getElementById(“element”)，而document.getElementById(“element”)的onclick方法会引用外部环境中德变量，自然也包括obj，是不是很隐蔽啊。

解决办法

最简单的方式就是自己手工解除循环引用，比如刚才的函数可以这样

?

1 2	myObject.element = null ; element.o = null ;

?

1 2 3 4 5

window.onload= function outerFunction(){   var obj = document.getElementById( "element" );   obj.onclick= function innerFunction(){};   obj= null ; };

将变量设置为null意味着切断变量与它此前引用的值之间的连接。当垃圾回收器下次运行时，就会删除这些值并回收它们占用的内存。

要注意的是，IE9+并不存在循环引用导致Dom内存泄露问题，可能是微软做了优化，或者Dom的回收方式已经改变