¿Qué método de organización CSS es más rápido?

Question

Si tengo el siguiente código 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>

¿cómo debo organizar el CSS para lograr el mejor tiempo de carga de página?

Yo podría organizarlo por elemento HTML, como esto:

#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 por el estilo CSS, así:

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

Lo cual, si bien, se puede leer y procesar más rápido?

EDIT: debería haber mencionado, estoy trabajando con Greasemonkey en este momento, lo que significa dos cosas potencialmente importantes:

1) No puedo editar todo el código HTML, CSS solamente

2) Todos los de mi CSS se lee después de la página termina de cargar normalmente.

Answer 1

Bueno, segundo sería sin duda leer más rápido, ya que es más pequeño.

En cuanto a "procesar" va, por lo que el navegador? A menos que la hoja de estilo en cuestión se ocupa de decenas de miles de identificadores dudo que ve ninguna diferencia significativa entre los dos.

Answer 2

No veo cómo el procesamiento CSS sería un cuello de botella en el tiempo de carga de página. Si desea que la página se cargue más rápido, reducir el tamaño del código HTML / CSS y pegar el CSS en una etiqueta en la etiqueta style head del HTML. Esto evitará una solicitud GET extra, lo que supongo es la fuente real del tiempo de carga lenta.

Answer 3

¿Por qué no:

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

Y luego:

<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

Usted debe probablemente Profile en diferentes navegadores, ya que es probable que le dará resultados diferentes.