高速にCSS SelectorやXPathを処理する (DomQuery、findCSS)
2007年4月23日(月) 12:10
JavaScriptでHTML要素取得をする事が多い。DOMでサポートされる範囲だけでは開発に時間がかかります。DomQueryを利用することで、スタイルシートで記述するのに近い形でHTML要素指定が可能になります。
ブラウザがサポートする方法で処理を行った方が処理速度は速い傾向があります。余計な処理が介入しないので当たり前ですが、開発期間や工数、今後の運用などを考慮した場合ライブラリ導入のメリットは十分にあります。
DomQuery.js

Extフレームワークの一部としてリリースされていますが、単体での利用も可能です(制限あり)。ベンチマークの結果を参照する限りでは、処理速度が最も優れています。
記述例
var obj = Ext.query('#element div');
findCSS.js

FireFoxでDomQuery.jsよりも早い場合がありますが、Internet Explorerでの動作速度はそれほどでもありません。
自分自身の実行環境でベンチマークを行いたい場合は yui-ext.com でベンチマーク行うことができます。完了するまでしばらくかかりますが、どのライブラリを利用するか検討するには非常に参考になります。
EXTライブラリがYUI以外のフレームワークでも利用できるようになったのでExtの対応するフレームワークであれば導入することができます。利用頻度の高いCSSセレクタやXPathなど処理するJavaScriptは高速なものを選びたいですね。
関連する記事
- マウス操作で写真にズームするギャラリーswf(PostcardViewer)
- CSSとCanvasで描写するWeb用のUIフレームワーク(Mocha UI)
- 透明感のあるデザインをJavaScriptで実装する(glassbox.js)
- MP4、FLVなど再生するFlashプレーヤーswf (JW FLV MEDIA PLAYER)
- FlashやFLV、MediaPlayerに対応したスライドショーJavaScript(shadowbox)
- デザインが魅力的なスライドショーJavaScript (Lightview)
- 楽にフォーム入力チェックを実装するJavaScript (JSValidate)
- CSSデザインレイアウトをオンラインで簡単に作成する (YAML)
- ユーザーが再配置可能なWedgetを実装するJavaScript (Prototype Portal Class)
- フォームボタンCSSデザインするテクニック (Rediscovering Button Element)
- 半透明の角まるツールチップを表示するJavaScript (CoolTips)
- JavaScriptでプログレスバーを簡単に実装する (jsProgressBarHandler)
- JavaScriptコード圧縮して盗用から守る (packer)
- iTuneのようにカバーアートを表示するFlash (iTunes Coverflow)
- 画像をサムネイルのサイズで表示するJavaScript (jQuery Thumbs)
- Ajaxでサクサク動くWebファイルマネージャ (Relay)
- アンカータグを利用してスムーススクロールを実装する (df Smooth Scroll)
- MacでもFlashでホイール操作が出来るようにする (SWFMacMouseWheel)
- HTMLなどタグ編集を楽にするエディタ機能JavaScript (jTagEditor)
- 使いやすいYUIライブラリのWYSIWYGエディタ (Rich Text Editor)

