Die CSS-Organisation-Methode ist die Schnellste?

Question

Wenn ich den folgenden HTML-Code:

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

wie soll ich das organisieren der CSS-um die Schnellste Ladezeit der Seite?

Ich konnte es organisieren, indem Sie HTML-element, wie dieses:

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

oder durch den CSS-Stil, wie diese:

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

Welche würde gelesen und verarbeitet werden schneller?

EDIT: Sollte ich erwähnt habe, arbeite ich mit GreaseMonkey jetzt, was bedeutet, dass zwei potenziell wichtige Dinge:

1) ich kann nicht editieren von HTML -, nur CSS

2) Alle meine CSS gelesen wird, nachdem die Seite fertig geladen ist normal.

Answer 1

Gut, der 2. wäre sicherlich Lesen schneller, weil Sie kleiner ist.

So weit wie "verarbeitet" geht, durch welchen browser verwenden Sie?Es sei denn, der style sheet in Frage befasst sich mit Zehntausenden von ids-ich bezweifle, dass Sie würde sehen, kein signifikanter Unterschied zwischen den beiden.

Answer 2

Ich sehe nicht, wie CSS-Verarbeitung zu einem Engpass in Ladezeit sein würde. Wenn Sie die Seite wollen schneller geladen werden, reduziert die Größe des HTML / CSS und CSS in einen style-Tag in dem head-Tag der HTML einfügen. Dadurch wird eine zusätzliche GET-Anforderung vermeiden, die ich vermute, bin die eigentliche Quelle der langsamen Ladezeit ist.

Answer 3

Warum nicht:

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

Und dann:

<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

Sie sollten wahrscheinlich dieses Profil in verschiedenen Browsern wie sie wahrscheinlich unterschiedliche Ergebnisse geben.