Google Page Speed ??- que signifient ces messages?

Question

J'ai exécuté l'extension Google Page Speed ??Firefox sur quelques pages et sous les "sélecteurs CSS efficaces". il a énuméré diverses choses qui sont inefficaces dans mon CSS.

Mais certains messages semblent un peu cryptiques - que signifient-ils (en gras):

  

div # menu h3.soon petit

   Clé de balise avec 2 sélecteurs descendants et ID trop qualifiés avec balise et Classe trop qualifiés avec balise

     

table.data tr: nième enfant (2n) td
   Clé de balise avec 2 sélecteurs descendants et classe trop qualifiée avec balise

     

table.data tr.disabled td
   Clé de balise avec 2 sélecteurs descendants et classe trop qualifiée avec balise et classe trop qualifiée avec balise

Je suppose qu'ils pensent que les sélecteurs de descendants sont mauvais, mais il y a beaucoup de "trop ??qualifiés" ainsi que. Je ne ferai probablement pas trop d'efforts pour régler tout cela (il y en a beaucoup), mais il serait bon de savoir ce que Google signifie réellement ici!

Answer 1

Tout d'abord, je n'ai jamais utilisé Page Speed, mais le message n'est pas si mystérieux si vous prenez une seconde pour le lire.

  

div # menu h3.soon petit

     

Clé de balise avec 2 sélecteurs descendants et ID trop qualifié avec   tag et classe trop qualifiés avec   tag

Clé de balise avec 2 sélecteurs descendants: Combien de petites balises avez-vous qui ne sont pas contenues dans une autre balise avec classe bientôt? Aucun? L'imbrication CSS serait totalement inutile dans ce cas.

Un ID trop qualifié avec la balise: #menu n'a pas besoin d'être préfixé par div. Vous n'avez probablement aucune autre balise dans votre balisage avec le menu id (vous ne devriez pas, c'est un identifiant!), Donc le menu est ajouté avec div en redondant.

Les classes trop qualifiées avec le tag: .soon n'a pas besoin d'être précédé de h3. Vous n'avez probablement aucune autre balise dans votre balisage avec class bientôt, à part les balises h3. Il est donc inutile de prévoir .soon avec h3.

Les autres messages suivent de la même manière.

-Stephen

Answer 2

Stephen l'a bien dit.

La raison pour laquelle ils sélectionnent vos sélecteurs est que les règles CSS sont appariées de droite à gauche.

Il est inutile de préfixer un ID avec un élément (comme dans div # content) car le navigateur a déjà fait correspondre le sélecteur au moment où il atteint "div". Mais le navigateur est toujours obligé de l'évaluer.

Les sélecteurs de descendants sont coûteux car le navigateur doit vérifier toutes les occurrences de l'élément dom référencé dans le sélecteur simple le plus à droite par rapport à tous les ancêtres possibles. Les descendants multiples composent la pénalité de performance.

Cela dit, le gain de performance obtenu grâce à l'optimisation des sélecteurs (dans la plupart des cas) est négligeable.

Answer 3

Cela signifie qu'il n'y a aucune raison d'utiliser la balise, car vous donnez une classe, vous la limitez donc déjà et vous devez effectuer des recherches supplémentaires.

Par exemple:

div#menu h3.soon .small

Ici, il n'y a aucune raison de commencer avec div puisque vous ne regarderez bientôt que la classe small in class dans une balise h3 située sous l'élément html avec le menu id.

Ils suggèrent quelque chose comme ça

#menu .soon .small {...}

ou même

#menu {...}

.soon {...}

.small {...}