いくつかのページで Google Page Speed Firefox 拡張機能を実行したところ、「効率的な CSS セレクター」の下に、CSS で非効率的なさまざまなものがリストされました。
しかし、いくつかのメッセージは少し不可解に見えます - これら (太字) は何を意味しますか?
div#menu h3.soon
2 つの子孫セレクターとタグで過度に修飾された ID とタグで過度に修飾されたクラスを持つ小さなタグ キーtable.data tr:nth-child(2n) td
2 つの子孫セレクターを持つタグ キーとタグで過度に修飾されたクラスtable.data tr.disabled td
2 つの子孫セレクターを持つタグ キーとタグで過度に修飾されたクラスとタグで過度に修飾されたクラス
彼らは子孫セレクターが悪いと考えていると思いますが、「過度に修飾された」ものもたくさんあります。おそらく、これらすべてを修正するために多大な努力をするつもりはありません (多数あります) が、ここで Google が実際に何を意味するのかを知っておくとよいでしょう!
まず、私はPage Speedを使用したことがありませんが、メッセージを読むのに少し時間がかかる場合、メッセージはそれほどわかりにくいものではありません。
div＃menu h3.soon small
2つの子孫セレクターとタグで過度に修飾されたIDとタグで過度に修飾されたクラスを持つタグキー
2つの子孫セレクターを備えたタグキー：クラスの別のタグにすぐに含まれない小さなタグがいくつありますか？なし？この場合、CSSのネストはまったく不要です。
タグで過度に修飾されたID： #menuの前にdivを付ける必要はありません。IDメニューのマークアップには他のタグがない可能性が高いので（そうすべきではありません、IDです！）、冗長なdivをメニューの前に追加します。
タグで過度に修飾されたクラス： .soonの前にh3を付ける必要はありません。マークアップにh3タグ以外のタグがすぐにない可能性が高いため、.soonの前にh3を付ける必要はありません。
他のメッセージも同様に続きます。
-スティーブン
スティーブンはよく言った。
彼らがあなたのセレクターにフラグを立てている理由は、CSS ルールが右から左に一致するためです。
ID を要素の先頭に追加する (div#content のように) 必要はありません。これは、ブラウザーが "div" に到達するまでにセレクターを既に照合しているためです。しかし、ブラウザは依然としてそれを評価することを余儀なくされています。
子孫セレクターはコストがかかります。これは、ブラウザーが、最も右の単純なセレクターで参照されている dom 要素のすべてのインスタンスを、考えられるすべての祖先に対してチェックする必要があるためです。複数の子孫は、パフォーマンスの低下を悪化させます。
とはいえ、(ほとんどの場合) セレクターを最適化することで得られるパフォーマンスの向上はごくわずかです。
クラスを指定しているため、タグを使用する理由がないため、すでにタグを制限しており、追加の検索を行う必要があると言っています。
例えば：
div#menu h3.soon .small
ここで div から始める理由はありません。id メニューを持つ html 要素の下の h3 タグですぐに class small in class を見るだけだからです。
彼らはこのようなことを提案しています
#menu .soon .small {...}
あるいは
#menu {...}
.soon {...}
.small {...}