Когда и как браузеры отображают тег <style> в <body>?

Я заметил, что если я ставлю <style> внутри <body> CSS будет применяться ко всем элементам после и до <style> тег.

Поэтому мне кажется, что css обрабатывается при загрузке страницы, поведение аналогично событию готовности документа javascript. Я прав? И если это так, то в каком порядке будет несколько <style> теги будут обработаны?

Источник

3 ответа

Решение

TL;DR:

Короче говоря, ответ на ваш вопрос: один раз <style> тег встречается внутри <body> все останавливается, и CSSOM перестраивается и повторно применяется ко всему существующему визуализированному (нарисованному) контенту.

размещение <style> теги внутри <body> считается плохой практикой, потому что это может создать FOUC. Но если ваш <style> тег содержит только правила для элементов, помещенных после него в DOM, размещение его в теле совершенно нормально, так как FOUC не может произойти.

Процесс рендеринга страницы довольно сложный. Но, чрезмерно упрощенно, вот что происходит

  1. <head> читается и CSSOM построен. Все CSS являются блокировкой рендера, если явно не указано иное при использовании @media запросы. Неблокирующий CSS все еще загружен, он не полностью пропущен.
  2. Создание DOM и CSSOM ведется в параллельном режиме, но все <script> выполнение откладывается до тех пор, пока не будет построен CSSOM </head> тег встретился), в этот момент все загружено <script>s запускаются, блокируя построение DOM. На этом этапе JS может вносить изменения в CSSOM. *
  3. размещение <style> теги внутри <body> прерывает все (выполнение JS и построение DOM), CSSOM обновляется и применяется к уже отрендеренному контенту, если таковой имеется. Все возобновляется после.

* При дальнейшем тестировании оказывается <head> Разбор однопоточный. Сборка CSSOM блокирует выполнение JavaScript, но это делается поэтапно, так как каждый <link /> а также <style> метки встречаются (а <script> после <link> будет выполняться только после <link /> был решен и применен к CSSOM). <script> теги, размещенные между ресурсами CSS, не откладываются до тех пор, пока все ресурсы CSS в <head> разбираются, как я изначально думал.
И, конечно же, js может вносить изменения в CSSOM во время выполнения. Посмотрите этот вопрос, который я просил больше о том, как js выполнение заблокировано сборкой CSSOM.

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

Если вас интересует более подробная информация, я рекомендую ознакомиться с главой " Эффективность работы" веб-основ, предоставляемой Google.

Источник

Область применения CSS

style Элемент применяется ко всему документу независимо от его положения. Применяется сразу после загрузки.

Причина размещения тегов стиля в <body>

Поскольку каждый браузер имеет ограниченное количество потоков для загрузки файлов страницы (таких как JS, CSS, изображения и асинхронно загруженный HTML, JSON или XML), люди склонны включать файлы CSS в конце body элемент вместо классического подхода включения их в head элемент. Таким образом, остальная часть страницы может быть загружена и обработана, а стиль применяется последним. Вы бы пошли по этому пути, если ваш CSS предназначен исключительно для внешнего вида (то есть без обязательного скрытия элементов), чтобы улучшить взаимодействие с пользователем.

CSS-файлы против правил стиля в HTML

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

Источник

Поэтому мне кажется, что css обрабатывается при загрузке страницы, поведение аналогично событию готовности документа javascript. Я прав?

Нет. Таблица стилей модифицируется новым кодом CSS, когда этот код добавляется в DOM. Там нет никакой задержки, пока остальная часть DOM не закончит загрузку. Если бы там было, вы бы увидели FOUC.

какой порядок будет кратным <style> теги будут обработаны?

Порядок, в котором они появляются. Затем применяются обычные правила каскада.

Источник
Другие вопросы по тегам