jQueryコード最適化選択子編

本稿では,選択子の観点からjQueryコードを最適化する問題を簡単に検討する.
Sizzleの動作メカニズム
jQueryは1.3から,セレクタ式に従って要素を検索するコード,すなわちSizzleエンジンを独立させる.「#id」、「.class」、「:nth-child(2)」などのセレクタ式を$()関数に渡すと、Sizzleは内部でブラウザが元からサポートしているDOMメソッドを優先して要素を検索し、最大の実行速度を求めます.以下は、Sizzleが優先的に選択するいくつかの標準的なオリジナルメソッドです(各メソッドの用途は後述しません):

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

ブラウザがメソッドをサポートしていない場合、または入力セレクタ式が標準セレクタ(例えば「:eq()」、「odd」または他のカスタムセレクタ)でない場合、Sizzleはdocumentを使用します.getElementsByTagName('*')は、ドキュメント内のすべての要素を取得し、各要素を遍歴してテストします.明らかに、これはやむを得ない方法だ.考えてみれば、この最も愚かな方法は、効率も最も低い.
最適化の例
たとえば、ページ・フォームのすべてのテキスト・ボックスを取得するとします.すなわち、次のようにします.
2つのセレクタを使用できます.

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

1番目のセレクタは標準のCSS属性セレクタで、2番目のセレクタはカスタムセレクタです.前のSizzleエンジンの解析から、ほとんどの現代ブラウザ(オリジナルquerySelectorAll()メソッドをサポートするブラウザ)では、最初のセレクタの速度が2番目よりずっと速いことが分かった.
もう一つ例を挙げる.次の2つのjQueryクエリがあるとします.

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

最初のクエリは、まず標準的なCSS要素セレクタを使用してすべてのinput要素を検索し、次にjQueryのeq()メソッドを呼び出してマッチング結果の2番目の要素(eq()メソッドのインデックスパラメータが0から計算される)を取得します.2番目のクエリでは、カスタムの擬似クラスセレクタ:eq()が使用されます.試験により,第1の方法の速度は第2の方法よりずっと速いことが分かった.
結論
CSS仕様に規定されているセレクタをできるだけ使用するには、標準的なセレクタがない限り、jQueryのカスタムセレクタを使用することを考慮します.
(注:「jQuery基礎教程(第3版)」に関する章の内容に基づいて作成された.)