使用***選擇器

使用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；

#p#

避免使用匿名函數

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

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

#p#

緩存查找的中間結果

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

原文鏈接：http://andashu.blog.51cto.com/8673810/1375329