JavaScript/CSSセレクタ比較
各JavaScriptフレームワークのCSSセレクタの速度比較
現在、JavaScriptでDOM操作を行う場合、getElementByIdや、getElementsByTagName、getElementsByNameなどでおこないますが、今後はスタイルシートの指定と互換性のある方法でやるほうが効率が上がります。
たとえば、
<ul> <li>項目1</li> <li>項目2</li> </ul>
の項目2を選択したい場合、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