Hatena::ブログ(Diary)

?D of K

2008-09-11

(IE5で)最速セレクターを作ってみた

cssQueryが非常に遅いので作ってみた。まぁ、古いから仕方ない。

上のslickspeedは、広告が自動挿入されるサイトにおいてあるため、実行すると結果が狂う可能性があります。

各ライブラリごとのまとめ

kQueryは今作っているライブラリの名前。現在はdollarjsという名前です。

探索方法

中はあまり読んでいないので、間違っているかもしれない。

線形探索
kQuery、jQuery、MooTools、YUI、Ext(関数をキャッシュする機構あり)、cssQuery
線形探索+XPath
Prototype、Dojo、findCSS
XPath
uupaa.js(IEではJavaScript-XPath)
エラー時の値

普通はそんなコード組まないが、不正な(もしくは対応していない)擬似クラスとかが書かれた場合の挙動。

Error throw
kQuery、jQuery、Ext
空の配列
MooTools、findCSS、cssQuery
擬似クラスを無視
Prototype、YUI、Dojo、uupaa.js
文字列中のカンマへの対応

一番最初にカンマでセレクターを区切っているライブラリのまとめ。「*:contains(",")」とかは書けないので気をつけるべき。ただ、正式なセレクターじゃないため、結果も不定なので、あとで属性セレクター([title*=","]とかで)でテストし直すとして、結果だけまとめておく。

正常にカンマもパースできる
kQuery、jQuery
一番最初にカンマで切ってしまう(多分)
MooTools、YUI、Dojo、Ext
実行速度が極度に遅く不明
cssQuery
contains未対応のため不明
Prototype、findCSS、uupaa.js

属性セレクタで実験した結果。

カンマがあってもパースできる
kQuery、jQuery、Prototype、cssQuery、uupaa.js
一番最初にカンマで切るためおかしい(多分)
MooTools、YUI、Dojo、Ext
挙動が怪しい
findCSS、
セレクターへの対応状況
属性セレクタの正確な対応(class=""というような空文字列への対応)
PrototypeのみIEでも対応。kQuery、Dojo、uupaa.jsはFirefoxなどgetAttributeでnullが返るときは対応している。他はclass=""では[class]にマッチしない。
link、lang、root擬似クラス
kQuery、cssQueryのみ。rootはuupaa.jsも対応。ただ、属性セレクタなどで代替できなくもない。
nth-last-child、of-type
kQuery、Prototype、YUI、Dojo、cssQuery、uupaa.js。ただし、Prototype以外は実装に不備があるようだ。特にIEだと顕著にでる。
target擬似クラス
kQuery、findCSS、cssQueryが対応。
not擬似クラス
Ext、findCSSには不備がある。cssQueryは低速。uupaa.jsは未対応。
他各ライブラリの特徴
kQuery
タグ名付きのID絞り込みが遅い。クラス名の絞り込みがFxだと遅い。child、of-typeの擬似要素が遅い。
jQuery
全称セレクター付きのIDが取得できない(普通使わないけど)。重複する要素を削除しない(カンマ区切りは単純に結合する)。対応していないのはきちんとthrowしてくれるから親切。
Prototype
クラスに全称セレクターつけるとなぜか速くなる(クラス変えたりして一応試した)。遅くても細かい挙動は非常に丁寧。
MooTools
属性セレクターにスペース含めるとアウト。
YUI
属性セレクターにスペース含めるとアウト。子供セレクターがやたら速い。
Dojo
実はIE5.5でも割と動く。けど、あまり、ちゃんと動かない。
Ext
属性セレクターにスペース含めるとアウト。速い。
findCSS
属性セレクターとか対応していないし、FxとIEとの速度差が大きいのであまりおすすめできないと思う。
cssQuery
遅いけど、サポートしているブラウザが多いのと、割とCSS3に対応している。
uupaa.js
IEだとXPathへの変換を含めることも考えると結構遅い。属性セレクターなども地味に対応していないので、CSSセレクターで使うことは避けた方が良い。むしろ、唯一完全にXPath対応しているライブラリなのだから、XPathで運用するのが良い。でも、IDでちゃんと絞り込んだら割とまともな速度で動くような気がしなくもない。

各種ブラウザでのまとめ

IE5

正規表現に(?:...)があるだけで即死したりするので、結局、error無しだったのは3つだけ。うち、findCSSは36foundと何を見つけているのか不明な動作をした。kQueryは動作したcssQueryに対して、おおむね数倍の速度を出したが、child系擬似クラスに限っては遅い。

IE5.5

動作するのは自分のとcssQueryだけなのに丁寧にエラーを返してくれたのはuupaa.jsのみ。残りはgetElementsByTagName("*")辺りの不具合で動いていないだけの感じである。jQueryだけはかたくなに空の配列を返す感じ。dojoは割と動いているのに、ちゃんと動かないこともある不思議挙動。

IE6

全ライブラリが線形探索するブラウザ。Extに少し負けた。first-childがやたら遅いことが気になる。

Fx

あとでやる。

Opera

あとでやる。

Safari

環境無いから無理。

Google Chrome

Selectors API対応しているからそれ使おう。

通りすがり通りすがり 2008/09/12 00:24 SafariはWin版を使えばよいのではないでしょうか?

ofkofk 2008/09/12 00:50 残念ながら、Windows 2000なのです。

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証

Connection: close