CSS セレクター エンジンは右から左への読み取りを優先しますか?

CSS セレクター エンジン: 右から左への読み取り

CSS の世界では、セレクターは .name のようなものであると一般に想定されてきました。 div.name よりも高速に実行されます。しかし、最近の調査結果の中にはそうではないと主張するものもあり、ほとんどのセレクター エンジンは右から左に読み取ることを示唆しています。これにより、パフォーマンスへの影響と、このアプローチの背後にある理論的根拠について疑問が生じます。

右から左への評価

.name のほうが高速であるという仮定は事実ですが、欠陥があるとしても、全体的なパフォーマンスはブラウザの実装と特定のドキュメント構造に大きく依存します。それにもかかわらず、最新の CSS セレクター エンジンのほとんどは、右から左への評価アプローチに従っています。

Gecko の開発者である Boris Zbarsky 氏によると、ブラウザは通常、要素を選択し、すべての候補セレクターを評価して一致するかどうかを判断することによって動作します。 、特定のセレクターに一致する要素を識別するのではなく。この右から左へのアプローチにより、> などのコンビネータ間を移動するプロセスが簡素化されます。

単純なセレクター内のトラバーサル

ただし、右から左への評価が内部の単純なセレクター レベルまで拡張されないことを区別することが重要です。各複合セレクター。たとえば、複雑なセレクター div.name[data-foo="bar"]:nth-child(5):hover::after では、ブラウザーは必ずしも次の順序で条件をチェックするとは限りません: hover、child count、data

代わりに、パフォーマンス上の理由から、ID などの特定の単純なセレクターが優先される場合があります。これは Gecko の実装で明らかであり、一致プロセスを最適化するために ID を持つルールが最初にチェックされます。

概要

CSS セレクター エンジンの読み取りの方向は、一般に正しいです。ただし、これを実装する方法の具体的な詳細はブラウザによって異なる場合があります。さらに、右から左への評価は、個々の単純セレクター レベルまでではなく、複合セレクター内のコンビネーター全体にのみ適用されます。

以上がCSS セレクター エンジンは右から左への読み取りを優先しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。