jQueryのCSSセレクタAPIを高速に扱う方法 - KAYAC Engineers' Blog

最近Androidとの抗争が激化しているago（@kyo_ago）です。 jQueryはCSSセレクタを多用する特徴がありますが、jQuery内では実行ブラウザやCSSセレクタの記述によって呼び出されるブラウザAPIが変わり、それによって実行速度にも影響が出ます。 この記事では「セレクタAPIとはなにか」、「CSSセレクタの記述によって呼び出されるセレクタAPIの種類」、「高速なセレクタAPIを使用するための方法」、「高速なセレクタAPIが使われるかどうか確認する方法」などを紹介したいと思います。 （※この記事はJavaScript Advent Calendar 2011 (フレームワークコース) : ATNDの1日目の記事です） セレクタAPIとはなにか セレクタAPIとは「#hoge .huga」のようなCSSセレクタから、DOM上に存在する要素を取得するためのAPIです。 jQue

[teramako]

自分でDOM API叩く方が好きであることを再確認した（ぉ

[ago_kyo]

久々のtech.kayac.com

[Ehren]

キャー @kyo_ago サーン

[lazex]

cssセレクタは基本ブラウザのAPIを使って非対応のはSizzle使う

[d_animal141]

jQueryのCSSセレクタAPIを高速に扱う方法

[uca_co]

速度のはなし

[iuhya]

あとで

[misomakura]

"querySelectorAll" これ大事

[AmaiSaeta]

文中でも言及されてるけど、実際には可読性とのトレードオフになるんだろうなー。

[mattn]

div#hogeはしょぼいミスだし、div.hogeしたい場合ってだいたいdiv以外にも.hogeされてる場合じゃないかな。

[y-imaya]

jQueryのCSSセレクタ解説

[an-ironic-man]

セレクタの指定の仕方で速度が変わる。#hogeなどは高速。一気にセレクタを書かずfindやfilterで絞り込むと低速なAPI使用を少なくできる

[tomiyanx]

意識して使いたいですな

[u1tnk]

地道だけど意識しよう。

[mattarin]

リファクタリングの参考にした。

[site159]

セレクタとクエリセレクタ

[ko-ya-ma]

なんとなくこうじゃないかな、と思っていた点。具体的でわかりやすくて参考になる。

[mikage014]

複雑なCSSセレクタはID、class指定（高速）とjQueryが独自にサポートするセレクタ（低速）に分割すると速くなる

[hirorock]

jQueryのセレクタを高速化するTips これは勉強になりました。可読性とスピードのバランスを見て、うまく使い分けが出来るようにしよーっと

[tmf16]

getElementsByClassNameが昔からIEに実装されていればprototype.jsやjQueryはなかったかもなー

[efcl]

jQueryのCSSセレクタ解釈について

[naga_sawa]

jQuery内蔵のセレクタエンジンSizzleで処理されると重いので、ID指定やクラス指定の高速セレクタで抽出したものからfind, filterする

[suginoy]

「querySelectorAllではエラーになるけど、jQuery()に渡すと結果が返ってくる」CSSセレクタはSizzleで解釈されていると判断できます」

[int128]

CSSセレクタの最適化は気になってたから興味深い

[astap]

jquery selector

[takeodon]

ふむふむ、こうなってたのか

[cms-kekato]

参考になる。

[youg0717]

参考になりそう。 / jQueryのCSSセレクタAPIを高速に扱う方法 | http://t.co/KUoNjsef - KAYAC engineers' blog

[dekatotoro]

jQueryのCSSセレクタAPIを高速に扱う方法

[fabled]

ほほー

[tomo_thumb]

わかりやすい。ID指定：高速。querySelectorAll：中速。jQueryカスタムセレクタ：低速。document.querySelectorAll("--");でチェック。

[TsutomuOnoda]

jQueryのCSSセレクタAPIを高速に扱う方法