Внутренний против внешнего CSS

Question

В чем плюсы и минусы внутреннего и внешнего CSS, скорости, запросов, кэширования и т. Д.? Лично я не уверен, что внутренний css на динамических страницах будет кэшироваться ..?

Answer 1

Плюсы для внутреннего CSS : - более быстрая загрузка: помните, что для каждой внешней таблицы стилей у вас будет один дополнительный HTTP-запрос

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

Одна вещь против внутреннего CSS заключается в том, что он может увеличить размер загрузки HTML.

Лучший подход : - используйте сочетание внутренних + внешних стилей в зависимости от того, какие стили используются на страницах различий - убедитесь, что вы установили параметры истечения срока действия для внешних стилей и кэшировали их.

Преимущество объединения с настройками срока действия кэша : «Внешний вид» веб-приложений регулируется следующим:

• Вы обычно хотите поддерживать одинаковое чувство на всех страницах
• содержание чаще меняется, чем стиль

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

Answer 2

Если страница кэшируется, внутренний CSS для этой страницы также кэшируется (так как он является частью страницы). Но преимущество внешних таблиц стилей заключается в том, что они могут использоваться для многих страниц и запрашиваются только один раз при кэшировании.

Поэтому сначала у вас есть дополнительный запрос (внешняя таблица стилей), а затем меньше данных для передачи при последующих запросах.

Answer 3

Использование внешнего CSS гарантирует, что внешний вид всех ваших страниц будет единообразным, по крайней мере, если вы используете 1 файл CSS для всего сайта. Может быть снижение скорости для первой страницы, но с этого момента файл CSS кэшируется, и в результате последующие страницы будут загружаться быстрее.

Я иногда использую внутренний CSS, где он очень специфичен для страницы, и не используется в других местах. Никогда не помещайте их в линию, хотя; встроенный CSS очень сложно поддерживать.

Answer 4

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