jQueryのCSSセレクタAPIを高速に扱う方法
最近Androidとの抗争が激化しているago（@kyo_ago）です。
jQueryはCSSセレクタを多用する特徴がありますが、jQuery内では実行ブラウザやCSSセレクタの記述によって呼び出されるブラウザAPIが変わり、それによって実行速度にも影響が出ます。
この記事では「セレクタAPIとはなにか」、「CSSセレクタの記述によって呼び出されるセレクタAPIの種類」、「高速なセレクタAPIを使用するための方法」、「高速なセレクタAPIが使われるかどうか確認する方法」などを紹介したいと思います。
（※この記事はJavaScript Advent Calendar 2011 (フレームワークコース) : ATNDの1日目の記事です）
セレクタAPIとはなにか
セレクタAPIとは「#hoge .huga」のようなCSSセレクタから、DOM上に存在する要素を取得するためのAPIです。
jQueryではセレクタAPIは本体に統合されているため普段意識することは少ないかもしれませんが、CSSセレクタから要素を取得する場合はすべてこのセレクタAPIを経由して要素を取得します。
例えば以下のようなコードの場合、最大で4回セレクタAPIが呼び出されます。
$('#hoge') // 1
.find('.huga') // 2
.find('div') // 3
.find('[rel="hoge"]') // 4
;
CSSセレクタの記述によって呼び出されるAPIの種類
jQueryのCSSセレクタ処理は大きく分けてブラウザネイティブAPIを使う場合と、JavaScriptで記述されたSizzleを使用する場合に分けられます。
querySelectorAllが使えるブラウザ（Chrome 1, Firefox 3.5, IE8, Safari 3.5, Opera 10、それぞれこれ以降のバージョン）では渡された引数が文字列かつセレクタとして認識できる形式の場合以下のような優先度で処理を行います。
- #idや.class等の簡単な記述は専用の高速なAPIを使用
- (1)以外でquerySelectorAllで解釈してエラーにならない場合その結果を使用
- (2)でエラーになる記述はSizzleを使用（非標準の記述が入っているなどの場合）
これはquerySelectorAllが使えるブラウザの例ですが、querySelectorAllが使えないブラウザでは2の処理がなくなり#idの場合とSizzleの場合にわかれます。
querySelectorAllとは
querySelectorAllとはブラウザ内蔵のCSSセレクタAPIで、jQueryのfindのように第一引数にCSSセレクタを渡すことでCSSセレクタに一致する要素を配列で返します。
// 「#hoge .huga」に一致する要素の配列
document.querySelectorAll('#hoge .huga');
これはjQuery内部でも使われており、複雑な記述のCSSセレクタは主にこのAPIで処理されます。
querySelectorAllで解釈できない記述
jQueryはCSSセレクタとして通常ブラウザが解釈できるCSSセレクタの他に、以下のようなjQueryが独自にサポートするCSSセレクタの記述を持ちます。
:animated, [name!="value"], :button,
:checkbox, :contains(), :eq(), :even,
:file, :first, :gt(), :has(), :header,
:hidden, :image, :input, :last, :lt(),
:odd, :parent, :password, :radio, :reset,
:selected, :submit, :text, :visible
これに関してはquerySelectorAllが解釈できないため、たとえquerySelectorAllが使用できるブラウザであっても必ずjQuery内部のSizzleを使用して解釈されます。
Sizzleとは
SizzleとはもともとquerySelectorAllがサポートされないブラウザ用にjQuery内部で使用されていたセレクタAPIを切り出したもので、CSSセレクタを受け取ってそれに一致する要素を返すライブラリです。
実際には高速化等の目的で他にもいろいろなコードが入っていますが、簡単に言うとgetElementsByTagName('*')で取得した要素一つ一つに対して、指定されたCSSセレクタに一致するかをJavaScriptで確認し、一致したものを配列にして返すようになっています。
このように内部がJavaScriptで記述されているため、独自の記述等をサポートすることが可能ですが、ブラウザネイティブのAPIに比べて速度的に遅くなるという問題があります。
高速なセレクタAPIを使用するための方法
ここまでセレクタAPIの内部実装に関して紹介してきましたが、ここからはそれを踏まえてjQueryがより高速なAPIを使用できる使い方を紹介します。
高速なセレクタと低速なセレクタでAPIの実行を分ける
jQueryの各APIは引数として渡されたCSSセレクタ全体がquerySelectorAllで実行可能かどうか判定してquerySelectorAllを使うかSizzleを使うかの分岐を行うので、渡されたCSSセレクタのうち一箇所でもカスタムセレクタが含まれていると全体をSizzleで評価します。
このため、CSSセレクタのうち一部分だけカスタムセレクタを使用する場合、その部分のみAPIを変えて検索することで高速化することが可能です。
// カスタムセレクタが含まれるため、全体がSizzleで評価される
$('#hoge .huga:checked');
// ここはdocument.querySelectorAllで実行される
$('#hoge .huga')
// ここはSizzleで評価される
.filter(':checked');
また、querySelectorAllが使えない環境も考慮すると、以下のようにidとclassを分けることで高速化する場合もあります。
（ただ、APIを分けすぎるとAPI呼び出し自体のコストやコードの可読性にも影響するため、やりすぎると逆効果になる場合もあります）
// これはdocument.getElementByIdで評価される
$('#hoge')
// これはブラウザによってはSizzleで評価される
.find('.huga');
ショートカットを活用する
jQueryは基本的にquerySelectorAllを使用して要素を取得しますが、一部の記述にはより高速なAPIを使用して要素を取得します。
具体的には$('#hoge')や$('.huga')だけの場合はquerySelectorAllではなく、それぞれより高速なgetElementById、getElementsByClassNameを使用するようになっています。
このうち、getElementByIdはjQueryでサポートしている全ブラウザで使用可能なため$('#hoge')形式の場合は常にgetElementByIdが使用されますが、getElementsByClassNameは使用できるブラウザが少ないため、あくまでもquerySelectorAllが使用できる場合のみの高速な代替としてのみ使用されます。
このため、以下のような高速化が可能になります。
// document.querySelectorAllで解釈される（低速）
$('div#hoge');
// document.getElementByIdで解釈される（高速）
$('#hoge');
// document.querySelectorAllで解釈される（低速）
$('div.huga');
// document.getElementsByClassNameで解釈される（高速）
$('.huga');
jQueryセレクタAPIのベンチマーク - jsdo.it - share JavaScript, HTML5 and CSS
ただし、後者のclass名で指定する例に関して、IE6,7などのgetElementsByClassNameが使用できない環境でSizzleを使用して解釈するため以下のように高速な場合と低速な場合が逆転します。
// document.getElementsByTagName('div')後、クラスの比較を行う（高速）
$('div.huga');
// document.getElementsByTagName('*')後、クラスの比較を行う（低速）
$('.huga');
高速なセレクタAPIが使われるかどうか確認する
「あるCSSセレクタがどの程度の速度で実行されるか」は、実行されるブラウザ、実際のDOM環境等によって左右されるため一概に判断はできません。
ただ、基本的にSizzleはquerySelectorAllより遅いため、「あるCSSセレクタがSizzleを使って解釈されるか否か」は速度に関する一つの指標となります。
「あるCSSセレクタがSizzleを使って解釈されるか否か」はquerySelectorAllを使って解釈できるかどうか（エラーが出るかどうか）で判断できるため、「querySelectorAllではエラーになるけど、jQuery()に渡すと結果が返ってくる」CSSセレクタはSizzleで解釈されていると判断できます。
// jQueryのカスタムセレクタなのでエラー
document.querySelectorAll(':input');
// jQueryでは解釈できるためSizzleが使用されている
$(':input');
この方法でSizzleが使用される範囲を限定していくことで、querySelectorAllを活用しつつ、jQueryカスタムセレクタの柔軟な記述も行うことができます。