使用最佳選擇器

? ? ?通常比較常用的選擇器有以下幾個：

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

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

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

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

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

????結論

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

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

????? ? 3.ID(getElementById)、標簽選擇器(getElementsByTagName)都有原生的方法對應，所以很快；類選擇器在除了IE5-IE8之外的主流瀏覽器幾乎都有原生方法(getElementsByClassName)，為了兼顧IE6、7、8的性能，避免使用全局的類選擇器；

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

????最佳實踐

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

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

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

????

?

避免執行全局查找

1	?$("div.bizHelp");

?

????????=>

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

?

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

?

?

避免對空結果進行操作

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

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

?

1	blank.slideUp();

?

? ? ? ? =>

1	blank.length?&&?blank.slideUp();

?

?

?

?

避免使用匿名函數

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

1	obj.click(function(){??

2	??//do?something...??

3

})

?

=>>

1	var?clickHandler=function(){??

2	??//do?something...??

3

}??

4	obj.click(clickHandler)

?

?

?

?

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

????????JQuery提供了$.fn.each()和$.each()兩個方法來實現對集合的遍歷，除此之外，還可以采用JS原生的for循環、while等來實現迭代：

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

?

????????A:

1	?var?i=list.length;??

2	????????while(i--){??

3	????????????e=$(list[i])??

4

????????}

?

????????B:

1	??list.each(function(){??

2	??????????e=$(this);??

3	????????});

?

????????C:

1	?$.each(list,function(){??

2	??????????e=$(this);??

3	????????});

?

????????結論

????????????總體上來說A>C>B

????????最佳實踐

????????????追求極致性能，用原生方法；

????????????循環數量少的話，建議使用$.each()，比較穩定；

?

?

?

優先使用原生屬性

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

1	$.each(list,function(){???

2

??//A

3	??var?id=$(this).attr("id");

4

???

5

??//B

6	??var?id=this.id;??

7

??})

?

????結論

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

????最佳實踐

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

?

?

?

使用事件委托

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

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

?

????這種方法的在列表數量比較大的時候會有嚴重的性能問題，應該值得關注。

????可以使用JQuery的事件委托機制，能很大程度的降低添加事件監聽的消耗和內存的消耗。

????A:

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

?

????B:

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

?

????????結論

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

????????最佳實踐

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

?

?

?

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

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

?

????????后者比前者快近10倍

?

總結

以上是生活随笔為你收集整理的JQuery常用功能的性能优化的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。