上周我認(rèn)真分析了一個Web 頁面，它在onLoad 事件中處理一段定制腳本文件用了4.8 秒。結(jié)果是其中2.8 秒消耗在動態(tài)菜單庫上(將會在博客中單獨記錄)，剩下的 2 秒花費在jQuery的選擇器上。分析顯示多數(shù)選擇器不返回任何對象，而那些會返回對象的選擇器可考慮用不同的選擇器來改善性能。

關(guān)于jQuery選擇器

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

分析我的頁面時間中這 2 秒

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

onLoad 中的 jQuery 腳本樣例

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

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

所有紅色標(biāo)記的調(diào)用都未返回一個元素，因為不存在直接基于查詢條件的 DOM 元素。JS 列顯示了每一次單獨方法調(diào)用的執(zhí)行時間--范圍在 1ms 到大于 100 ms。Size 列告訴了我們每次單獨的調(diào)用產(chǎn)生了多少次的 JavaScript/DOM 的方法調(diào)用(譯者注：指瀏覽器本地的調(diào)用)。這里我們也能明白，為什么某些 $ 調(diào)用花費了那么長時間，是因為它們實際進(jìn)行了許多的調(diào)用來完成請求。Invocation 列告訴了我們該方法被它的父級所調(diào)用的頻度。這里我們可看出一些對象實際被解析了多次，比如: ".pop-cart"。***的做法應(yīng)該是只解析一次得到對象并緩存起來。

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

分析 jQuery選擇器的差異

在分析頁面上的***個問題是致使了太多的非必要 $ 調(diào)用。繼而帶來的另一個疑問就是為何某些 $ 方法響應(yīng)很快(幾微秒)，而有些卻用了相當(dāng)長的時間(超過 100ms)。理論上的答案可以參看 jQuery Best Prtice Blog. 回到我的頁面中來，它向我提示了如下的結(jié)論：

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

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

jQuery ID 選擇器

TagName 選擇器使用的是 getElementsByTagName

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

jQuery 的 Tag 和 ClassName 選擇器

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

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

jQuery ClassName 選擇器

小結(jié)

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

原文標(biāo)題：101 on jQuery Selector Performance

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