8

Algum tempo atrás vi alguns testes a repeito da renderização do CSS utilizando id ser mais rápida do que a renderização utilizando class, devido a quantidade de id ser muitas vezes inferior no documento em relação ao número de classes (um dos testes vocês podem conferir nessa tabela - texto em inglês).

Mesmo a diferença sendo quase imperceptível de um seletor para outro me surgiu uma duvida em relação se a renderização seria mais rápida utilizando agrupamento de id (com virgula) ou class quando comparando grandes quantidades de elementos (1000 ou +).

Ex. (like DryCSS):

<div id="teste-1"></div>
<div id="teste-2"></div>
<div id="teste-3"></div>

#teste-1, #teste-2, #teste-3 {
  border: 1rem solid transparent;
}

vs (convencional):

<div class="teste"></div>
<div class="teste"></div>
<div class="teste"></div>

.teste {
    border: 1rem solid transparent;
}

Fiquei curioso a respeito dos possíveis resultados e gostaria de saber se alguém conhece alguma ferramenta de teste cuja a qual eu possa comparar a renderização entre os dois exemplo? E baseado em fundamentos, qual das duas formas é mais rápida? (levando em consideração os dados descritos acima).


OBS.: A dúvida pode parecer meio boba mas ela tem objetivo único e especifico voltado ao conhecimento em relação a velocidade de renderização, então por favor, evitem dicas relacionadas a manutenção, escalabilidade, tamanho do documento e reutilização, assim como opinião própria em relação a utilização de id em CSS, tenho conhecimento de cada um desses pontos, meu interesse é apenas saber a respeito da performance dos dois seletores nas situações propostas.

2
  • Dei essa resposta que fala um pouco sobre performance de seletores. Veja se te dá uma luz Commented 17/11/2015 às 18:04
  • @CaioFelipePereira, valeu pela intenção mais não ajudou :/ o caso aqui é especifico em relação a ids agrupados vs class. Commented 17/11/2015 às 18:06

2 Respostas 2

5

Ferramenta

O Google Chrome tinha um CSS profiler, mas este foi removido porque considera-se que o desempenho do CSS hoje é razoavelmente bom para os casos que eram lentos há alguns anos, então simplesmente este tipo de otimização é algo que não vale a pena investir.

Entretanto, ainda é possível ver o tempo em que os estilos são interpretados e recalculados para a página usando a linha de tempo da ferramenta do desenvolvedor.

Acessando a aba Timeline da ferramenta do desenvolvedor, inicie a captura clicando na bolinha no canto superior esquerdo, recarregue a página sendo testafa e clique novamente na bolinha para finalizar a captura dos dados. Deixe a opção JS Profile marcada.

Após a captura, você tem diferentes visualizações, mas independente de qual escolher, Parse Stylesheet vai lhe dar o tempo que o navegador demorou para interpretar os estilos e Recalculate style o tempo que demorou para aplicar o estilo.

Veja o exemplo abaixo:

Profiler

Interpretando os resultados

Na figura, vemos que a folha de estilo all.css desta página demorou 11.13 milissegundos para ser interpretada. Em seguida há outra folha de estilo específica para moderadores. :)

Depois das folhas serem processadas, uma série de eventos de cálculo de estilos ocorrem, mas infelizmente eles não contém a informação de qual regra estão aplicando.

Para um teste mais efetivo, seria necessário isolar os estilos para ter certeza de qual está sendo executado. É um trabalho manual, mas permitiria realizar comparações.

Por outro lado, comparar tempos entre seletores específicos não faz muito sentido por causa de vários fatores, dentre eles:

Dependência da implementação

Cada navegador e suas diferentes versões isso pode ser otimizado (ou não) de formas bem diferentes.

Pense nos seletores do CSS como um contrato, uma API, onde não há garantias de como a implementação é feita ou mesmo modificada.

Possíveis otimizações

Se eu fosse implementar um mecanismo para aplicar uma folha de estilos no DOM eu nem sempre eu iria percorrer seletor a seletor e, para cada um deles, procurar os elementos no DOM, percorrendo a árvore inúmeras vezes.

Primeiro, eu iria salvar id's e classes em mapas de forma que o acesso fosse feito em tempo relativamente constante, independente do número de elementos. Não sei como isso é feito realmente em cada navegador, mas vou assumir que os desenvolvedores estão hoje usando estruturas de dados inadequadas, percorrendo listas ou árvores desnecessariamente a todo momento.

Segundo, mesmo em casos onde é necessário percorrer o DOM, poderia usar um padrão como Visitor e aplicar vários estilos ao mesmo tempo, em batch, de forma que o tempo total de aplicar dois seletores juntos fosse bem menor do que a soma do tempo de aplicar os dois separadamente.

Consideração do tempo total

Não é apenas o tempo de aplicar um seletor que conta. Como no exemplo acima, é necessário considerar o tempo de interpretação da folha de estilo.

