Google Page Speed: ¿qué significan estos mensajes?

Question

Ejecuté la extensión Google Page Speed ??Firefox en unas pocas páginas, y bajo " selectores CSS eficientes " enumeró varias cosas que son ineficientes en mi CSS.

Pero algunos de los mensajes parecen un poco crípticos. ¿Qué significan (en negrita):

  

div # menu h3.soon small
   Tecla de etiqueta con 2 selectores descendientes e ID altamente calificada con etiqueta y Clase altamente calificada con etiqueta

     

table.data tr: nth-child (2n) td
   Tecla de etiqueta con 2 selectores descendientes y Clase altamente calificada con etiqueta

     

table.data tr.disabled td
   Tecla de etiqueta con 2 selectores descendientes y Clase altamente calificada con etiqueta y Clase demasiado calificada con etiqueta

Supongo que piensan que los selectores de descendientes son malos, pero hay muchos "altamente calificados" también. Probablemente no haré demasiado esfuerzo para arreglar todo esto (hay muchos), ¡pero sería bueno saber qué significa realmente Google aquí!

Answer 1

Primero que nada, nunca he usado Page Speed, pero el mensaje no es tan críptico si te tomas un segundo para leerlo.

  

div # menu h3.soon small

     

Tecla de etiqueta con 2 selectores de descendientes y un ID altamente calificado con   Etiqueta y clase demasiado calificada con   etiqueta

Tecla de etiqueta con 2 selectores descendientes: ¿Cuántas etiquetas pequeñas tiene que no estén contenidas en otra etiqueta con clase pronto? ¿Ninguna? El anidamiento de CSS sería totalmente innecesario en este caso.

El ID está excesivamente calificado con la etiqueta: #menu no necesita ser precedido con div. Lo más probable es que no tenga ninguna otra etiqueta en su marca con el menú de identificación (¡no debería, es una identificación!), Por lo que el menú se abre ante div con redundante.

La clase está demasiado calificada con la etiqueta: .soon no necesita ser precedida con h3. Lo más probable es que no tenga ninguna otra etiqueta en su marca con otra clase que no sea h3, por lo que no es necesario anteponer .soon con h3.

Los otros mensajes siguen de manera similar.

-Stephen

Answer 2

Stephen lo dijo bien.

La razón por la que están marcando sus selectores es que las reglas de CSS coinciden de derecha a izquierda.

Preponer una ID con un elemento (como en div # content) no es necesario porque el navegador ya ha coincidido con el selector en el momento en que llega a " div " ;. Pero el navegador todavía está obligado a evaluarlo.

Los selectores de descendientes son costosos porque el navegador tiene que verificar todas las instancias del elemento dom al que se hace referencia en el selector más simple a la derecha contra todos los antepasados ??posibles. Varios descendientes componen la penalización de rendimiento.

Dicho esto, la ganancia de rendimiento lograda al optimizar los selectores (en la mayoría de los casos) es despreciable.

Answer 3

Está diciendo que no hay razón para usar la etiqueta ya que das una clase, así que ya la estás limitando y tienes que hacer una búsqueda adicional.

Por ejemplo:

div#menu h3.soon .small

Aquí no hay razón para comenzar con div, ya que solo verás clase pequeña en clase pronto en una etiqueta h3 debajo del elemento html con menú de identificación.

Están sugiriendo algo como esto

#menu .soon .small {...}

o incluso

#menu {...}

.soon {...}

.small {...}