JQuery常用功能的性能优化
使用最佳選擇器
? ? ?通常比較常用的選擇器有以下幾個(gè)：
????????1.ID選擇器 $("#id")
????????2.標(biāo)簽選擇器 $("td")
????????3.類選擇器 $(".target")
????????4.屬性選擇器 $("td[target='target']")
????????5.偽類選擇器 $("td:hidden")
????結(jié)論
????? ? 1.原生方法是最快的方法，如果可能，盡量選擇用原生
????? ? 2.性能順序：ID選擇器 > 標(biāo)簽選擇器 > 類選擇器 > 屬性選擇器 > 偽類選擇器
????? ? 3.ID(getElementById)、標(biāo)簽選擇器(getElementsByTagName)都有原生的方法對(duì)應(yīng)，所以很快；類選擇器在除了IE5-IE8之外的主流瀏覽器幾乎都有原生方法(getElementsByClassName)，為了兼顧IE6、7、8的性能，避免使用全局的類選擇器；
????????4.屬性和偽類選擇器非常慢，如非必要，盡量少使用偽類選擇器和屬性選擇器
????最佳實(shí)踐
????? ? 1.為模塊中操作最頻繁的元素和根元素設(shè)置id，然后緩存；
????? ? 2.對(duì)沒(méi)有id的元素檢索，盡量采用路徑最短的祖先元素id作為默認(rèn)的搜索范圍，并采用純類選擇器或者標(biāo)簽選擇器；
????????3.盡量避免復(fù)雜的選擇器
????
?
避免執(zhí)行全局查找
| 1 | ?$("div.bizHelp"); |
?
????????=>
| 1 | $("#container").find(".bizHelp"); |
?
????????保證查詢的路徑最短，性能最優(yōu)，參照第一條；
?
?
避免對(duì)空結(jié)果進(jìn)行操作
對(duì)于數(shù)量為0的選擇結(jié)果，JQuery會(huì)執(zhí)行默認(rèn)動(dòng)作，并且不會(huì)報(bào)錯(cuò)，這會(huì)影響程序的性能。
| 1 | var?blank=$(".blank");//length=0 |
?
| 1 | blank.slideUp(); |
?
? ? ? ? =>
| 1 | blank.length?&&?blank.slideUp(); |
?
?
?
?
避免使用匿名函數(shù)
大量的使用匿名函數(shù)會(huì)對(duì)程序的調(diào)試、維護(hù)以及通過(guò)第三方軟件來(lái)做性能測(cè)試增加難度，因此應(yīng)該盡量避免大量的使用匿名函數(shù)
| 1 | obj.click(function(){?? |
| 2 | ??//do?something...?? |
| 3 | }) |
?
=>>
| 1 | var?clickHandler=function(){?? |
| 2 | ??//do?something...?? |
| 3 | }?? |
| 4 | obj.click(clickHandler) |
?
?
?
?
大循環(huán)采用更高效的遍歷方式
????????JQuery提供了$.fn.each()和$.each()兩個(gè)方法來(lái)實(shí)現(xiàn)對(duì)集合的遍歷，除此之外，還可以采用JS原生的for循環(huán)、while等來(lái)實(shí)現(xiàn)迭代：
| 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 | ????????}); |
?
????????結(jié)論
????????????總體上來(lái)說(shuō)A>C>B
????????最佳實(shí)踐
????????????追求極致性能，用原生方法；
????????????循環(huán)數(shù)量少的話，建議使用$.each()，比較穩(wěn)定；
?
?
?
優(yōu)先使用原生屬性
????很多常用的屬性，比如id、name等都被瀏覽器原生實(shí)現(xiàn)，在JQuery中我們有時(shí)會(huì)用$(this).attr("id")的方式來(lái)獲取id，這種方法的效率相比原生屬性的獲取效率而言，非常慢。
| 1 | $.each(list,function(){??? |
| 2 | ??//A |
| 3 | ??var?id=$(this).attr("id"); |
| 4 | ??? |
| 5 | ??//B |
| 6 | ??var?id=this.id;?? |
| 7 | ??}) |
?
????結(jié)論
????????使用原生的API，可以極大的提高性能
????最佳實(shí)踐
????????對(duì)于id等常用的屬性，用原生的屬性，不要通過(guò)attr去獲取；
?
?
?
使用事件委托
?????給一個(gè)列表中所有元素添加點(diǎn)擊事件，傳統(tǒng)的做法是得到這個(gè)列表的JQuery對(duì)象:$("li"),然后添加click事件：
| 1 | $("li").click(function(){}) |
?
????這種方法的在列表數(shù)量比較大的時(shí)候會(huì)有嚴(yán)重的性能問(wèn)題，應(yīng)該值得關(guān)注。
????可以使用JQuery的事件委托機(jī)制，能很大程度的降低添加事件監(jiān)聽(tīng)的消耗和內(nèi)存的消耗。
????A:
| 1 | var?list=$("li");//length>1????list.click(function(){??}) |
?
????B:
| 1 | ??$("ul").delegate("li","click",function(){}) |
?
????????結(jié)論
????????委托的性能優(yōu)勢(shì)是非常絕對(duì)的；
????????最佳實(shí)踐
????????對(duì)于需要同時(shí)給兩個(gè)以上的同類型元素添加事件時(shí)，用方案B來(lái)代替A
?
?
?
使用$.data 而不是$.fn.data
| 1 | $(elem).data(key,value);??$.data(elem,key,value); |
?
????????后者比前者快近10倍
?
總結(jié)
以上是生活随笔為你收集整理的JQuery常用功能的性能优化的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： spring源码读书笔记(1)
- 下一篇： Tinkpad W540 BIOS b