Provavelmente, a interpretação de muitos id's individuais vai levar um tempo bem maior do que a interpretação de uma só classe.

Além disso, se o navegador tiver algum tipo de cache ou estrutura de dados como o mapa que eu descrevi acima, recuperar a lista de elementos que contém uma determinada classe pode ser muito mais rápido do que consultar mil vezes o mapa procurando por id's.

Considerações

Primeiro, quando um website precisa de otimização, devemos olhar primeiro para o que causa o maior impacto e esquecer possíveis micro-otimizações.

Na ferramenta do desenvolvedor de vários navegadores, você poderá facilmente descobrir quais eventos são mais lentos e deixam o usuário bloqueado por mais tempo e então procurar a causa. Veja um exemplo de outro gráfico do Chrome mostrando o tempo de cada evento de carregamento da página:

Timeline 2

Segundo, quase nunca confie em afirmações sobre desempenho que se baseiam em detalhes de implementação que mudam a todo instante. Claro, podem existir casos específicos em que esbarramos em bugs ou comportamentos bizarros e precisamos contornar a situação de alguma forma. Entretanto, é mais adequado tratar isso como soluções temporárias e não tentar transformá-las em boas práticas.

1
  • Luiz, em relação a Timeline do Google, talvez seja a melhor forma de testar, porém me deparei com a questão de que os testes não são precisos, pois os mesmos são influenciados diretamente pelo o que o equipamento está executando nos milissegundos do teste, já que preciso executar um exemplo por vez. Você sabe se haveria alguma forma de executar esses dois testes em paralelo, visando minimizar essa influência? Outro ponto, em relação a esse mapa que você descreve de mapeamento, ele seria por exemplo como a virtual DOM do angular? não entendi muito bem a relação dele com o Visitor Pattern... +1 Commented 18/11/2015 às 10:13
0

Bom dia nesse link tem uma boa especificação sobre a velocidade de renderização de css englobando ids, classes, tags e universais.

https://developer.mozilla.org/pt-BR/docs/Web/CSS/Escrever_folhas_de_estilo_eficientes

Em suma, a order do mais eficiente para o menor é:

  • ID`s
  • Classes
  • Tags
  • Universais

Vale lembrar que a diferença de performance entre esses elementos normalmente tem valores muito baixos imperceptíveis em uma situação real

Resumo das recomendações da Mozilla

  • Evite regras universais
  • Não qualifique regras de ID com classes ou nome de tags
  • Não qualifique regras de classe com nomes de tag
  • Utilize a categoria mais específica possível
  • Evite o seletor descendente
  • Regras de Categoria de Tag jamais devem conter um seletor filho
  • Questione todos os usos do seletor filho
  • Conte com a herança
  • Utilize folhas de estilo com escopo

Quanto ao uso de Ids agrupados vs Classes

Me baseio na resposta de uma pergunta igual realizada no SO em inglês e que faz perfeitamente senso para mim

https://stackoverflow.com/questions/16461759/css-classes-vs-grouped-ids-performance

Tradução:

Não há diferença mensurável entre os dois e como o propósito da classe é duplicar o mesmo estilo para múltiplos elementos, é semanticamente correto usar uma classe.

O único caso onde vale a pena se preocupar com a diferença entre os dois é quando você usa javascript para selecionar elementos pelo ID ou pela classe, e mesmo assim somente quando estamos falando de centenas de elementos.

Se você não chega a este ponto, então a performance que você ganha é perdida pelos kilobytes extras no seu css que aumentam o tempo de carregamento da página.

Em nenhum dos casos vai impactar sua performance perceptivelmente.

E para seu próprio bem, use classes para que não tenha que atualizar seus seletores toda vez que adicionar um novo elemento.

3
  • Isso tudo sem levar em consideração qualquer outro fator, como tamanho do documento ou qual é a "melhor forma", apenas quero saber se há diferença de renderização, mesmo que seja milésimos de segundo, após aplicar agrupamento de Id comparados a classes. Como já disse, pode parecer uma pergunta boba, mas preciso disso para meu projeto de TCC onde falarei entre outros assuntos de renderização dos navegadores... Commented 18/11/2015 às 1:35
  • É um assunto interessante, mantenha a pergunta atualizada sobre novas descobertas para ajudar o pessoal, pela grande maioria dos resultados de pesquisa que fiz não vou chegar em nada mais específico do que a atualização que já coloquei na resposta. Commented 18/11/2015 às 1:39
  • Entendo, já venho pesquisando a algum tempo, o Zeno Rocha me recomendou a Timeline do Chrome uma vez, mas ela sofre muita influência da maquina e os teste não são precisos. Mesmo assim, mais uma vez, muito obrigado pela respostas @AlanRezende =] Commented 18/11/2015 às 1:40

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .