#navi(../)

各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/ external_link

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

結果は、

~環境	~dojo	~jQuery	~prototype.js	~uupaa-selector 1.2	~uupaa-selector-lite 1.2
IE	910	564	BG3117	BG366	463
FireFox	BG191	272	300	250	BG318

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