Какой метод организации CSS самый быстрый?

Question

Если у меня есть следующий 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>

как мне организовать CSS, чтобы добиться максимально быстрого времени загрузки страницы?

Я мог бы организовать его по элементам HTML, например:

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

или по стилю CSS, например:

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

Что, если да, то будет читаться и обрабатываться быстрее?

РЕДАКТИРОВАТЬ: Я должен был упомянуть, что сейчас я работаю с GreaseMonkey, а это означает две потенциально важные вещи:

1) Я не могу редактировать HTML, только CSS.

2) Весь мой CSS считывается после нормальной загрузки страницы.

Answer 1

Ну, 2-й, конечно, будет читать быстрее, так как он меньше.

Что касается «обработано», каким браузером?Если рассматриваемая таблица стилей не имеет дело с десятками тысяч идентификаторов, я сомневаюсь, что вы увидите какую-либо существенную разницу между ними.

Answer 2

Я не понимаю, как обработка CSS может стать узким местом во времени загрузки страницы.Если вы хотите, чтобы страница загружалась быстрее, уменьшите размер HTML/CSS и вставьте CSS в файл. style тег в head тег HTML.Это позволит избежать дополнительного запроса GET, который, как я предполагаю, является фактическим источником медленной загрузки.

Answer 3

Почему нет:

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

А потом:

<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

Вероятно, вам следует профилировать это в разных браузерах, поскольку они могут дать вам разные результаты.