有大量的日志文章論述了jQuery選擇器及它們的性能影響。正如你所知，可以通過(guò)ID, TagName或ClassName選擇元素。依賴于不同的選擇器，jQuery會(huì)使用瀏覽器本地方法，如通過(guò)ID或標(biāo)簽來(lái)選擇元素，或者在使用類名選擇時(shí)須手工從DOM中遍歷獲得元素(因?yàn)樵贗E中不存在相應(yīng)的 getElementsByClssName)。

分析我的頁(yè)面時(shí)間中這2秒

在onLoad處理器中對(duì)頁(yè)面中某些特定的元素使用jQuery設(shè)置為隱藏，顯示或改變樣式表。這里是一個(gè)代碼片斷：

 
onLoad中的jQuery腳本樣例

onLoad中的jQuery腳本樣例

在onLoad事件處理器中充滿著這樣的調(diào)用。通過(guò)使用免費(fèi)的dynaTrace AJAX Edition, 你會(huì)看到被解析為選擇器的$調(diào)用，并跟隨著那些方法調(diào)用，選擇器至少都能獲取到一個(gè)對(duì)象。下面通過(guò)PurePath對(duì)onLoad事件處理器的觀察，不僅給我們展示了每次選擇器調(diào)用所耗費(fèi)的時(shí)間，還包括在不只一個(gè)對(duì)象時(shí)實(shí)際找到的對(duì)象數(shù)(下面還沒(méi)有哪個(gè)方法調(diào)用是連一個(gè)對(duì)象都找不到的)。

 
非必要的jQuery選擇器調(diào)用導(dǎo)致無(wú)謂的開銷

所有紅色標(biāo)記的調(diào)用都未返回一個(gè)元素，因?yàn)椴淮嬖谥苯踊诓樵儣l件的DOM元素。JavaScript列顯示了每一次單獨(dú)方法調(diào)用的執(zhí)行時(shí)間–范圍在 1ms 到大于 100 ms。Size列告訴了我們每次單獨(dú)的調(diào)用產(chǎn)生了多少次的JavaScript/DOM的方法調(diào)用(譯者注：指瀏覽器本地的調(diào)用)。這里我們也能明白，為什么某些 $ 調(diào)用花費(fèi)了那么長(zhǎng)時(shí)間，是因?yàn)樗鼈儗?shí)際進(jìn)行了許多的調(diào)用來(lái)完成請(qǐng)求。Invocation 列告訴了我們?cè)摲椒ū凰母讣?jí)所調(diào)用的頻度。這里我們可看出一些對(duì)象實(shí)際被解析了多次，比如: “.pop-cart”。***的做法應(yīng)該是只解析一次得到對(duì)象并緩存起來(lái)。

這里我們學(xué)到的***課是上面多數(shù)調(diào)用是非必要的，只會(huì)產(chǎn)生過(guò)量的消耗。如果你明確知道你需要解析出哪些頁(yè)面元素，那就不要試圖去解析其他的對(duì)象。我知道，用全局的腳本文件來(lái)處理不同頁(yè)面中的不同內(nèi)容會(huì)導(dǎo)致出現(xiàn)這樣的情況–但是–你是否真愿意在這種無(wú)謂的開銷中生活呢？

分析jQuery選擇器的差異

在分析頁(yè)面上的***個(gè)問(wèn)題是致使了太多的非必要$調(diào)用。繼而帶來(lái)的另一個(gè)疑問(wèn)就是為何某些$方法響應(yīng)很快(幾微秒)，而有些卻用了相當(dāng)長(zhǎng)的時(shí)間(超過(guò)100ms)。回到我的頁(yè)面中來(lái)，它向我提示了如下的結(jié)論：

ID選擇器，也就是使用了getElementById，是最快的

下圖展示了一個(gè)使用ID的選擇器。它使用了getElementById，因此很快就返回了。

 
jQuery ID選擇器

TagName選擇器使用的是getElementsByTagName

下面的例子是通過(guò)TagName搭配ClassName 來(lái)選擇元素。jQuery首先使用本地實(shí)現(xiàn)getElementsByTagName來(lái)獲得所有指定標(biāo)簽的元素。接著遍歷它們針對(duì)ClssName進(jìn)行過(guò)濾。

ClassName選擇器需要遍歷所有的DOM元素

如果你只用ClassName選擇器 - jQuery需要遍歷DOM中的每一個(gè)元素，因?yàn)樵贗nternet Explorer(對(duì)于FireFox是另一番情景)中沒(méi)有對(duì)應(yīng)于 getElementsByClassName的本地實(shí)現(xiàn)。下圖顯示了在一直有著3460個(gè)DOM元素的頁(yè)面中選擇器使用開銷的情況。

 
jQuery ClassName選擇器

小結(jié)

依賴于你的Web站點(diǎn)的大小(指DOM元素的數(shù)量), 你需要考慮每個(gè)單獨(dú)的選擇器方法的開銷。相比于通過(guò)ClassName來(lái)選擇，你應(yīng)該優(yōu)先考慮用TagName 搭配ClassName來(lái)選擇，或是在你的頁(yè)面只有少量對(duì)象時(shí)用唯一性的ID來(lái)選擇。而且- 確保緩存了已解析獲得的對(duì)象，以避免再次解析調(diào)用時(shí)的開始。還有 – ***也是應(yīng)該予以重視的一點(diǎn) – 避免不必要的調(diào)用。如前面頁(yè)面我所分析的 – 2 秒中有超過(guò)1.5秒是可以規(guī)避那些調(diào)用來(lái)省去的。

譯文鏈接：http://www.blogjava.net/Unmi/archive/2009/11/24/303477.html

原文鏈接：http://blog.dynatrace.com/2009/11/09/101-on-jquery-selector-performance/

【編輯推薦】

1. jQuery數(shù)組處理完全詳解(實(shí)例演示)
2. 大師之間的論戰(zhàn) jQuery之父談YUI3差在哪
3. jQuery的運(yùn)行機(jī)制和設(shè)計(jì)理念