web優化 js性能高級篇

今天咱們繼續上一個階段關於web的性能優化,如何對js高級進行優化

（1）閉包

何爲閉包; 一個擁有許多變量和綁定了這些變量的環境的表達式（一般是一個函數），於是這些變量也是該表達式的一部分.  我認爲比較通俗的理解就是;

閉包就是可以讀取其餘函數內部變量的函數。

因爲在Javascript語言中，只有函數內部的子函數才能讀取局部變量，所以能夠把閉包簡單理解成"定義在一個函數內部的函數"。

因此，在本質上，閉包就是將函數內部和函數外部鏈接起來的一座橋樑。(@阮一峯)

閉包如何優化體如今性能裏面？

一、匿名自執行函數

　　咱們知道全部的變量，若是不加上var關鍵字，則默認的會添加到全局對象的屬性上去，這樣的臨時變量加入全局對象有不少壞處，

好比：別的函數可能誤用這些變量；形成全局對象過於龐大，影響訪問速度(由於變量的取值是須要從原型鏈上遍歷的)。除了每次使用變量都是用var關鍵字外，咱們在實際狀況下常常遇到這樣一種狀況，即有的函數只須要執行一次，其內部變量無需維護，

var data= {    
    table : [],    
    tree : {}    
};       
(function(dm){    
    for(var i = 0; i < dm.table.rows; i++){    
       var row = dm.table.rows[i];    
       for(var j = 0; j < row.cells; i++){    
           drawCell(i, j);    
       }    
    }    
})(data);  

咱們建立了一個匿名的函數，並當即執行它，因爲外部沒法引用它內部的變量，所以在函數執行完後會馬上釋放資源，關鍵是不污染全局對象。

二、結果緩存

咱們開發中會碰到不少狀況，設想咱們有一個處理過程很耗時的函數對象，每次調用都會花費很長時間，那麼咱們就須要將計算出來的值存儲起來，當調用這個函數的時候，首先在緩存中查找，若是找不到，則進行計算，而後更新緩存並返回值，若是找到了，直接返回查找到的值便可。閉包正是能夠作到這一點，由於它不會釋放外部的引用，從而函數內部的值能夠得以保留。

var CachedSearchBox = (function(){    
    var cache = {},    
       count = [];    
    return {    
       attachSearchBox : function(dsid){    
           if(dsid in cache){//若是結果在緩存中    
              return cache[dsid];//直接返回緩存中的對象    
           }    
           var fsb = new uikit.webctrl.SearchBox(dsid);//新建    
           cache[dsid] = fsb;//更新緩存    
           if(count.length > 100){//保正緩存的大小<=100    
              delete cache[count.shift()];    
           }    
           return fsb;          
       },    
       clearSearchBox : function(dsid){    
           if(dsid in cache){    
              cache[dsid].clearSelection();      
           }    
       }    
    };    
})();    
CachedSearchBox.attachSearchBox("input");    

 （2）Jquery樣式選擇器

jQuery選擇器有關的性能問題是儘可能採用鏈式調用來操做和緩存選擇器結果集。由於每個$()的調用都會致使一次新的查找，因此，採用鏈式調用和設置變量緩存結果集，減小查找，提高性能。

鏈式調用示例:

$(document).ready(function() {
  function stripe() {
    $('#news').find('tr.alt').removeClass('alt').end().find('tbody').each(function() {
        $(this).children(':visible').has('td').filter(':group(3)').addClass('alt');
   });
  }
 stripe();
});

經過鏈式調用，採用find(),end(),children(),has,filter()等方法，來過濾結果集，減小$()查找方法調用，提高性能。

緩存結果集示例：

$(document).ready(function() {
   var $news = $('#news');
   function stripe() {
      $news.find('tr.alt').removeClass('alt');
      $news.find('tbody').each(function() {
         $(this).children(':visible').has('td').filter(':group(3)').addClass('alt');
      });
   }
   stripe();
});

經過聲明$news變量緩存$(‘#news’)結果集，從而提高後面結果集對象調用方法的性能。

（3）惰性載入函數 
①惰性載入表示函數執行的分支僅會發生一次：既第一次調用的時候。在第一次調用的過程當中，該函數會被覆蓋爲另外一個按合適方式執行的函數，這樣任何對原函數的調用都不用再通過執行的分支了。 
■優勢： 
□要執行的適當代碼只有當實際調用函數時才進行。 
□儘管第一次調用該函數會因額外的第二個函數調用而稍微慢點，但後續的調用都會很快，因避免了多重條件。 

（4） 函數柯里化 定義：用於建立已經設置好了一個或多個參數的函數。函數柯里化的基本方法和函數綁定是同樣的：使用一個閉包返回一個函數。二者的區別在於，當函數被調用時，返回函數還須要設置一些傳入的參數。