Javascript語言有自己的一套記憶體回收機制，一般情況下區域性變數和物件使用完就會被系統自動回收，無需我們理會。但是碰到閉包的情況這些變數和物件是不會被回收的，對於普通的web站點，頁面重新整理或跳轉這些記憶體也會被回收。如果是單頁web站點，頁面切換及資料請求都是通過ajax無重新整理機制實現的，頁面資源無法自動回收，時間長了會嚴重影響效能，造成記憶體洩漏甚至頁面崩潰直接退出，這時候手動釋放不用資源就非常必要了，包含刪除dom、釋放物件等，這篇文章介紹如何釋放JS物件。

一、在此之前我們需要學會使用Chrome的記憶體分析工具來檢視頁面各個物件的記憶體佔用情況

1、在開發者工具中選中Profiles,選擇Take Heap Snapshot,點選Take Snapshot按鈕

2、選中生成的Heap Snapshot報表，在右邊輸入要查詢的物件

來看看下面幾個例子【注：例子實現的功能實際意義，只是為了展示今天要講的東西】：

html部分:

<style>
        .div1,.div2 {
        width:100px;
        height:100px;
        border:1px solid red;
        }
    </style>

<div class="div1">
        div1
    </div>
    <div class="div2">
        div2
    </div>

二、沒有形成閉環，建立的物件使用完後自動銷燬或手動設為null銷燬

1、系統自動回收Test物件

window.onload=function(){

  function Test(Dom)
  {
  this.Dom=Dom;
 this.str='';
  }
  
  var div1=document.getElementsByClassName('div1')[0];
  var myTest=new Test(div1); 
  
  
 }

2、在div1上加了click事件監聽

window.onload=function(){

  function Test(Dom)
  {
  this.Dom=Dom;
 this.str='';
  this.dom.addEventListener('click', function () { }, false);
 }
  
  var div1=document.getElementsByClassName('div1')[0];
  var myTest=new Test(div1); 
  
  
 }
 

監聽函式中沒有對tes物件變數的引用，沒有形成閉包，故程式碼執行完後會自動銷燬

3、使用了延時執行

window.onload=function(){

  function Test(Dom)
  {
   this.Dom=Dom;
  this.str='';
   var self=this;
   var timer = window.setTimeout(function () {self.str='123';}，1000)
 }
  
  var div1=document.getElementsByClassName('div1')[0];
  var myTest=new Test(div1); 
   
 }

使用了window.setTimeout延遲，執行函式中有引用物件的屬性，但引用是一次性的，沒有形成閉環

4、使用了定時器

window.onload=function(){

  function Test(Dom)
  {
   this.Dom=Dom;
  this.str='';
   var self=this;
   var timer = window.setInterval(function () {}, 1000);
 }
  
  var div1=document.getElementsByClassName('div1')[0];
  var myTest=new Test(div1); 
   
 }

迴圈執行函式中沒有對物件屬性的引用，沒有形成閉環

三、形成了閉環，系統無法自動回收物件資源，也無法手動將物件設為null銷燬，只能刪除物件屬性的引用，再通過手動將物件設定為null銷燬

1、dom的監聽事件中有對物件屬性的引用

window.onload=function(){

  function Test(Dom)
  {
  this.Dom=Dom;
 this.str='';
  this.dom.addEventListener('click', function () {self.str='123'; }, false);
 }
  
  var div1=document.getElementsByClassName('div1')[0];
  var myTest=new Test(div1); 
   
 }

為了能夠移除監聽事件，我們將監聽函式單獨定義。再Test函式增加一個原型方法Destroy,作用就是刪除dom的click監聽事件，供外部呼叫。

給div2增加一個click事件，呼叫Test的destroy方法銷燬Test物件

window.onload=function(){

  function Test(Dom)
  {
  this.Dom=Dom;
 this.str=''; 
  this.A=function(){
      this.str='123';
  }

 this.dom.addEventListener('click', self.A, false);
 }

Test.prototype.destroy = function () {
  var self=this;
  this.dom.removeEventListener('click',self.A, false);
 }
 var div1=document.getElementsByClassName('div1')[0]; var myTest=new Test(div1);

//點選div2,銷燬Test物件
 var div2Obj = document.getElementsByClassName('div2')[0];
  div2Obj.onclick = function () {             
    myTest.destroy();
    myTest = null;
   }  } 點選div2後通過記憶體分析發現Test物件消失了，說明已經銷燬了

2、window.setInterval事件中有對物件屬性的引用

window.onload=function(){

  function Test(Dom)
  {
  this.Dom=Dom;
 this.str='';
  this.dom.addEventListener('click', function () {self.str='123'; }, false);
 }
  
  var div1=document.getElementsByClassName('div1')[0];
  var myTest=new Test(div1); 
   
 }

我們增加一個物件屬性timer來接收window.setInterval的控制代碼，在destory方法中清除定時器。

window.onload=function(){

  function Test(Dom)
  {
  this.Dom=Dom;
 this.str=''; 
  this.timer=null;
 this.timer = window.setInterval(function () { self.str = '123';}, 1000);
 }

  Test.prototype.destroy = function () {
  window.clearInterval(this.timer);
 }

 var div1=document.getElementsByClassName('div1')[0];  
  var myTest=new Test(div1); 

    //點選div2,銷燬Test物件
   var div2Obj = document.getElementsByClassName('div2')[0];
   div2Obj.onclick = function () {              
    myTest.destroy();
    myTest = null;
   }   
}

點選div2後通過記憶體分析發現Test物件消失了，說明已經銷燬了

從上面的例子可以看出，想手動釋放含有閉包的物件時，必須先將引用物件屬性的事件刪除，然後設定為null方可消耗物件。這種事件一般是可以多次執行的，如原生事件的監聽，定時器。一般比較有名較完善的外掛都有帶銷燬資源方法，如iscroll外掛，裡面就有一個destroy原型方法，它裡面也就是移除事件監聽和刪除定時器。大家可以去看看原始碼。

寫在最後

單頁web的效能優化之路任重而道遠，本文只是談了一下如何釋放建立的物件，其實還有很多可以優化的點：dom優化、動畫優化等。希望可以和大家一起討論。