Приводит ли @import в CSS к дополнительным http-запросам?

Question

У меня есть сайт электронной коммерции, на котором около 8 CSS-файлов связаны с заголовком, что приводит к 8 отдельным http-запросам к серверу. Я объединил все CSS-файлы в один большой, получив в результате файл размером 67 КБ (!), Чтобы сократить количество запросов http до 1 для наших CSS-файлов.

Я считаю этот размер CSS-файлом немного неуправляемым в свете того факта, что я постоянно выполняю обновления на сайте. Меня беспокоит то, что мои пользователи могут поймать меня в процессе обновления и увидеть страницу без стилизации при переходе от страницы к странице - b / c 67 КБ по-прежнему требуется 2-3 секунды, прежде чем он будет успешно размещен на удаленном сервере через FTP .

Мой вопрос: использование @import в этом большом CSS-файле для разбиения файлов на более мелкие и более управляемые размеры (в этом CSS-файле) возвращает нас к исходным 8 http-запросам при загрузке страниц? Или @imports в CSS как-то иначе обрабатываются?

Answer 1

Да, вы вернетесь к запросу для каждой таблицы стилей при использовании @import.

Лучше всего минимизировать и объединить CSS в один файл для развертывания. Но вы все равно можете разрабатывать с отдельными файлами.

Answer 2

Вы можете предотвратить дополнительные запросы http, комбинируя таблицы стилей с .htaccess. Техника объясняется в HTML5 Boilerplate .htaccess. Это работает так:

В .htaccess:

<FilesMatch "\.combined\.(js|css)$">
    Options +Includes
    SetOutputFilter INCLUDES
</FilesMatch>

В style.combined.css:

<!--#include file="reset.css"-->
<!--#include file="style.css"-->

Вы можете использовать это, чтобы объединить .js (или любое другое расширение, указанное в скобках).

Документация для опций + включает в себя здесь .

Answer 3

Браузер должен каким-то образом получать данные, так как он может не использовать другой http-запрос? ; -)

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

Вы можете попытаться прослушать соединение между клиентом и сервером и посмотреть, что он запрашивает.

Answer 4

Импорт CSS не обрабатывается иначе, чем любое другое «включение» на странице, такое как ссылка на внешний скрипт JavaScript. Тем не менее, кеширование в браузере не должно вызывать проблем, за исключением первого доступа к вашему сайту.

Answer 5

Да, для каждого оператора @import выдается отдельный запрос.

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

Answer 6

Если у вас есть CSS-файл размером 67 Кб, есть что-то странное. Помните, что C в CSS предназначен для CASCADING, и это означает, что вам не нужно определять в каждом классе все свойства каждого из тегов, участвующих в классе.

Например, если вы определяете

как контейнер, вы можете определить класс для него

#maincontainer {font-face:Arial,helvetica,sans;}

Это означает, что если вы создадите его подкласс для тега

, как

#maincontainer P {color:darkgray;}

Все теги

внутри главного контейнера DIV будут использовать шрифт arial, helvetica, sanz.

Также попробуйте создать файлы CSS для того, как они используются на страницах. Уникальный CSS-файл для всего сайта позволяет загружать множество классов, которые не будут использоваться на некоторых страницах. Разделяй и властвуй.