Google Page Speed ??- o que essas mensagens?

Question

Eu corri a extensão Google Page Speed ??Firefox em algumas páginas, e em "seletores CSS eficientes" listou várias coisas que são ineficientes em meu CSS.

Mas algumas das mensagens de parecer um pouco enigmática - O que essas (em negrito) médio:

div Menu # h3.soon pequena
Chave Tag com 2 seletores descendentes e ID excessivamente qualificados com tag e Classe excessivamente qualificados com tag

table.data tr: nth-child (2n) td
Chave Tag com 2 seletores descendentes e Classe excessivamente qualificados com tag

table.data tr.disabled td
Chave Tag com 2 seletores descendentes e Classe excessivamente qualificados com tag e Classe excessivamente qualificados com tag

Estou assumindo que eles pensam seletores descendentes são ruins, mas há muitas "excessivamente qualificado" também. Eu provavelmente não vai para muito esforço fixação todos estes-se (há muitos), mas seria bom saber o que o Google realmente significa aqui!

Answer 1

Em primeiro lugar, eu nunca utilizado Page Speed, mas a mensagem não é que críptica se você tomar um segundo para lê-lo.

div pequena # menu de h3.soon

Chave Tag com 2 seletores descendentes e ID excessivamente qualificados com tag e Classe excessivamente qualificado com tag

Chave Tag com 2 seletores descendentes: Quantas marcas pequena você tem que não estão contidos em outra tag com classe em breve? Nenhum? O assentamento CSS seria totalmente desnecessário neste caso.

ID excessivamente qualificado com tag: #menu não precisa ser prefixado com div. Você provavelmente não tem nenhum outras tags em sua marcação com o menu id (você não deve, a um ID!), Então menu de prepending com div em redundante.

Class excessivamente qualificado com tag: não .soon não precisam ser precedidos com h3. Você provavelmente não tem qualquer outra tag na sua marcação com classe logo que não h3 marcas, assim antecedendo .soon com h3 é desnecessário.

As outras mensagens acompanhar de forma semelhante.

Stephen

Answer 2

Stephen disse muito bem.

A razão que eles estão sinalizando seus seletores é que CSS regras são combinadas direita para a esquerda.

Prepending um ID com um elemento (como no div conteúdo #) é desnecessário porque o navegador já tem acompanhado o seletor no momento em que chega a "div". Mas o navegador ainda é forçado a avaliá-lo.

Seletores descendentes são caros porque o navegador tem que verificar todas as instâncias do elemento DOM referenciado no selector mais à direita simples contra todos os ancestrais possíveis. Vários descendentes agravar a penalidade de desempenho.

Dito isso, o ganho de desempenho alcançado a partir de otimizar seletores (na maioria dos casos) é insignificante.

Answer 3

Ele está dizendo que não há razão para usar a marca desde que você dar uma aula para que você já está limitando-lo e ele tem que fazer a pesquisa extra.

Por exemplo:

div#menu h3.soon .small

Aqui não há nenhuma razão para começar com div desde que você só vai olhar para pequena classe na classe em breve em uma tag h3 abaixo elemento HTML com o menu id.

Eles estão sugerindo algo como isto

#menu .soon .small {...}

ou mesmo

#menu {...}

.soon {...}

.small {...}