JQuery高性能最佳實踐

【使用最佳選擇器】

使用JQuery時，你可以使用多種選擇器，選擇同一個元素，各種方法之間的性能是不一樣的，有時候差異會特別大。 通常比較常用的選擇器有以下幾個：

1. ID選擇器 $("#id")

2. 標簽選擇器 $("td")

3. 類選擇器 $(".target")

4. 屬性選擇器 $("td[target='target']")

5. 偽類選擇器 $("td:hidden")

根據經驗，我們應該知道這5種選擇器的性能是依次下降的，我們不妨來做個測試，看看他們的性能到底有多大差異：

• 測試html片段：

 <table width="98%" cellspacing="1" cellpadding="0" border="0"  id="mytable">
   <tr>
     <td bgcolor="#aaaaaa" align="center" class="target" target="target"  id="target-td">e</td>
   </tr>
 </table>

測試結果

• 測試方案：對每個腳本執行1w次，統計3次運行結果的平均值

結論

1. 原生方法是最快的方法，如果可能，盡量選擇用原生

2. 性能順序：ID選擇器 > 標簽選擇器 > 類選擇器 > 屬性選擇器 > 偽類選擇器

3. ID(getElementById)、標簽選擇器(getElementsByTagName)都有原生的方法對應，所以很快；類選擇器在除了IE5-IE8之外的主流瀏覽器幾乎都有原生方法(getElementsByClassName)

4. 為了兼顧IE6、7、8的性能，避免使用全局的類選擇器；

5. 屬性和偽類選擇器非常慢，如非必要，盡量少使用偽類選擇器和屬性選擇器

最佳實踐

1. 為模塊中操作最頻繁的元素和根元素設置id，然后緩存；

2. 對沒有id的元素檢索，盡量采用路徑最短的祖先元素id作為默認的搜索范圍，并采用純類選擇器或者標簽選擇器；

3. 盡量避免復雜的選擇器

【避免執行全局查找】

 $("div.bizHelp");

=>

 $("#container").find(".bizHelp");

保證查詢的路徑最短，性能最優，參照第一條；

【避免對空結果進行操作】

對于數量為0的選擇結果，JQuery會執行默認動作，并且不會報錯，這會影響程序的性能。

 var blank=$(".blank");//length=0

A :

 blank.slideUp();

B:

 blank.length && blank.slideUp();

測試結果

• 測試說明：1w次執行耗時，單位毫秒/ms,統計三次運行的平均值

結論

應該避免對空對象進行操作；

【采用樣式表，避免多次調整樣式】

對一個對象應用多個樣式，最好采用樣式表的方式，避免多次應用。

var obj=$("#obj");

• A:

 obj.css("width",200);
 obj.css("height",200);
 obj.css("background":"#eee");

• B:

 obj.attr("style","width:200px;height:200px;background:#eee;");

• C:

 .css-operation{width:200px;height:200px;background:#eee;}
 
 obj.addClass("css-operation")

測試結果

• 測試說明：1w次執行耗時，單位毫秒/ms,統計三次運行的平均值

結論

1. 性能排序：C>B>A

2. 樣式和JS分離的方案性能最佳，適用于要同時設置多個樣式的場景；

3. 如果只應用單個樣式，簡單起見可以考慮采用方案A

4. 如果應多若干個樣式，而且不愿意新建一個css class，可以采用B；

【避免使用匿名函數】

大量的使用匿名函數會對程序的調試、維護以及通過第三方軟件來做性能測試增加難度，因此應該盡量避免大量的使用匿名函數

 obj.click(function(){
   //do something...
 })

=>>

 var clickHandler=function(){
   //do something...
 }
 obj.click(clickHandler)

【大循環采用更高效的遍歷方式】

JQuery提供了$.fn.each()和$.each()兩個方法來實現對集合的遍歷，除此之外，還可以采用JS原生的for循環、while等來實現迭代，應該了解一下他們之間的性能差異：

 var list=ul.find("li"),e;

• A:

 var i=list.length;
 while(i--){
     e=$(list[i])
 }

• B:

 list.each(function(){
   e=$(this);
 });

• C:

 $.each(list,function(){
   e=$(this);
 });

測試結果

• 測試說明：1w次執行耗時，單位毫秒/ms,統計三次運行的平均值

結論

1. 總體上來說A>C>B

2. 方案A有大約25%的性能提升，但是不穩定；

3. 在IE瀏覽器下B方案和C方案性能相當，A方案有比較絕對的優勢；

4. Chrome、firefox下A方案的性能不穩定；

最佳實踐

1. 追求極致性能，用方案A；

2. 循環數量少的話，建議使用方案C，比較穩定；

【優先使用原生屬性】

很多常用的屬性，比如id、name等都被瀏覽器原生實現，在JQuery中我們有時會用$(this).attr("id")的方式來獲取id，這種方法的效率相比原生屬性的獲取效率而言，非常慢。

 $.each(list,function(){
   //A
   var id=$(this).attr("id");

   //B
   var id=this.id;
 })

測試結果

• 測試說明：10w次執行耗時，單位毫秒/ms,統計三次運行的平均值

結論

1. 使用原生的API，可以極大的提高性能

最佳實踐

1. 對于id等常用的屬性，用原生的屬性，不要通過attr去獲取；

【使用事件委托】

經常會遇到給一個列表中所有元素添加點擊事件的業務場景，傳統的做法是得到這個列表的JQuery對象:$("li"),然后添加click事件：

 $("li").click(function(){})

這種方法的在列表數量比較大的時候會有嚴重的性能問題，應該值得關注。JQuery在很早的版本中已經引入了事件委托機制，可以很大程度的降低添加事件監聽的消耗和內存的消耗。

對1w條記錄的列表進行測試：

• A:

 var list=$("li");//length>1
   list.click(function(){
 })

• B:

 $("ul").delegate("li","click",function(){})

測試結果

• 測試說明：對1w個<li>標簽進行click事件添加的耗時，單位毫秒/ms,統計三次運行的平均值

結論

1. 委托的性能優勢是非常絕對的；

最佳實踐

1. 對于需要同時給兩個以上的同類型元素添加事件時，用方案B來代替A

【緩存查找的中間結果】

 $(".list-item").show();
 $(".list-item").hide();

=>

 var listItem=$(".list-item");
 listItem.show();
 listItem.hide();

【減少DOM操作，盡量批量更新】

Dom操作是瀏覽器操作中最為耗時的操作之一，JQuery中提供了append、appendTo、prepend、prependTo、after、before、insertAfter、wrap等操作dom的實用方法，頻繁使用這些方法可能會引起性能問題，一個提高性能的實踐原則就是“盡可能少的使用它們”。 如果一定要用到，也盡可能的采用合并、批量操作來減少dom的操作消耗。

【使用$.data 而不是$.fn.data】

 $(elem).data(key,value);
 $.data(elem,key,value);

后者比前者快近10倍

【可能的話，使用最新版本的JQuery】

新版本總會對性能進行改進，還會提供一些非常好用的工具，如果可以的話，應該盡量選用最新的版本；

【jQuery html性能大坑】

jQuery的html方法的作用是為dom元素設置innerHTML，分析html的源代碼（1.8.3）

if ( elem.nodeType === 1 ) {
    jQuery.cleanData( elem.getElementsByTagName( "*" ) );
    elem.innerHTML = value;
}

在設置dom的innerHTML之前，會執行jQuery.cleanData，這個方法會對dom元素做一些clean的處理，如removeEvent，刪除緩存等。
以兩百行的列表為例，在ff瀏覽器中，該方法會執行大約5ms到8ms。即當dom元素為空時和dom元素中有兩百行數據時，執行html方法，后者會比前者多運行5ms到8ms。
坑點
cleanData方法在jQueryUI中也會定義，且會重寫$.cleanData，增加一些額外的操作，性能會受到影響。
還是以兩百行的列表為例，在ff瀏覽器中，該方法會執行大約60ms到70ms。即當dom元素為空時和dom元素中有兩百行數據時，執行html方法，后者會比前者多運行60ms到70ms。
解決方案
1. 采用原生的dom.innerHTML
2.在執行html()方法之前，先執行remove()方法