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 [aqui][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? ou saberia me dizer, baseado em fundamentos, qual das duas formas é mais rápida?**


----------


OBS.: A dúvida pode parecer meio boba mas ela é especificamente voltada 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 é em saber sobre a performance dos seletores em CSS.


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