CSSセレクタの高速化の話を検証 - os0x.blog

CSSセレクタの高速化の話し - Webtech Walkerの件。元ネタは続・ハイパフォーマンスWebサイト ―ウェブ高速化のベストプラクティスで、元ネタの元ネタはWriting Efficient CSS for use in the Mozilla UI - MDC。 先に書いておくと、この元ネタのMozillaの記事には、in the Mozilla UIとある通り、FirefoxなどのUIレベルの話です。Mozillaの場合、ウィンドウとかタブとか、とにかくなんでもCSSでスタイルを指定できる(している)のでCSSのパフォーマンスについて考慮する点が他のブラウザとはズレています。 とはいえ、実際にどうなのか検証したことなかったので、少し試してみました。 今回の検証方法は、dl>dt+ddを5重に入れ子にした300KB強の大きめなHTMLを用意して、CSSを動的に適用したときの時間

[rona]

CSSセレクタ高速化

[kimura_m_29]

CSSセレクタの高速化の話を検証 - 0xFF

[asagi29]

CSSセレクタの高速化の話を検証 - 0xFF

[invent]

CSSセレクタの高速化の話を検証 - 0xFF:

[tsutomura]

高速化

[diveintounlimit]

おそらく、もっと多角的な検証をして平均化すればChromeに軍配が上がるのでは。ごく単純でループ処理されそうな検証では、あまり正確な結果は出ないのでは。

[Cherenkov]

selector

[Kmusiclife]

いい勉強になります。

[topaz2]

どのエンジンでも共通する傾向なのか。

[Soraneko]

CSSセレクタの高速化の話を検証

[tatchimee]

ほうほう

[kurobuchi]

検証お疲れ様です。

[tarchan]

WebKitが遅くてびっくり！FirefoxはCSSは高速なのに全体だともっさりなのはなんでなの？

[gigi-net]

CSSのベンチマーク。結構差が出る物なのね

[amino_acid9]

「セレクタを複雑にしてもパフォーマンスにはほとんど影響はない」「クラス名だけのセレクタは保守性を下げることも」

[raimon49]

querySelectorAll　検証

[quao]

via. saeko

[piro_or]

Firefoxの場合はGUIが全部CSSで再描画の回数がハンパ無い、という事に加えて、元記事はGeckoの実装に対する最適化という側面が強い事も見逃せないと思う。

[miya2000]

「この程度のHTMLは余裕らしい」これはあやしいです。単に非同期に処理しているだけかもしれないので。レンダリングまで含めて計測しないとなんともいえないのではないでしょうか。

[aereal]

Firefoxの0msって実行不可能ってことなのかな。それとも0ms以下なのかな。