內存泄漏：指一塊被分配的內存既不能使用，又不能回收，直到瀏覽器進程結束。

1、JS的回收機制

JavaScript垃圾回收的機制很簡單：找出不再使用的變量，然后釋放掉其占用的內存，但是這個過程不是實時的，因為其開銷比較大，所以垃圾回收系統(tǒng)（GC）會按照固定的時間間隔,周期性的執(zhí)行。

到底哪個變量是沒有用的？所以垃圾收集器必須跟蹤到底哪個變量沒用，對于不再有用的變量打上標記，以備將來收回其內存。用于標記的無用變量的策略可能因實現(xiàn)而有所區(qū)別，通常情況下有兩種實現(xiàn)方式：標記清除和引用計數(shù)。引用計數(shù)不太常用，標記清除較為常用。

2、標記清除

js中最常用的垃圾回收方式就是標記清除。當變量進入環(huán)境時，例如，在函數(shù)中聲明一個變量，就將這個變量標記為“進入環(huán)境”。從邏輯上講，永遠不能釋放進入環(huán)境的變量所占用的內存，因為只要執(zhí)行流進入相應的環(huán)境，就可能會用到它們。而當變量離開環(huán)境時，則將其標記為“離開環(huán)境”。

?function test(){
var a= 10; //被標記，進入環(huán)境
var b= 20; //被標記，進入環(huán)境
}
test(); //執(zhí)行完畢之后a、b又被標記離開環(huán)境，被回收

3、引用此時

引用計數(shù)的含義是跟蹤記錄每個值被引用的次數(shù)。當聲明了一個變量并將一個引用類型值（function object array）賦給該變量時，則這個值的引用次數(shù)就是1。如果同一個值又被賦給另一個變量，則該值的引用次數(shù)加1。相反，如果包含對這個值引用的變量又取得了另外一個值，則這個值的引用次數(shù)減1。當這個值的引用次數(shù)變成0時，則說明沒有辦法再訪問這個值了，因而就可以將其占用的內存空間回收回來。這樣，當垃圾回收器下次再運行時，它就會釋放那些引用次數(shù)為0的值所占用的內存。

?function test(){
var a={}; //a的引用次數(shù)為0
var b=a; //a的引用次數(shù)加1，為1
var c=a; //a的引用次數(shù)加1，為2
var b={}; //a的引用次數(shù)減1，為1
}

4、哪些操作會造成內存泄露

1）意外的全局變量引起的內存泄露

?function leak(){
js= "xxx"; //js成為一個全局變量，不會被回收
}

2）閉包引起的內存泄露

?function bindEvent(){
var obj= document.createElement( "XXX");
obj.οnclick= function(){
//Even if it's a empty function
}
}

閉包可以維持函數(shù)內局部變量，使其得不到釋放。 上例定義事件回調時，由于是函數(shù)內定義函數(shù)，并且內部函數(shù)--事件回調的引用外暴了，形成了閉包。

解決之道，將事件處理函數(shù)定義在外部，解除閉包,或者在定義事件處理函數(shù)的外部函數(shù)中，刪除對dom的引用。

?//將事件處理函數(shù)定義在外部

function onclickHandler(){

//do something

}

function bindEvent(){

var obj= document.createElement( "XXX");

obj.onclick=onclickHandler;

}

?//在定義事件處理函數(shù)的外部函數(shù)中，刪除對dom的引用

function bindEvent(){

var obj= document.createElement( "XXX");

obj.οnclick= function(){

//Even if it's a empty function

}

obj= null;

}

3）沒有清理的DOM元素引用

?var elements={

button: document.getElementById( "button"),

image: document.getElementById( "image"),

text: document.getElementById( "text")

};

function doStuff(){

image.src= "http://some.url/image";

button.click():

console.log(text.innerHTML)

}

function removeButton(){

document.body.removeChild( document.getElementById( 'button'))

}

4）被遺忘的定時器或者回調

?var someResouce=getData();

setInterval( function(){

var node= document.getElementById( 'Node');

if(node){

node.innerHTML= JSON.stringify(someResouce)

}

}, 1000)

這樣的代碼很常見, 如果 id 為 Node 的元素從 DOM 中移除, 該定時器仍會存在, 同時, 因為回調函數(shù)中包含對 someResource 的引用, 定時器外面的 someResource 也不會被釋放。

5）子元素存在引起的內存泄露

