Quelle méthode organisation CSS est le plus rapide?

Question

Si j'ai le code HTML suivant:

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

comment dois-je organiser le CSS pour obtenir le meilleur temps de chargement de la page?

Je pourrais organiser par élément HTML, comme ceci:

#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 par style CSS, comme ceci:

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

Ce qui, si non plus, serait lu et traité plus rapidement?

EDIT: Je l'ai dit, je travaille avec Greasemonkey en ce moment, ce qui signifie deux choses potentiellement importantes:

1) Je ne peux pas modifier les balises HTML, CSS seulement

2) Tous mes CSS est lu après la page se termine normalement le chargement.

Answer 1

Eh bien, 2ème serait certainement Lire plus vite car il est plus petit.

En ce qui concerne « traité » va, par quel navigateur? À moins que la feuille de style en question traite des dizaines de milliers de ids je doute que vous verriez une différence significative entre les deux.

Answer 2

Je ne vois pas comment le traitement des CSS serait un goulot d'étranglement dans le temps de chargement de la page. Si vous souhaitez que la page de charger plus rapidement, de réduire la taille du HTML / CSS et collez le CSS dans une balise de style dans la balise head du HTML. Cela évitera une demande supplémentaire GET, que je devine est la source réelle du temps de charge lente.

Answer 3

Pourquoi ne pas:

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

Et puis:

<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

Vous devriez probablement profiler cela dans les différents navigateurs car ils sont susceptibles de vous donner des résultats différents.