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.