jQuery代碼優化:選擇符篇

毫無疑問,jQuery的獨到之處就是它以集合爲中心的操作。爲了取得DOM對象集合,jQuery利用JavaScript不僅實現了(它誕生時)很多瀏覽器不支持的CSS選擇符,還實現了不少獨到的自定義選擇符,爲在文檔中查找元素提供了極大的便利。本文就從選擇符的角度簡單探討一下優化jQuery代碼的問題。

Sizzle的運行機制

jQuery從1.3開始把根據選擇符表達式查找元素的代碼獨立出來,也就是Sizzle引擎。當我們把一個選擇符表達式(比如"#id"、".class"、":nth-child(2)")傳遞給$()函數時,Sizzle在內部會優先利用瀏覽器原生支持的DOM方法來查找元素,以求得最大的執行速度。以下就是Sizzle會優先選用的幾個標準的原生方法(各個方法的用途不再贅述):

  • getElementById()
  • getElementsByTagName()
  • getElementsByClassName()
  • querySelectorAll()

如果瀏覽器不支持某個方法,或者傳入的選擇符表達式不是標準選擇符(如":eq()"、":odd"或其他自定義選擇符),Sizzle就會使用document.getElementsByTagName('*')來取得文檔中的所有元素,然後再遍歷並測試每個元素。顯然,這是萬不得已纔會用的方法;可想而知,這個最笨的方法,效率也是最低的。

優化示例

舉個例子,假設我們要取得頁面表單中的所有的文本框,即:

<input type="text">

可以使用兩個選擇符:

  • $('input[type="text"]')
  • $('input:text')

第一個選擇符是標準的CSS屬性選擇符,第二個選擇符是自定義選擇符。根據前面對Sizzle引擎的分析可知,在大多數現代瀏覽器(支持原生querySelectorAll()方法的瀏覽器)中,第一個選擇符的速度比第二個要快很多。

再舉一個例子。假設有下面兩個jQuery查詢:

  • $('input').eq(1)
  • $('input:eq(1)')

第一個查詢先通過標準的CSS元素選擇符查找所有input元素,然後再調用jQuery的eq()方法取得匹配結果中的第二個元素(eq()方法的索引參數是從0開始計算的)。第二個查詢則使用了自定義的僞類選擇符:eq()。通過測試可以看出,第一種方法的速度比第二種方法快得就更多了。

結論

要儘可能使用CSS規範中規定的選擇符,除非沒有標準選擇符,才考慮使用jQuery的自定義選擇符。

本文轉載自: jQuery代碼優化:選擇符篇

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章