CSSセレクタによる高速化、実際のところ « NAVER Engineers' Blog

突然のジョブズ氏逝去のニュースに驚きました。 windowsからmacに移って一年に満たないにわかマカーですが、ご冥福をお祈りいたします。 ネイバージャパンでマークアップを担当している富田です。 さて、今回はサイトの高速化について、とくに、MEひとりでも実施可能なCSSとHTMLのみでの高速化の手法とそれを実施する上で注意すべきポイントについて見てみたいと思います。 高速化のテクニックと、コーディング時のコスト CSSのセレクタは、body .contents .header span aというように、左から右により詳細になっていくように指定するかたちが一般的です。 しかしブラウザはこれとは逆に、右から左にセレクタを解釈しながら描画していきます。 そのため、より負荷のすくないCSSを書くために、 スタイルを当てる要素にはできるだけclass又はIDを指定する 子孫セレクタは重いので、

[kattton]

最近は自然にHamlとSassの階層構造が似た状態になるんだけど、高速化の観点ではこれは良くないとのこと。スタイルを当てる要素にclassを指定して直接やりましょう、と。ふむ。

[hashimoya]

「施策の仕組を理解せずに盲目的にルール化してしまうと、過度な最適化となり、開発、運用を含めた日々の作業に思わぬコストが発生してしまうこともあります。」悩みどころ。

[webmugi]

少々の高速化のためにひどいソースは書きたくない…というのが素直な気持ち

[kkeisuke]

子孫セレクタを減らす施策よりも、スタイルを当てる要素にはできるだけclass名を指定する施策のほうが、効果がある

[s5-style]

ブラウザはCSSのセレクタを右から左に解釈しながら描画する。その挙動の速度を検証。

[kits]

実際に計測した結果。「その効果が如実に現れるのはHTML、CSSのコードが非常に大きいページに限られるようです」

[amberjack115]

"子孫セレクタを減らす施策よりも、スタイルを当てる要素にはできるだけclass名を指定する施策のほうが、効果があるようです"

[VoQn]

div > .hoge と .huga > div なんかのセレクタもベンチマーク対象に入れて欲しかったけど参考になった