Qual método da organização CSS é mais rápido?

Question

Se eu tiver o seguinte HTML:

<p id="p1">Paragraph 1</p>
<p id="p2">Paragraph 2</p>
<p id="p3">Paragraph 3</p>
<p id="p4">Paragraph 4</p>

Como devo organizar o CSS para alcançar o tempo de carregamento da página mais rápido?

Eu poderia organizá -lo por elemento HTML, assim:

#p1 { font-size:12px; color:red; }
#p2 { font-size:12px; color:blue; }
#p3 { font-size:11px; color:red; }
#p4 { font-size=11px; color:blue; }

ou pelo estilo CSS, como este:

#p1, #p2 { font-size: 12px; }
#p3, #p4 { font-size: 11px; }
#p1, #p3 { color:red; }
#p2, #p4 { color:blue; }

Qual, se qualquer um seria lido e processado mais rápido?

EDITAR: Eu deveria ter mencionado, estou trabalhando com Greasemonkey agora, o que significa duas coisas potencialmente importantes:

1) Não consigo editar nenhum html, apenas CSS

2) Todo o meu CSS é lido após o término da página normalmente.

Answer 1

Bem, o segundo certamente seria ler mais rápido, pois é menor.

No que diz respeito a "processado", pelo que navegador? A menos que a folha de estilo em questão lide com dezenas de milhares de IDs, duvido que você veja alguma diferença significativa entre os dois.

Answer 2

Não vejo como o processamento CSS seria um gargalo no tempo de carregamento da página. Se você deseja que a página seja carregada mais rapidamente, reduza o tamanho do HTML/CSS e cole o CSS em um style tag no head Tag do HTML. Isso evitará uma solicitação extra GET, que acho que é a fonte real do tempo de carregamento lento.

Answer 3

Por que não:

.red {color: red}
.blue {color: blue}
.small {font-size: 11}
.big {font-size: 12}

E depois:

<p id="p1" class="big red">Paragraph 1</p>
<p id="p2" class="big blue">Paragraph 2</p>
<p id="p3" class="small red">Paragraph 3</p>
<p id="p4" class="small blue">Paragraph 4</p>

Answer 4

Você provavelmente deve enviar um perfil disso em diferentes navegadores, pois eles provavelmente fornecerão resultados diferentes.