黃色是指直接被 js變量所引用，在內存里，紅色是指間接被 js變量所引用，如上圖，refB 被 refA 間接引用，導致即使 refB 變量被清空，也是不會被回收的子元素 refB 由于 parentNode 的間接引用，只要它不被刪除，它所有的父元素（圖中紅色部分）都不會被刪除。

6）IE7/8引用計數(shù)使用循環(huán)引用產生的問題

?function fn(){

var a={};

var b={};

a.pro=b;

b.pro=a;

}

fn();

fn()執(zhí)行完畢后，兩個對象都已經(jīng)離開環(huán)境，在標記清除方式下是沒有問題的，但是在引用計數(shù)策略下，因為a和b的引用次數(shù)不為0，所以不會被垃圾回收器回收內存，如果fn函數(shù)被大量調用，就會造成內存泄漏。在IE7與IE8上，內存直線上升。

IE中有一部分對象并不是原生js對象。例如，其內存泄漏DOM和BOM中的對象就是使用C++以COM對象的形式實現(xiàn)的，而COM對象的垃圾回收機制采用的就是引用計數(shù)策略。因此，即使IE的js引擎采用標記清除策略來實現(xiàn)，但js訪問的COM對象依然是基于引用計數(shù)策略的。換句話說，只要在IE中涉及COM對象，就會存在循環(huán)引用的問題。

?var element= document.getElementById( "some_element");

var myObject= new Object();

myObject.e=element;

element.o=myObject;

上面的例子在一個DOM元素（element)與一個原生js對象（myObject)之間創(chuàng)建了循環(huán)引用。其中，變量myObject有一個名為e的屬性指向element對象；而變量element也有一個屬性名為o回指myObject。由于存在這個循環(huán)引用，即使例子中的DOM從頁面中移除，它也永遠不會被回收。

看上面的例子，有人會覺得太弱了，誰會做這樣無聊的事情，但是其實我們經(jīng)常會這樣做

?window.onload= function outerFunction(){

var obj= document.getElementById( "element"):

obj.onclick= function innerFunction(){};

};

這段代碼看起來沒什么問題，但是obj引用了document.getElementById(“element”)，而document.getElementById(“element”)的onclick方法會引用外部環(huán)境中的變量，自然也包括obj，是不是很隱蔽啊。

最簡單的解決方式就是自己手工解除循環(huán)引用，比如剛才的函數(shù)可以這樣

?myObject.element= null;

element.o= null;

window.οnlοad= function outerFunction(){

var obj= document.getElementById( "element"):

obj.οnclick= function innerFunction(){};

obj= null;

};

將變量設置為null意味著切斷變量與它此前引用的值之間的連接。當垃圾回收器下次運行時，就會刪除這些值并回收它們占用的內存。 要注意的是，IE9+并不存在循環(huán)引用導致Dom內存泄漏問題，可能是微軟做了優(yōu)化，或者Dom的回收方式已經(jīng)改變

5、如何分析內存的使用情況

Google Chrome瀏覽器提供了非常強大的JS調試工具，Memory 視圖 profiles 視圖讓你可以對 JavaScript 代碼運行時的內存進行快照，并且可以比較這些內存快照。它還讓你可以記錄一段時間內的內存分配情況。在每一個結果視圖中都可以展示不同類型的列表，但是對我們最有用的是 summary 列表和 comparison 列表。 summary 視圖提供了不同類型的分配對象以及它們的合計大?。簊hallow size （一個特定類型的所有對象的總和）和 retained size （shallow size 加上保留此對象的其它對象的大?。?。distance 顯示了對象到達 GC 根（校者注：最初引用的那塊內存，具體內容可自行搜索該術語）的最短距離。 comparison 視圖提供了同樣的信息但是允許對比不同的快照。這對于找到泄漏很有幫助。

6、怎樣避免內存泄露

1）減少不必要的全局變量，或者生命周期較長的對象，及時對無用的數(shù)據(jù)進行垃圾回收；

2）注意程序邏輯，避免“死循環(huán)”之類的 ；

3）避免創(chuàng)建過多的對象 原則：不用了的東西要及時歸還。

內存泄漏：指一塊被分配的內存既不能使用，又不能回收，直到瀏覽器進程結束。

1、JS的回收機制

JavaScript垃圾回收的機制很簡單：找出不再使用的變量，然后釋放掉其占用的內存，但是這個過程不是實時的，因為其開銷比較大，所以垃圾回收系統(tǒng)（GC）會按照固定的時間間隔,周期性的執(zhí)行。

