Тег style vs. link. Что быстрее?

Question

[Sergey Golovin]

Существуют ли какие-нибудь бэнчмарки, сравнивающие скорость рендернига страницы, на которой все стили находятся в тегах style в противовес подключения по ссылке? В каком случае lookup стиля класса проходит быстрее? Почему-то нигде нет сравнения данных способов подключения стилей с точки зрения performance.

Сравнение типа "link лучше, так как кешируется" или "link лучше, так как можно писать css в отдельном файле и это проще поддерживать" не интересуют. Меня интересуют именно преимущества и недостатки style и link с точки зрения performance.

Очень хотелось бы узнать, что лучше использовать, если необходима бОльшая скорость рендеринга при большом количестве css-кода. Стоит ли использовать style вместо link?

Заранее благодарю за любую информацию!

Answer 1

[Евгений Петров]

Вся необходимая информация уже есть в спецификации. Называется Origin and Importance. Анализируются все 10 возможных источников, и то, где написано то или иное правило, в link или style, влияет на порядок этого правила, но не на скорость анализа. Это означает, что сам факт нахождения правила в разных источниках не влияет на performance, если принять, что эти источники одинаково доступны.

А вот что касается кэширования, то вы совершенно напрасно отметаете этот аспект, потому что на скорость построения CSSOM напрямую влияет доступность источников и то, что большинство браузеров строят CSSOM по мере их доступности. Безусловно, нахождение правил непосредственно в документе может ускорить этот процесс. Именно по этой причине те же рекомендации Google содержат совет включать наиболее важные правила в элемент style (раздел «Inline render-blocking CSS»).

Однако, не стоит забывать про дальнейшую жизнь проекта и его модификацию. И тут style проиграет link по всем параметрам, да и в разработке необдуманное использование style способно превратить жизнь в ад. Отвечая на ваш вопрос — да, включение правил в документ увеличит performance, но только при первой загрузке документа. Остальные документы этого проекта не заметят разницы, ведь внешний файл будет браться из кэша, зато трафик будет существенно расти.

Comments

[Sergey Golovin]

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

P.S.

Спасибо за развернутый ответ!

Answer 2

[Назар Мокринский]

Кто вам сказал что вообще есть какая-то разница?
Это аналогично вопросу, какой JS выполняется быстрее - в теле страницы, или подключаемый.
Вопрос не имеет смысла, потому и сравнений нет.

Comments

[Владимир Голубев]

Разница есть, вы не правы. Любое обращение к внешнему файлу немного замедляет загрузку, это становится заметно если подключается несколько десятков скриптов и стилей, то же самое актуально для картинок. Именно поэтому рекомендуют использовать спрайтмапы для мелких картинок типа кнопок, ярлыков, меток и прочего, поэтому же рекомендуют все скрипты и стили перед выкладыванием на прод ужимать и компилировать в один файл(один для скриптов + один для стилей). Это особенно актуально, если на ваш сайт заходит не 10 человек в сутки, а 10 тысяч - даже если они не заметят особой разницы, у вас расходы трафика будет отличаться существенно. Но подключение внешним файлом всё же выгоднее чем встраивание в тэг, даже если на лету - потому что 10 страниц обращающиеся к одному файлу скрипта\стиля, реально загрузят его один раз и сохранят в кэше браузера.

[Назар Мокринский]

Владимир Голубев: Прочитайте вопрос ещё раз - всё что вы написали автора вопроса не интересует.

Answer 3

[Сергей ZSA]

А давайте ещё и style="" ещё использовать для пущей скорости. Вы сами подумайте, что хотите сделать - огроменный файл с кодом html+css и уж 100% там будет js, а если ещё и какую-то библиотеку подключите типа jQuery тоже не через файл, а напрямую - ваш текстовый редактор может либо скопытиться, либо очень очень долго думать и тяжело отображать то, что в файле при его скролле. Более того я не завидую вам потом, потому что поддерживать такой код будет огромной головной болью (если вы его будете поддерживать, если кто-то другой - он будет готов вас сварить себе на обед).

Comments

[Александр Таратин]

Вах... всегда можно склеить перед продакшеном. А тем более сейчас есть куча инструментов для этого пита gulp. Даже видел плагин для подобной цели, но сейчас лень гуглить.

[Сергей ZSA]

Александр Таратин: а потом как расклеить новичку это всё, если он будет поддерживать проект? Я лично не понимаю, зачем это делать, если можно просто написать link. В один css файл всё сгрузить - уже будет достаточно. Разница в скорости загрузки минимальна, если файл стилей не на 1мб, а такое уж очень большая редкость.

[Sergey Golovin]

Сергей ZSA: а где я говорил, что все будет в одном файле? Все как раз будет максимально разнесено по независимым модулям. Каждый модуль - это независимый компонент, содержащий разметку, UI-код и стили (reagent + garden на clojurescript). Все приложение - SPA.

[Владимир Голубев]

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

[Sergey Golovin]

Владимир Голубев: спасибо! Скрипт, естественно, в конце тэга body

Answer 4

[yii_lover]

У меня разнесено все по полкам. На три грубо говоря. head-index\page-foot. В head делаю инлайн css и работает все гуд. А если что изменить так смотришь сначала в хроме какое свойство за что отвечает . А потом поиском его находишь и все.
Скорость увеличилилась на немного. По тому же google page speed даже процента не вылетело. Скорость увеличивается на 50 - 100 миллисекунд (в зависимости от количества стилей).

Лучше всего все основное вынести в инлайн. А остальные добавлять js при загрузке страницы.