#navi(../)
各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/ 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が最も安定した性能を持つことがわかりました。