到底哪個變量是沒有用的？所以垃圾收集器必須跟蹤到底哪個變量沒用，對于不再有用的變量打上標記，以備將來收回其內存。用于標記的無用變量的策略可能因實現(xiàn)而有所區(qū)別，通常情況下有兩種實現(xiàn)方式：標記清除和引用計數(shù)。引用計數(shù)不太常用，標記清除較為常用。

2、標記清除

js中最常用的垃圾回收方式就是標記清除。當變量進入環(huán)境時，例如，在函數(shù)中聲明一個變量，就將這個變量標記為“進入環(huán)境”。從邏輯上講，永遠不能釋放進入環(huán)境的變量所占用的內存，因為只要執(zhí)行流進入相應的環(huán)境，就可能會用到它們。而當變量離開環(huán)境時，則將其標記為“離開環(huán)境”。

1.  
   function test(){
2.  
   var a= 10; //被標記，進入環(huán)境
3.  
   var b= 20; //被標記，進入環(huán)境
4.  
   }
5.  
   test(); //執(zhí)行完畢之后a、b又被標記離開環(huán)境，被回收

3、引用此時

引用計數(shù)的含義是跟蹤記錄每個值被引用的次數(shù)。當聲明了一個變量并將一個引用類型值（function object array）賦給該變量時，則這個值的引用次數(shù)就是1。如果同一個值又被賦給另一個變量，則該值的引用次數(shù)加1。相反，如果包含對這個值引用的變量又取得了另外一個值，則這個值的引用次數(shù)減1。當這個值的引用次數(shù)變成0時，則說明沒有辦法再訪問這個值了，因而就可以將其占用的內存空間回收回來。這樣，當垃圾回收器下次再運行時，它就會釋放那些引用次數(shù)為0的值所占用的內存。

1.  
   function test(){
2.  
   var a={}; //a的引用次數(shù)為0
3.  
   var b=a; //a的引用次數(shù)加1，為1
4.  
   var c=a; //a的引用次數(shù)加1，為2
5.  
   var b={}; //a的引用次數(shù)減1，為1
6.  
   }

4、哪些操作會造成內存泄露

1）意外的全局變量引起的內存泄露

1.  
   function leak(){
2.  
   leak= "xxx"; //leak成為一個全局變量，不會被回收
3.  
   }

2）閉包引起的內存泄露

1.  
   function bindEvent(){
2.  
   var obj= document.createElement( "XXX");
3.  
   obj.οnclick= function(){
4.  
   //Even if it's a empty function
5.  
   }
6.  
   }

閉包可以維持函數(shù)內局部變量，使其得不到釋放。 上例定義事件回調時，由于是函數(shù)內定義函數(shù)，并且內部函數(shù)--事件回調的引用外暴了，形成了閉包。

解決之道，將事件處理函數(shù)定義在外部，解除閉包,或者在定義事件處理函數(shù)的外部函數(shù)中，刪除對dom的引用。

1.  
   //將事件處理函數(shù)定義在外部
2.  
   function onclickHandler(){
3.  
   //do something
4.  
   }
5.  
   function bindEvent(){
6.  
   var obj= document.createElement( "XXX");
7.  
   obj.onclick=onclickHandler;
8.  
   }

1.  
   //在定義事件處理函數(shù)的外部函數(shù)中，刪除對dom的引用
2.  
   function bindEvent(){
3.  
   var obj= document.createElement( "XXX");
4.  
   obj.οnclick= function(){
5.  
   //Even if it's a empty function
6.  
   }
7.  
   obj= null;
8.  
   }

3）沒有清理的DOM元素引用

1.  
   var elements={
2.  
   button: document.getElementById( "button"),
3.  
   image: document.getElementById( "image"),
4.  
   text: document.getElementById( "text")
5.  
   };
6.  
   function doStuff(){
7.  
   image.src= "http://some.url/image";
8.  
   button.click():
9.  
   console.log(text.innerHTML)
10.  
    }
11.  
    function removeButton(){
12.  
    document.body.removeChild( document.getElementById( 'button'))
13.  
    }

4）被遺忘的定時器或者回調

1.  
   var someResouce=getData();
2.  
   setInterval( function(){
3.  
   var node= document.getElementById( 'Node');
4.  
   if(node){
5.  
   node.innerHTML= JSON.stringify(someResouce)
6.  
   }
7.  
   }, 1000)

