JavaScript/CSSセレクタ比較

---

Total: 4218 / Today: 1 / Yesterday: 1

各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のセレクタの資料を表の左側の条件で検索した時にどの程度時間がかかるかというベンチマークをまとめたものです。

結果は、

環境	dojo	jQuery	prototype.js	uupaa-selector 1.2	uupaa-selector-lite 1.2
IE	910	564	3117	366	463
FireFox	191	272	300	250	318

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

---

Last Modified: 2008-10-17 18:26:44