世界最速のCSSセレクタ(getElementsBySelector とか querySelectorAll みたいなもの)をリリースしました。

JavaScript uupaa.js

http://code.google.com/p/uupaa-js-spinoff/

2008-10-11 追記 uupaa-selector.js version 1.2 をリリースしました。 - latest log

おまたせ

最新のjQuery(1.2.6)よりも早く、jQueryと比較にならないほどの高い精度で正しく動作するCSS3セレクタの実装(uupaa-cssselector.js)をリリースしました。

uupaa-cssselector.js は uupaa.js (ver 0.7) の機能の一部を切り出し、スタンドアローンなJavaScriptとして動作可能な状態にパッケージし直したものです。
そのため、一部の機能(:link :visited :hover :focus) はご利用になれません。ver 1.1以降で使用可能になりました。

使い方

document.body 以下の div要素 以下の p要素で、上から4,8,12,16...番目の要素を選択。

<script type="text/javascript" src="uupaa-cssselector.js"></script>
<script>
  var node = document.getElementsBySelector("div p:nth-child(4n+1)", document.body);
  for () { ... }
</script>

document.getElementsBySelector() が「長すぎる」という方は、以下のようにしてもご利用いただけます。

<script type="text/javascript" src="uupaa-cssselector.js"></script>
<script>
  var $$ = document.getElementsBySelector;
  var node = $$("div p:nth-child(4n+1)", document.body);
  for () { ... }
</script>

速度とセレクタの精度が知りたい方のために

動いている様子はこちらで、

なぜに最速と言い切れるのか?

上記とまったく同じ速度比較を、メジャーなライブラリ(MooTools, jQuery, Prototype, YUI, Dojo)で行っている結果が http://mootools.net/slickspeed/ で確認できます。この中では jQuery1.2.6 が最速なので、jQueryよりもより高速な uupaa が世界最速ということになります(たぶん)。

ベンチマークツール(slickspeed)の品質にちょっと問題がある(統計やバラつきを考慮していない)ようで、実行毎やブラウザ毎にかなりブレが出るようです。
なので、JavaScriptの遅さに定評のある(安定した結果の出る) IE6 で見ることをお勧めします。

MooTools jQuery Prototype YUI Dojo uupaa cssselector kQuery
Chrome 111 99 443 409 111 64 60 60
Safari3.1.2 104 151 228 425 130 12 4 4
Opera9.27 256 242 391 825 124 1638 328 435
Opera9.6β 192 136 196 474 84 1295 156 206
IE6 595 386 2317 1580 696 3062 337 502
IE8 364 242 1403 1022 303 1852 191 301
Firefox2 326 273 275 789 200 4394 349 485
Firefox3 143 150 262 338 103 1496 163 234
Total 2091 1679 5515 5862 1751 13813 1588 2227
Total(Webkit抜き) 1876 1429 4844 5028 1510 13737 1524 2163

MooTools 1.2, jQuery 1.2.6, Prototype.js 1.6.0.2, YUI 2.5.2 β, Dojo 1.1.1, uupaa.js 0.6, uupaa-cssselector.js, kQuery

仕様

制限事項

  • uupaa.js (ver 0.6以降)でサポートされている、一部の擬似クラス(:link :visited :hover :focus) は、uupaa-cssselector.js ではご利用になれません。
  • :not は 未実装です。

これまでの経緯等は、過去のエントリを参照してください。

コードリードする方は、uupaa.js ver 0.6 のコードを一度読んでから、uupaa-cssselector.js のコードを読むと、とても分かり易いと思います。

追記

Ext.js の存在を忘れていたので追試してみました。
Ext.js(2.2), uupaa.js(0.7 - 10/4の最新版)

Ext.js は内部でクエリ文字列を JavaScript コードにコンパイルしキャッシュ(+ evalで評価)するため、上記と同じ方法では正確な数字がわかりません。

仕方ないので、slickspeed を改造(通常では4回計測するところを1回だけに)した状態で計測しています。

Browser Ext uupaa
IE6 139 125
IE7 62 110
Opera9.27 92 109
Opera9.6β 62 31
Firefox2 186 171
Firefox3 288 217
Safari3.1 16 0
Chrome 67 35
Total 912 798

セーフ。

Ext.js は早いことは早いのですが…
http://pigs.sourceforge.jp/blog/200809192139/ext_css/test.html
CSS セレクタとしての精度はメジャーなライブラリの中で最低点(Firefox3で366点)でした。

Ext.js の特性(中身)を理解せずに無改造の slickspeed でベンチ取って、「Ext.js は 爆速だ」とブログで語っているアメリカ人(?)とか見かけました。さすがドラッグレース発祥の国。