CSSの適用について、予想外の事実を知った

[1]の読書にて、予想外な事実を知ったためメモしておく。
それは・・・
「CSSセレクタは右から左へと照合される」
という事実だ。
つまり、 #id1 td というセレクタの場合、以下の順番で照合される。

1. DOM内の全ての td 要素を探索
2. 上記で見つかった各 td 要素について、先祖要素に #id1 である要素があるかを探索

一番右側のセレクタは「キーセレクタ」と呼ばれ、このセレクタによってどれだけ絞り込むことができるかにコストは左右される。

効率的なCSSセレクタ

[1]でも紹介されているhttps://developer.mozilla.org/en/writing_efficient_cssでのメインメッセージは下記の通りである。

• スタイルが継承される場合は、そもそもルールを記述しない
• ID、クラス、タイプのセレクタ以外はコストが高いため、できるだけ使用しない（※特に子孫セレクタは最もコストがかかる）
• 結合子セレクタを使う代わりに、セレクトしたい要素に class を付与することを推奨する

非効率なCSSセレクタの性能影響

[1]では、米国トップ10WebサイトのCSSルール数、DOM要素数、DOMの深さの平均、と同様の条件で、非効率なセレクタを使うことで余計にかかる時間は30ミリ秒程度としている。

CSS適用のタイミング

CSSが適用されるタイミングは下記の2つだ。

• 初期表示時
• スタイルに影響するような、DOM要素の変更があった時（リフローと呼ばれる）（※ただし、影響をうける要素だけをレイアウトしなおすように最適化されている）

CSSパフォーマンス計測

CSSパフォーマンス検証には下記のページが便利。

• CSS Test Creator

任意のページについて計測したい場合は下記で計測できる？？←宿題

• reflow_timer.js

公式サイト

• Full property table

参考文献

[1]

続・ハイパフォーマンスWebサイト ―ウェブ高速化のベストプラクティス