-
Не используйте @import
Стив Саудерс (Steve Souders) — инженер из Yahoo! — написал прекрасную заметку о том, почему не стоит использовать @import для подключения CSS. Если коротко: @import в большинстве случаев блокирует параллельную загрузку CSS-файлов. А так как сама загрузка CSS блокирует отрисовку документа — пользователь будет долго видеть пустой экран.
9 комментариев
Раньше его “любил” использовать, но уже давно не использую, и, как видно, не зря
По-хорошему, при выкладке на продакшен все импорты должны заменяться на их содержимое.
Угу. У меня все руки не доходят в техногрете написать вторую часть про использование Ant и поделиться своим решением для объединения CSS-файлов.
Статья плохая. Судя по приведенным автором примерам проблема не в импорте, а:
1) в том, что браузер не собирается грузить более двух внешних файлов одновременно
2) пример с шестью импортами одновременно - приведен, а для шести линков нет - почему?
Вывод: тема не раскрыта, исследование некорректно.
Как раз @import стал причиной того, что браузер не грузит 2 файла параллельно. И даже названа причина: сначала браузер грузит весь файл, потом парсит его и находит импорт.
Чтобы показать …using @import in IE causes resources to be downloaded in a different order than specified когда example has six stylesheets followed by a script. Очевидно, что для линков таких проблем нет.
Вывод?
Ну так смотрим приведенный пример под заголовком many @imports (фигура 6): грузится яваскрипт (который последний), и ОДНОВРЕМЕННО с ним первый файл из импорта. Потом, как только яваскрипт загрузился и освободился поток - грузится след. импорт и т. д.
Подозреваю, что с линками будет тоже самое - будут цсски грузиться по 2 файла, только яваскрипт последним будет.
Ну и потом, все же это примеры притянутые - показано, не что импорт использовать не нужно, а не нужно его использовать “криво”.
П. С. А может просто переводы в наших головах разные?
а ещё не используйте * для больших корневых элементов
Так в этом вся и проблема. Особенно если этот скрипт начнет обращаться к элементам дерева документа и брать, например, их размеры.
В jQuery 1.3, например, в несколько раз увеличили точность срабатывания события onDOMLoad. И сделали они это именно за счет того, что перестали проверять, доступны ли все CSS-файлы на странице. Побочный эффект — все CSS-файлы должны быть объявлены до того, как будет объявлен первый скрипт (и это правильно, иначе могут быть проблемы у Safari). Если же подключать CSS с помощью импортов, то, полагаю, будут проблемы в IE.
А какой способ не является «кривым»: тот, который ломает параллельную загрузку или тот, из-за которого файлы грузятся в неправильном порядке?
Вот я люблю подключать 1 файл стилей через линк, а в него импортами включать несколько дополнительных через импорт, это тоже медленно будет работать?