Google Page Speed - was haben diese Meldungen zu bedeuten?

Question

Ich lief die Google-Seite Geschwindigkeit Firefox-Erweiterung, die auf ein paar Seiten, und unter "effiziente CSS-Selektoren" er listete verschiedene Dinge, die ineffizient sind in meinem CSS.

Aber einige der Nachrichten, die scheinen ein wenig kryptisch - was diese nicht (in bold) bedeuten:

div#menu h3.bald kleine
Tag-Schlüssel (mit 2 Nachfahren-Selektoren und-ID übermäßig qualifizierte mit-tag-und-Klasse übermäßig qualifizierte mit-tag

Tabelle.data tr:nth-child(2n) td
Tag-Schlüssel (mit 2 Nachfahren-Selektoren und Klassen übermäßig qualifizierte mit-tag

Tabelle.data.tr.deaktiviert td
Tag-Schlüssel (mit 2 Nachfahren-Selektoren und Klassen übermäßig qualifizierte mit-tag-und-Klasse übermäßig qualifizierte mit-tag

Ich gehe davon aus, dass Sie denken, Nachfahren-Selektoren sind schlecht, aber es gibt viele "übermäßig qualifiziert" als gut.Ich wahrscheinlich nicht gehen, um zu viel Aufwand Festsetzung alle diese (es gibt viele), aber es wäre schön zu wissen, was Google tatsächlich bedeutet hier!

Answer 1

First off, ich habe noch nie verwendet, Page Speed, aber die Botschaft ist nicht, dass Sie kryptische wenn Sie eine zweite zu Lesen.

div#menu h3.bald kleine

Tag-Schlüssel (mit 2 Nachfahren-Selektoren und-ID übermäßig qualifiziert tag und Klasse übermäßig qualifiziert Tags

Tag-Schlüssel (mit 2 Nachfahren-Selektoren: Wie viele kleine tags haben Sie, die sind nicht enthalten in ein anderes tag mit Klasse bald?Keiner?Die CSS-Schachtelung wäre auch völlig unnötig in diesem Fall.

ID übermäßig qualifizierte mit-tag: #Menü muss nicht vorangestellt, mit div.Sie wahrscheinlich nicht haben jede andere tags in Ihrem markup mit id-Menü (Sie sollten nicht eine ID!), so voranstellen Menü mit div redundant.

Klasse übermäßig qualifizierte mit-tag: .bald müssen nicht vorangestellt werden mit h3.Sie wahrscheinlich nicht haben jeder andere tag im markup mit Klasse bald auch in anderen als h3-tags, also voranstellen .bald mit h3 ist unnötig.

Die anderen Nachrichten Folgen ähnlich.

-Stephen

Answer 2

Stephen sagte es auch.

Der Grund, warum Sie markierst deine Selektoren ist, dass CSS-Regeln angepasst sind von rechts nach Links.

Voranstellen einer ID mit einem element (wie in div#content) ist nicht erforderlich, da der browser bereits abgestimmt Selektor durch die Zeit es erreicht "div".Aber der browser ist immer noch gezwungen, es zu bewerten.

Nachfahren-Selektoren sind teuer, weil der browser alle Instanzen überprüfen des dom-Elements wird in der Recht-die meisten einfachen Selektor gegen alle möglichen Vorfahren.Mehrere Nachkommen compound die performance penalty.

Das heißt, die performance-Gewinn erzielt, von der Optimierung Selektoren (in den meisten Fällen), ist unerheblich.

Answer 3

Es ist sagen, es gibt keinen Grund, mit dem tag, da Sie eine Klasse, so sind Sie bereits eingegrenzt und es zu tun haben extra suchen.

Zum Beispiel:

div#menu h3.soon .small

Hier gibt es keinen Grund, mit zu beginnen div, da Sie nur einen Blick auf die Klasse der kleinen in der Klasse bald in einem h3-tag unter html-element mit der id-Menü.

Unterstellen Sie so etwas wie dieses

#menu .soon .small {...}

oder auch

#menu {...}

.soon {...}

.small {...}