DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jQuery代碼優化 選擇符篇
jQuery代碼優化 選擇符篇
編輯:JQuery特效代碼     
本文就從選擇符的角度簡單探討一下優化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基礎教程(第3版)》相關章節內容編撰而成。)
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved