2. JavaScript
  3. CSSセレクタ比較

各JavaScriptフレームワークのCSSセレクタの速度比較

現在、JavaScriptでDOM操作を行う場合、getElementByIdや、getElementsByTagName、getElementsByNameなどでおこないますが、今後はスタイルシートの指定と互換性のある方法でやるほうが効率が上がります。

たとえば、

<ul>
<li>項目1</li>
<li>項目2</li>
</ul>

の項目２を選択したい場合、getElementsTagNameでなんとか処理可能かもしれませんが、これが

<ul>
<li>項目1</li>
<li>項目2</li>
</ul>
<ul>
<li>項目3</li>
<li>項目4</li>
</ul>

となった場合、このコードで作業するのは非常にややこしいです。

しかし、CSSセレクタで解釈をするならば

dojoの場合jQueryの場合prototype.jsの場合uupaa-jsの場合
item = dojo.query(ul li)[1];item = $$(ul li)[1];item = $(ul li)[1];item= CSSSelector(ul li)[1];

でできてしまいます。速度比較は、 http://192.168.88.51/sickspeed/

で各フレームワークの速度比較ができます。これは、W3Cのセレクタの資料を表の左側の条件で検索した時にどの程度時間がかかるかというベンチマークをまとめたものです。

結果は、

環境dojojQueryprototype.jsuupaa-selector 1.2uupaa-selector-lite 1.2
IE9105643117366463
FireFox191272300250318

であり、環境によってばらつきがあるものの、uupaa-selectorが最も安定した性能を持つことがわかりました。