Задать вопрос
golovim
@golovim
Software Developer

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

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

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

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

Заранее благодарю за любую информацию!
  • Вопрос задан
  • 759 просмотров
Подписаться 2 Оценить Комментировать
Решение пользователя Евгений Петров К ответам на вопрос (4)
Petroveg
@Petroveg
Миром правят маленькие с#@&ки
Вся необходимая информация уже есть в спецификации. Называется Origin and Importance. Анализируются все 10 возможных источников, и то, где написано то или иное правило, в link или style, влияет на порядок этого правила, но не на скорость анализа. Это означает, что сам факт нахождения правила в разных источниках не влияет на performance, если принять, что эти источники одинаково доступны.

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

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