Какой метод организации CSS самый быстрый?
-
21-09-2019 - |
Вопрос
Если у меня есть следующий 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 считывается после нормальной загрузки страницы.
Решение
Ну, 2-й, конечно, будет читать быстрее, так как он меньше.
Что касается «обработано», каким браузером?Если рассматриваемая таблица стилей не имеет дело с десятками тысяч идентификаторов, я сомневаюсь, что вы увидите какую-либо существенную разницу между ними.
Другие советы
Я не понимаю, как обработка CSS может стать узким местом во времени загрузки страницы.Если вы хотите, чтобы страница загружалась быстрее, уменьшите размер HTML/CSS и вставьте CSS в файл. style
тег в head
тег HTML.Это позволит избежать дополнительного запроса GET, который, как я предполагаю, является фактическим источником медленной загрузки.
Почему нет:
.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>
Вероятно, вам следует профилировать это в разных браузерах, поскольку они могут дать вам разные результаты.