[解決済み] なぜブラウザはCSSセレクタを右から左へマッチングさせるのですか？

質問

CSSセレクタは、ブラウザエンジンによって右から左へと照合されます。そのため、まず子を見つけ、次にその親をチェックして、ルールの残りの部分と一致するかどうかを確認します。

1. これはなぜでしょうか？
2. 仕様に書いてあるからということでしょうか？
3. 左から右へ評価された場合、最終的なレイアウトに影響を与えますか？

一番シンプルな方法は、要素の数が少ないセレクタを使うことだと思います。つまり、まずID（1つの要素しか返さないはずなので）。たとえば、ページにはスパンが1つしかないので、スパンを参照するルールでは、そのノードに直接アクセスします。

以下は私の主張を裏付けるリンクです。

1. http://code.google.com/speed/page-speed/docs/rendering.html
2. https://developer.mozilla.org/en/Writing_Efficient_CSS

1つの子の親をすべて見るのではなく、親の子をすべて見る（多数になる可能性がある）ことを避けるために、このような方法をとっているように思えますが、いかがでしょうか。たとえDOMが深くても、RTLマッチングでは1階層につき複数のノードを見るのではなく、1つのノードを見るだけです。 CSSセレクタの評価はLTRとRTLのどちらが簡単/速いですか？

どのように解決するのですか？

ブラウザがセレクタ マッチングを行うときは、1 つの要素（スタイルを決定しようとしている要素）とすべてのルールとそのセレクタがあり、どのルールがその要素に一致するかを見つける必要があることに留意してください。 これは、たとえば、セレクタが 1 つしかなく、そのセレクタに一致するすべての要素を見つける必要がある、通常の jQuery の場合とは異なります。

セレクタが1つだけで、そのセレクタと比較する要素が1つだけなら、左から右への方が理にかなっている場合があります。 しかし、それは明らかに ではない ブラウザの状況です。 ブラウザはGmailなどをレンダリングしようとしていて、1つの <span> Gmail がスタイルシートに記述している 10,000 以上のルール（この数は作り話ではありません）に従ってスタイルを設定しようとしています。

特に、ブラウザが検討しているセレクタのほとんどを見ている状況において しない は当該要素にマッチします。 そのため、セレクタがマッチしないことをできるだけ速く判断することが問題になります。マッチするケースで少し余分な作業が必要になったとしても、マッチしないケースで節約したすべての作業により、勝てるのです。

セレクタの右端を要素にマッチングさせることから始めると、マッチングしない可能性が高いので、その時点で終了となります。 マッチした場合はさらに作業が増えますが、ツリーの深さに比例するだけなので、ほとんどの場合はそれほど大きくはありません。

一方、セレクタの左端からマッチングを始めるとしたら......何とマッチングさせるのでしょうか？ DOMを歩き回り、マッチしそうなノードを探さなければなりません。 その左端にマッチするものがないことを発見するだけでも、しばらく時間がかかるかもしれません。

そのため、ブラウザは右からマッチングを行います。これにより、出発点が明確になり、セレクタの候補のほとんどをすばやく取り除くことができます。 次のサイトで、いくつかのデータを見ることができます。 http://groups.google.com/group/mozilla.dev.tech.layout/browse_thread/thread/b185e455a0b3562a/7db34de545c17665 (表記がわかりにくいですが)、特に2年前のGmailでは、(ルール、要素)のペアの70%は、ルールの右端のセレクタのタグ/クラス/ID部分を調べるだけで、ルールがマッチしないと判断できたということです。 Mozilla の pageload パフォーマンス テスト スイートの対応する数値は 72% でした。 ですから、すべてのルールのうち2/3をできるだけ早く削除し、残りの1/3のマッチングだけを気にするようにすることは、本当に価値があることです。

また、確実にマッチしないルールにマッチしようとするのを避けるために、ブラウザがすでに行っている最適化があることにも注意してください。 たとえば、一番右のセレクタが ID を持ち、その ID が要素の ID と一致しない場合、Gecko ではそのセレクタをその要素に対してマッチさせる試みはまったく行われません。 つまり、これは、その要素にマッチする可能性がかなり高いルールの70%になります。 今も は、右端のセレクタのタグ/クラス/IDだけを考慮してもマッチしません。