這樣的代碼很常見, 如果 id 為 Node 的元素從 DOM 中移除, 該定時器仍會存在, 同時, 因為回調函數(shù)中包含對 someResource 的引用, 定時器外面的 someResource 也不會被釋放。

5）子元素存在引起的內存泄露

黃色是指直接被 js變量所引用，在內存里，紅色是指間接被 js變量所引用，如上圖，refB 被 refA 間接引用，導致即使 refB 變量被清空，也是不會被回收的子元素 refB 由于 parentNode 的間接引用，只要它不被刪除，它所有的父元素（圖中紅色部分）都不會被刪除。

6）IE7/8引用計數(shù)使用循環(huán)引用產生的問題

1.  
   function fn(){
2.  
   var a={};
3.  
   var b={};
4.  
   a.pro=b;
5.  
   b.pro=a;
6.  
   }
7.  
   fn();

fn()執(zhí)行完畢后，兩個對象都已經(jīng)離開環(huán)境，在標記清除方式下是沒有問題的，但是在引用計數(shù)策略下，因為a和b的引用次數(shù)不為0，所以不會被垃圾回收器回收內存，如果fn函數(shù)被大量調用，就會造成內存泄漏。在IE7與IE8上，內存直線上升。

IE中有一部分對象并不是原生js對象。例如，其內存泄漏DOM和BOM中的對象就是使用C++以COM對象的形式實現(xiàn)的，而COM對象的垃圾回收機制采用的就是引用計數(shù)策略。因此，即使IE的js引擎采用標記清除策略來實現(xiàn)，但js訪問的COM對象依然是基于引用計數(shù)策略的。換句話說，只要在IE中涉及COM對象，就會存在循環(huán)引用的問題。

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

上面的例子在一個DOM元素（element)與一個原生js對象（myObject)之間創(chuàng)建了循環(huán)引用。其中，變量myObject有一個名為e的屬性指向element對象；而變量element也有一個屬性名為o回指myObject。由于存在這個循環(huán)引用，即使例子中的DOM從頁面中移除，它也永遠不會被回收。

看上面的例子，有人會覺得太弱了，誰會做這樣無聊的事情，但是其實我們經(jīng)常會這樣做

1.  
   window.onload= function outerFunction(){
2.  
   var obj= document.getElementById( "element"):
3.  
   obj.onclick= function innerFunction(){};
4.  
   };

這段代碼看起來沒什么問題，但是obj引用了document.getElementById(“element”)，而document.getElementById(“element”)的onclick方法會引用外部環(huán)境中的變量，自然也包括obj，是不是很隱蔽啊。

最簡單的解決方式就是自己手工解除循環(huán)引用，比如剛才的函數(shù)可以這樣

1.  
   myObject.element= null;
2.  
   element.o= null;
3.  
   window.οnlοad= function outerFunction(){
4.  
   var obj= document.getElementById( "element"):
5.  
   obj.οnclick= function innerFunction(){};
6.  
   obj= null;
7.  
   };

將變量設置為null意味著切斷變量與它此前引用的值之間的連接。當垃圾回收器下次運行時，就會刪除這些值并回收它們占用的內存。 要注意的是，IE9+并不存在循環(huán)引用導致Dom內存泄漏問題，可能是微軟做了優(yōu)化，或者Dom的回收方式已經(jīng)改變

5、如何分析內存的使用情況

Google Chrome瀏覽器提供了非常強大的JS調試工具，Memory 視圖  profiles 視圖讓你可以對 JavaScript 代碼運行時的內存進行快照，并且可以比較這些內存快照。它還讓你可以記錄一段時間內的內存分配情況。在每一個結果視圖中都可以展示不同類型的列表，但是對我們最有用的是 summary 列表和 comparison 列表。  summary 視圖提供了不同類型的分配對象以及它們的合計大?。簊hallow size （一個特定類型的所有對象的總和）和 retained size （shallow size 加上保留此對象的其它對象的大?。?。distance 顯示了對象到達 GC 根（校者注：最初引用的那塊內存，具體內容可自行搜索該術語）的最短距離。 comparison 視圖提供了同樣的信息但是允許對比不同的快照。這對于找到泄漏很有幫助。

6、怎樣避免內存泄露

1）減少不必要的全局變量，或者生命周期較長的對象，及時對無用的數(shù)據(jù)進行垃圾回收；

2）注意程序邏輯，避免“死循環(huán)”之類的 ；

3）避免創(chuàng)建過多的對象  原則：不用了的東西要及時歸還。