CSS セレクターは、ブラウザ エンジンによって右から左に照合されます。したがって、まず子要素が検索され、次にその親要素がルールの残りの部分と一致するかどうかがチェックされます。
- どうしてこれなの？
- それは単に仕様に書いてあるからですか?
- 左から右に評価した場合、最終的なレイアウトに影響しますか?
私にとって、最も簡単な方法は、要素数が最も少ないセレクターを使用することです。つまり、ID が最初です (ID は 1 つの要素のみを返すため)。次に、クラスまたはノード数が最も少ない要素を使用します。たとえば、ページにはスパンが 1 つしかない場合は、スパンを参照するルールを使用してそのノードに直接移動します。
私の主張を裏付けるリンクをいくつか紹介します
- http://code.google.com/speed/page-speed/docs/rendering.html
- https://developer.mozilla.org/en/効率的なCSSの書き方
これは、1 つの子の親すべて (1 つでなければならない) ではなく、親のすべての子 (多数である可能性がある) を調べる必要がないようにするために、このように行われているようです。DOM が深い場合でも、RTL マッチングでは複数のノードではなく、レベルごとに 1 つのノードのみを調べます。CSS セレクタ LTR と RTL のどちらを評価する方が簡単/速いですか?
ベストアンサー1
ブラウザがセレクター マッチングを行うときは、1 つの要素 (スタイルを決定しようとしている要素) とすべてのルールとそのセレクターがあり、どのルールが要素に一致するかを見つける必要があることに注意してください。これは、セレクターが 1 つだけあり、そのセレクターに一致するすべての要素を見つける必要がある通常の jQuery とは異なります。
セレクターが 1 つしかなく、そのセレクターと比較する要素が 1 つしかない場合は、左から右のほうが理にかなっている場合があります。しかし、これは明らかにブラウザの状況ではありません<span>。ブラウザは Gmail などをレンダリングしようとしており、スタイルを設定しようとしているものと、Gmail がスタイルシートに設定した 10,000 を超えるルールを持っています (この数字は私が作ったものではありません)。
特に、ブラウザが検討している状況では、検討しているセレクターのほとんどが問題の要素と一致しません。そのため、問題は、セレクターが一致しないことをできるだけ早く判断することです。一致する場合に少し余分な作業が必要になったとしても、一致しない場合に節約できる作業のおかげで、それでも勝利を収めることができます。
セレクターの右端の部分を要素と一致させることから始めると、一致しない可能性が高く、それで終わりになります。一致した場合は、さらに作業を行う必要がありますが、ツリーの深さに比例するだけであり、ほとんどの場合、ツリーの深さはそれほど大きくありません。
一方、セレクターの左端の部分からマッチングを開始する場合、何とマッチングするのでしょうか? DOM を調べて、それに一致する可能性のあるノードを探す必要があります。左端の部分に一致するものがないことを発見するだけでも、しばらく時間がかかる場合があります。
ブラウザは右からマッチします。これにより、明確な開始点が与えられ、候補セレクタのほとんどをすぐに取り除くことができます。いくつかのデータは、http://groups.google.com/group/mozilla.dev.tech.layout/browse_thread/thread/b185e455a0b3562a/7db34de545c17665(表記はわかりにくいですが)、結局のところ、特に 2 年前の Gmail では、ルールの右端のセレクタのタグ/クラス/ID 部分を調べるだけで、(ルール、要素) ペアの 70% でルールが一致しないと判断できました。Mozilla のページ読み込みパフォーマンス テスト スイートの対応する数値は 72% でした。したがって、すべてのルールの 2/3 をできるだけ早く取り除き、残りの 1/3 の一致だけを気にする価値は十分にあります。
また、ブラウザが既に実行している他の最適化により、確実に一致しないルールの一致を試みることさえ回避できることにも注意してください。たとえば、右端のセレクタに ID があり、その ID が要素の ID と一致しない場合、Gecko ではそのセレクタをその要素と一致させる試みはまったく行われません。試行される「ID を持つセレクタ」のセットは、要素の ID のハッシュテーブル検索から取得されます。つまり、右端のセレクタのタグ/クラス/ID だけを考慮した後でも一致しないルールは、一致する可能性がかなり高いものの、全体の 70% に相当します。