【使用最佳選擇器】
使用JQuery時,你可以使用多種選擇器,選擇同一個元素,各種方法之間的性能是不一樣的,有時候差異會特別大。 通常比較常用的選擇器有以下幾個:
-
ID選擇器 $("#id")
-
標籤選擇器 $("td")
-
類選擇器 $(".target")
-
屬性選擇器 $("td[target='target']")
-
僞類選擇器 $("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 |
結論
-
原生方法是最快的方法,如果可能,儘量選擇用原生
-
性能順序:ID選擇器 > 標籤選擇器 > 類選擇器 > 屬性選擇器 > 僞類選擇器
-
ID(getElementById)、標籤選擇器(getElementsByTagName)都有原生的方法對應,所以很快;類選擇器在除了IE5-IE8之外的主流瀏覽器幾乎都有原生方法(getElementsByClassName)
-
爲了兼顧IE6、7、8的性能,避免使用全局的類選擇器;
-
屬性和僞類選擇器非常慢,如非必要,儘量少使用僞類選擇器和屬性選擇器
最佳實踐
-
爲模塊中操作最頻繁的元素和根元素設置id,然後緩存;
-
對沒有id的元素檢索,儘量採用路徑最短的祖先元素id作爲默認的搜索範圍,並採用純類選擇器或者標籤選擇器;
-
儘量避免複雜的選擇器
【避免執行全局查找】
$("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 |
結論
-
性能排序:C>B>A
-
樣式和JS分離的方案性能最佳,適用於要同時設置多個樣式的場景;
-
如果只應用單個樣式,簡單起見可以考慮採用方案A
-
如果應多若干個樣式,而且不願意新建一個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 |
結論
-
總體上來說A>C>B
-
方案A有大約25%的性能提升,但是不穩定;
-
在IE瀏覽器下B方案和C方案性能相當,A方案有比較絕對的優勢;
-
Chrome、firefox下A方案的性能不穩定;
最佳實踐
-
追求極致性能,用方案A;
-
循環數量少的話,建議使用方案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 |
結論
-
使用原生的API,可以極大的提高性能
最佳實踐
-
對於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 |
結論
-
委託的性能優勢是非常絕對的;
最佳實踐
-
對於需要同時給兩個以上的同類型元素添加事件時,用方案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()方法