Google Page Speed: ¿qué significan estos mensajes?

Question

Ejecuté la extensión Google Page Speed ​​Firefox en algunas páginas, y bajo "selectores eficaces de CSS" enumeré varias cosas que son ineficaces en mi CSS.

Pero algunos de los mensajes parecer un poco críptica - ¿Qué tienen estas (en negrita) significa:

div # menú h3.soon pequeña
clave etiqueta con 2 selectores de descendientes y de identificación excesivamente calificado con etiqueta y Clase excesivamente calificado con la etiqueta

table.data tr: nth-child (2n) td
clave tag con 2 selectores de descendientes y Clase excesivamente calificados con la etiqueta

table.data tr.disabled td
clave etiqueta con 2 selectores de descendientes y Clase excesivamente calificados con la etiqueta y la clase excesivamente calificados con la etiqueta

Estoy asumiendo que piensan selectores de descendientes son malas, pero también hay muchos "demasiado calificados". Probablemente no haga demasiado esfuerzo arreglando todo esto (hay muchos) pero sería bueno saber lo que Google realmente quiere decir aquí.

Answer 1

En primer lugar, nunca he utilizado Page Speed, pero el mensaje no es que críptica si se toma un segundo para leer eso.

div # menú h3.soon pequeña

clave etiqueta con 2 selectores de descendientes y de identificación excesivamente calificados con etiqueta y Clase excesivamente cualificado con etiqueta

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

ID demasiado calificado con la etiqueta: #menú no necesita ser antepuesto con div. Lo más probable es que no tenga ninguna otra etiqueta en su marcado con el menú de identificación (¡no debería, es una identificación!), Por lo que antepone el menú con div en redundante.

Clase excesivamente calificada con la etiqueta: .soon no necesita ser precedida por h3. Lo más probable es que no tenga ninguna otra etiqueta en su marcado con una clase que no sea h3, por lo que no es necesario anteponer .soon a h3.

Los demás mensajes son similares.

-Stephen

Answer 2

Está diciendo que no hay razón para usar la etiqueta ya que le da una clase, por lo que ya la está limitando y tiene que hacer una búsqueda adicional.

Por ejemplo:

div#menu h3.soon .small 

Aquí no hay ninguna razón para comenzar con div ya que sólo se verá en la clase pequeña en la clase pronto en una etiqueta h3 debajo elemento html con Identificador del menú.

Ellos están sugiriendo algo como esto

#menu .soon .small {...} 

o incluso

#menu {...} 

.soon {...} 

.small {...} 

Answer 3

Stephen dijo muy bien.

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

No es necesario anteponer una ID a un elemento (como en el contenido de div div) porque el navegador ya ha coincidido con el selector cuando llega a "div". Pero el navegador todavía está obligado a evaluarlo.

Los selectores descendientes son caros porque el navegador tiene que verificar todas las instancias del elemento dom referenciado en el selector simple más a la derecha contra todos los posibles antepasados. Múltiples descendientes componen la penalización de rendimiento.

Dicho esto, la ganancia de rendimiento obtenida de la optimización de los selectores (en la mayoría de los casos) es insignificante.