快捷導(dǎo)航

jQuery代碼優(yōu)化選擇符篇

更新時(shí)間：2011年11月01日 17:08:39 作者：

毫無(wú)疑問(wèn)，jQuery的獨(dú)到之處就是它以集合為中心的操作。為了取得DOM對(duì)象集合，jQuery利用JavaScript不僅實(shí)現(xiàn)了（它誕生時(shí)）很多瀏覽器不支持的CSS選擇符，還實(shí)現(xiàn)了不少獨(dú)到的自定義選擇符，為在文檔中查找元素提供了極大的便利

本文就從選擇符的角度簡(jiǎn)單探討一下優(yōu)化jQuery代碼的問(wèn)題。

Sizzle的運(yùn)行機(jī)制

jQuery從1.3開(kāi)始把根據(jù)選擇符表達(dá)式查找元素的代碼獨(dú)立出來(lái)，也就是Sizzle引擎。當(dāng)我們把一個(gè)選擇符表達(dá)式（比如"#id"、".class"、":nth-child(2)"）傳遞給$()函數(shù)時(shí)，Sizzle在內(nèi)部會(huì)優(yōu)先利用瀏覽器原生支持的DOM方法來(lái)查找元素，以求得最大的執(zhí)行速度。以下就是Sizzle會(huì)優(yōu)先選用的幾個(gè)標(biāo)準(zhǔn)的原生方法（各個(gè)方法的用途不再贅述）：

復(fù)制代碼代碼如下:

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

如果瀏覽器不支持某個(gè)方法，或者傳入的選擇符表達(dá)式不是標(biāo)準(zhǔn)選擇符（如":eq()"、":odd"或其他自定義選擇符），Sizzle就會(huì)使用document.getElementsByTagName('*')來(lái)取得文檔中的所有元素，然后再遍歷并測(cè)試每個(gè)元素。顯然，這是萬(wàn)不得已才會(huì)用的方法；可想而知，這個(gè)最笨的方法，效率也是最低的。

優(yōu)化示例
舉個(gè)例子，假設(shè)我們要取得頁(yè)面表單中的所有的文本框，即：

<input type="text">
可以使用兩個(gè)選擇符：

復(fù)制代碼代碼如下:

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

第一個(gè)選擇符是標(biāo)準(zhǔn)的CSS屬性選擇符，第二個(gè)選擇符是自定義選擇符。根據(jù)前面對(duì)Sizzle引擎的分析可知，在大多數(shù)現(xiàn)代瀏覽器（支持原生querySelectorAll()方法的瀏覽器）中，第一個(gè)選擇符的速度比第二個(gè)要快很多。

再舉一個(gè)例子。假設(shè)有下面兩個(gè)jQuery查詢(xún)：

復(fù)制代碼代碼如下:

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

第一個(gè)查詢(xún)先通過(guò)標(biāo)準(zhǔn)的CSS元素選擇符查找所有input元素，然后再調(diào)用jQuery的eq()方法取得匹配結(jié)果中的第二個(gè)元素（eq()方法的索引參數(shù)是從0開(kāi)始計(jì)算的）。第二個(gè)查詢(xún)則使用了自定義的偽類(lèi)選擇符:eq()。通過(guò)測(cè)試可以看出，第一種方法的速度比第二種方法快得就更多了。

結(jié)論
要盡可能使用CSS規(guī)范中規(guī)定的選擇符，除非沒(méi)有標(biāo)準(zhǔn)選擇符，才考慮使用jQuery的自定義選擇符。

（注：本文基于《jQuery基礎(chǔ)教程（第3版）》相關(guān)章節(jié)內(nèi)容編撰而成。）

您可能感興趣的文章: