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" style="table-layout:fixed" id="mytable">
   <tr>
     <td bgcolor="#aaaaaa" align="center" class="target" target="target" style="display:none;" id="target-td">e</td>
   </tr>
 </table>

測試結果

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

方案	IE6	IE7	IE8	IE9	chrome	firefox	opera	safari
$("#mytable td.target")	5150	5630	780	293	69	148	31	102
$("#mytable .target")	5320	5780	940	297	61	141	32	101
$("#mytable").find("td.target")	4840	5000	1250	387	95	205	73	157
$("#mytable").find(".target")	5000	5150	1400	226	49	130	60	64
$("#mytable td[target=target]")	16410	17660	940	406	89	166	35	120
$("#mytable td:hidden")	25000	26720	23750	3638	632	1123	3434	569
$("#target-td")	630	620	310	62	9	28	12	18
$(".target")	10310	10790	940	207	36	181	47	44
document.getElementById("target-td")	150	150	160	6	1	1	5	2

結論

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,統計三次運行的平均值

方案	IE6	IE7	IE8	IE9	chrome	firefox	opera	safari
A	6110	5610	1344	488	103	194	108	155
B	0	0	0	0	0	0	0	0

結論

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

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

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

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,統計三次運行的平均值

方案	IE6	IE7	IE8	IE9	chrome	firefox	opera	safari
A	2594	2486	1500	501	163	222	190	191
B	1000	953	547	190	79	28	15	86
C	843	672	407	111	21	17	16	31

結論

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,統計三次運行的平均值

方案	IE6	IE7	IE8	IE9	chrome	firefox	opera	safari
A	172	219	157	30	3	5	4	6
B	219	234	203	41	4	6	5	8
C	219	234	187	52	3	4	5	7

結論

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,統計三次運行的平均值

方案	IE6	IE7	IE8	IE9	chrome	firefox	opera	safari
A	6880	7030	4220	1188	157	244	133	135
B	310	310	150	27	4	5	17	3

結論

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,統計三次運行的平均值

方案	IE6	IE7	IE8	IE9	chrome	firefox	opera	safari
A	2156	2172	1922	312	103	173	141	117
B	0	0	0	0	0	0	0	0

結論

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()方法