Google Page Speed - これらのメッセージは何を意味しますか?

Question

Google Page Speed Firefox 拡張機能をいくつかのページで実行したところ、「効率的な CSS セレクター」の下に、CSS で非効率なさまざまなものがリストされました。

しかし、メッセージの中には少し不可解に見えるものもあります。これら (太字) は何を意味するのでしょうか。

div#menu h3.すぐに小さい
2 つの子孫セレクターを含むタグ キー、タグで過剰修飾された ID、およびタグで過剰修飾されたクラス

テーブルデータ tr:nth-child(2n) td
2 つの子孫セレクターを含むタグキーとタグで過度に修飾されたクラス

table.data tr.disabled td
2 つの子孫セレクターを含むタグ キー、タグで過剰修飾されたクラス、およびタグで過剰修飾されたクラス

彼らは子孫セレクターが悪いと考えていると思いますが、「過剰に修飾された」セレクターもたくさんあります。これらすべてを修正するのにあまり苦労はしないでしょうが (たくさんあります)、Google がここで実際に何を意味するのかを知っておくと良いでしょう。

Answer 1

まず、私は Page Speed を使ったことはありませんが、メッセージは少し時間をかけて読めばそれほど不可解なものではありません。

div#menu h3.すぐに小さい

2つの子孫のセレクターとIDがタグとクラスが過度に資格を持たせてタグで過度に資格を持つタグキー

2 つの子孫セレクターを含むタグキー: すぐにクラスを持つ別のタグに含まれない小さなタグがいくつありますか?なし？この場合、CSS のネストはまったく必要ありません。

ID がタグで過剰に修飾されています: #menu の前に div を付ける必要はありません。マークアップ内に id メニューを含む他のタグがない可能性が高いため (ID ですので、そうすべきではありません)、冗長に div をメニューの前に追加します。

タグで過剰に修飾されたクラス: .soon の前に h3 を付ける必要はありません。おそらく、マークアップには h3 タグ以外に classoon を含む他のタグがないため、.soon の前に h3 を付ける必要はありません。

他のメッセージも同様に続きます。

-スティーブン

Answer 2

スティーブンはよく言いました。

彼らがセレクターにフラグを立てる理由は、CSS ルールが右から左に照合されるためです。

ブラウザーは「div」に到達するまでにすでにセレクターと一致しているため、(div#content のように) ID を要素の前に追加する必要はありません。しかし、ブラウザは依然としてそれを評価することを強制されます。

子孫セレクターは、ブラウザが最も右側の単純なセレクターで参照される dom 要素のすべてのインスタンスを、考えられるすべての祖先に対してチェックする必要があるため、負荷が高くなります。子孫が複数あると、パフォーマンス上のペナルティがさらに増大します。

とはいえ、セレクターの最適化によって達成されるパフォーマンスの向上は (ほとんどの場合) ごくわずかです。

Answer 3

クラスを指定しているため、すでに制限されており、追加の検索を行う必要があるため、タグを使用する理由がないことを示しています。

例えば：

div#menu h3.soon .small

ここでは、id メニューを持つ html 要素の下の h3 タグ内で、すぐに class 内の class small だけを確認するため、div から始める理由はありません。

彼らはこのようなことを提案しています

#menu .soon .small {...}

あるいは

#menu {...}

.soon {...}

.small {...}