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][1] - 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.:

    <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:

    <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.


  [1]: http://oli.jp/2011/ids/#table1