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

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

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

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

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

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

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

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

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

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

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

最新評(píng)論