Quale metodo di organizzazione CSS è più veloce?

Question

Se ho il seguente codice 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>

come dovrei organizzare la CSS per ottenere il miglior tempo di caricamento della pagina?

ho potuto organizzarla da elemento HTML, in questo modo:

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

o di stile CSS, in questo modo:

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

Il che, se uno dei due, sarebbe stato letto ed elaborato più velocemente?

Modifica Avrei detto, sto lavorando con GreaseMonkey in questo momento, il che significa due cose potenzialmente importanti:

1) Non riesco a modificare ogni HTML, CSS solo

2) Tutto il mio CSS viene letto dopo che la pagina finisce di caricare normalmente.

Answer 1

Bene, secondo sarebbe certamente lettura più veloce dal momento che è più piccolo.

Per quanto riguarda la "elaborazione" va, dal quale browser? A meno che il foglio di stile in questione si occupa di decine di migliaia di ids dubito che ci si vede alcuna differenza significativa tra i due.

Answer 2

Non vedo come l'elaborazione CSS sarebbe un collo di bottiglia nel tempo di caricamento della pagina. Se si desidera che la pagina per caricare più velocemente, ridurre le dimensioni del codice HTML / CSS e incollare il CSS in un tag style nel tag head del HTML. Ciò eviterà una richiesta GET extra, che sto cercando di indovinare è la fonte reale del tempo di caricamento lento.

Answer 3

Perché non:

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

E poi:

<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

Si dovrebbe probabilmente il profilo di questo in diversi browser, che sono suscettibili di dare risultati diversi.