css - * は実際どのくらい遅いのですか?

Question

誰もが、* { ... }セレクターが非常に遅いと述べています。しかし、実際にはどのくらい遅いのでしょうか?

私はいつもそれを避けようとしますが、時には非常に便利です。例えば：* + h1 { margin-top 1em; }

Answer 1

簡単に言えば、ユニバーサル セレクター*は、ページに要素がある場合と同じくらい遅くなります。

右から左へのマッチング ブラウザは各要素を取得し、それをすべての候補ルールと照合するため、すべての要素が問題なく一致*します。それ自体はパフォーマンスに悪影響を与えることはありませんが、ページに多くの要素がある場合や非常に複雑な DOM がある場合、それが遅くなると言われていますが、それでもブラウザーのパフォーマンスが目に見えて低下することはありません.

たとえば、 のようなものでも* + h1妥当です。マッチングのパフォーマンスを考慮したい場合、右から左へのマッチング ブラウザーはh1、最初に要素に対してのみそのセレクターをテストしてから、それらの前に要素が発生しているかどうかを確認します (*基本的に一致が保証されているため、実際にはそれほど労力はかかりません)。

同様の質問に対する私のこの回答を確認することもできます* + *（これは2つのユニバーサルセレクターです！）。