jQuery不同選擇器性能比較
有大量的日志文章論述了jQuery選擇器及它們的性能影響。正如你所知，可以通過ID, TagName或ClassName選擇元素。依賴于不同的選擇器，jQuery會(huì)使用瀏覽器本地方法，如通過ID或標(biāo)簽來選擇元素，或者在使用類名選擇時(shí)須手工從DOM中遍歷獲得元素(因?yàn)樵贗E中不存在相應(yīng)的 getElementsByClssName)。
分析我的頁面時(shí)間中這2秒
在onLoad處理器中對頁面中某些特定的元素使用jQuery設(shè)置為隱藏，顯示或改變樣式表。這里是一個(gè)代碼片斷：
onLoad中的jQuery腳本樣例
onLoad中的jQuery腳本樣例
在onLoad事件處理器中充滿著這樣的調(diào)用。通過使用免費(fèi)的dynaTrace AJAX Edition, 你會(huì)看到被解析為選擇器的$調(diào)用，并跟隨著那些方法調(diào)用，選擇器至少都能獲取到一個(gè)對象。下面通過PurePath對onLoad事件處理器的觀察，不僅給我們展示了每次選擇器調(diào)用所耗費(fèi)的時(shí)間，還包括在不只一個(gè)對象時(shí)實(shí)際找到的對象數(shù)(下面還沒有哪個(gè)方法調(diào)用是連一個(gè)對象都找不到的)。
非必要的jQuery選擇器調(diào)用導(dǎo)致無謂的開銷
所有紅色標(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)了那么長時(shí)間，是因?yàn)樗鼈儗?shí)際進(jìn)行了許多的調(diào)用來完成請求。Invocation 列告訴了我們該方法被它的父級所調(diào)用的頻度。這里我們可看出一些對象實(shí)際被解析了多次，比如: “.pop-cart”。***的做法應(yīng)該是只解析一次得到對象并緩存起來。
這里我們學(xué)到的***課是上面多數(shù)調(diào)用是非必要的，只會(huì)產(chǎn)生過量的消耗。如果你明確知道你需要解析出哪些頁面元素，那就不要試圖去解析其他的對象。我知道，用全局的腳本文件來處理不同頁面中的不同內(nèi)容會(huì)導(dǎo)致出現(xiàn)這樣的情況–但是–你是否真愿意在這種無謂的開銷中生活呢？
分析jQuery選擇器的差異
在分析頁面上的***個(gè)問題是致使了太多的非必要$調(diào)用。繼而帶來的另一個(gè)疑問就是為何某些$方法響應(yīng)很快(幾微秒)，而有些卻用了相當(dāng)長的時(shí)間(超過100ms)。回到我的頁面中來，它向我提示了如下的結(jié)論：
ID選擇器，也就是使用了getElementById，是最快的
下圖展示了一個(gè)使用ID的選擇器。它使用了getElementById，因此很快就返回了。
jQuery ID選擇器
TagName選擇器使用的是getElementsByTagName
下面的例子是通過TagName搭配ClassName 來選擇元素。jQuery首先使用本地實(shí)現(xiàn)getElementsByTagName來獲得所有指定標(biāo)簽的元素。接著遍歷它們針對ClssName進(jìn)行過濾。
ClassName選擇器需要遍歷所有的DOM元素
如果你只用ClassName選擇器 - jQuery需要遍歷DOM中的每一個(gè)元素，因?yàn)樵贗nternet Explorer(對于FireFox是另一番情景)中沒有對應(yīng)于 getElementsByClassName的本地實(shí)現(xiàn)。下圖顯示了在一直有著3460個(gè)DOM元素的頁面中選擇器使用開銷的情況。
jQuery ClassName選擇器
小結(jié)
依賴于你的Web站點(diǎn)的大小(指DOM元素的數(shù)量), 你需要考慮每個(gè)單獨(dú)的選擇器方法的開銷。相比于通過ClassName來選擇，你應(yīng)該優(yōu)先考慮用TagName 搭配ClassName來選擇，或是在你的頁面只有少量對象時(shí)用唯一性的ID來選擇。而且- 確保緩存了已解析獲得的對象，以避免再次解析調(diào)用時(shí)的開始。還有 – ***也是應(yīng)該予以重視的一點(diǎn) – 避免不必要的調(diào)用。如前面頁面我所分析的 – 2 秒中有超過1.5秒是可以規(guī)避那些調(diào)用來省去的。
譯文鏈接：http://www.blogjava.net/Unmi/archive/2009/11/24/303477.html
原文鏈接：http://blog.dynatrace.com/2009/11/09/101-on-jquery-selector-performance/
【編輯推薦】
