Самый быстрый способ загрузить CSS - встроенный против HEAD - PullRequest
Новая
       7

Самый быстрый способ загрузить CSS - встроенный против HEAD

2 голосов
/ 18 ноября 2009

У меня есть div 50x50px, который я хочу отобразить на своей домашней странице как можно быстрее.

Это быстрее для меня, чтобы сделать 

<div style="height:50px;width:50px">

Или назначить ему класс, чтобы избежать встроенного стиля: 

<div class="myDiv">

И поместить класс myDiv в файл CSS в разделе HEAD HTML-страницы?

Я думал, что первый должен быть быстрее, так как ему не нужно запрашивать и получать CSS? Я думаю, ultimatley я спрашиваю, будут ли BODY и HEAD визуализироваться последовательно или параллельно.

Ответы [ 5 ]

3 голосов
/ 18 ноября 2009

Без загрузки головы не может быть тела.

Прежде чем ваш BODY будет обработан, его сначала нужно загрузить. И если он загружен, то HEAD уже загружен.

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

Еще одна важная вещь: чем больше файлов состоит из документа, тем больше шансов, что запрос на один из них будет потерян. Таким образом, используя встроенный CSS, вы убедитесь, что CSS никогда не потеряется.

Но я должен отметить, что встроенный CSS считается плохим стилем. Когда у вас будет достаточно разметки, вам будет все сложнее обновлять все страницы сразу. Вы неизбежно потеряете тот или иной экземпляр. Намного лучше объявить все стили в отдельном документе и ссылаться на них со страниц. Таким образом, когда вам нужно изменить какой-либо цвет, вы делаете это в одном месте, а не в 37 местах, которые можно найти на ваших страницах.

2 голосов
/ 31 января 2012

Бывают случаи, когда это будет «хорошей» практикой. Например, у вас есть целевая страница с высоким значением, для поддержки которой требуется около 500 байт CSS, стих 200K.

Несмотря на то, что клиенту необходимо загрузить этот файл на СЛЕДУЮЩУЮ страницу, время для рендеринга часто является наиболее важным на целевой странице.

Кроме того, AFAIK, браузеры не начнут рендериться, пока не будет загружен весь файл CSS, что не относится к встроенным стилям. Но да, лучшие практики, и в 98% случаев вы хотите поместить CSS в один связанный файл.

2 голосов
/ 18 ноября 2009

Как уже отмечали другие, правильное , что нужно сделать, это поместить стили во внешний файл и сослаться на него в <head> части вашего документа.

Но если вы собираетесь набрать fast (и это то, о чем вы просили), тогда вам следует использовать встроенное объявление, например 

<div style="height:50px;width:50px">

Для этого есть несколько причин:

  • Вам не нужно загружать внешний файл. Это очень медленно (по сравнению со следующей причиной), так как существует дополнительный HTTP-запрос, который (поверх запроса и самой загрузки) может быть задержан другими внешними файлами, такими как JavaScript, значки избранного и т. Д.
    Таким образом, он будет загружаться быстрее, если вы поместите объявление в некоторые теги <style> в том же документе. Но тогда есть следующая причина.
  • Браузеру не нужно просматривать дерево DOM и искать узлы с классом myDiv, к которому применяются стили. Он находит <div> и немедленно (или на следующем ходу рендеринга) применяет информацию о стиле.
    Эта вторая задержка вряд ли будет заметна, но если вы стремитесь к высокой производительности, это путь.

Я согласен, что это может быть несколько теоретическими причинами, но вот, пожалуйста. : -)

1 голос
/ 18 ноября 2009

Использовать встроенный файл CSS. После первого запроса файл будет кэширован браузером, и его больше не нужно будет загружать. Ускорение загрузки страницы и снижение нагрузки на сервер.

Размещение встроенных стилей не только уродливо, но и подрывает всю каскадность.

0 голосов
/ 18 ноября 2009

Различия в производительности будут незаметны и не будут иметь значения. Вместо того, чтобы беспокоиться о преждевременной оптимизации, подобной этой, больше заботьтесь о том, чтобы делать «правильные вещи» - и в этом случае правильнее всего использовать внешние таблицы стилей для вашего CSS, так как он более удобен в обслуживании и разделяет проблемы.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...