Как браузер обрабатывает теги script и style

Что проверяют

Различаете ли вы блокировку парсинга и блокировку отрисовки и знаете ли точное поведение async, defer и модулей. Следом обычно спрашивают, куда ставить скрипты и почему CSS может задержать выполнение JavaScript.

Как отвечать

Браузер строит DOM из HTML и CSSOM из стилей, отрисовка начинается, когда готовы оба.

• <style> и <link rel="stylesheet">: блокируют отрисовку, но не парсинг. Разбор HTML идёт дальше, а первый кадр не появится, пока не готов CSSOM. Стиль с неподходящим media, например print, грузится с низким приоритетом и отрисовку не держит;
• обычный <script>: блокирует парсер. Браузер останавливает разбор, скачивает внешний файл, выполняет его и только потом продолжает, ведь скрипт может менять DOM по ходу разбора;
• CSS держит скрипты: классический скрипт после таблицы стилей не выполнится, пока она не загрузится, потому что он может читать вычисленные стили;
• defer: загрузка параллельно с парсингом, выполнение после разбора документа, строго по порядку и до DOMContentLoaded;
• async: загрузка параллельно, выполнение сразу по готовности, порядок не гарантирован, на время выполнения парсер прерывается;
• type="module": по умолчанию ведёт себя как defer, с async выполняется по готовности.

Нюансы, которые добавляют очков: defer и async не действуют на встроенные классические скрипты без src; скрипт, вставленный через createElement, по умолчанию асинхронный; preload scanner заранее находит ресурсы дальше по документу, и скачивание начинается раньше, чем до них дойдёт парсер.

Где спотыкаются

Говорят, что CSS блокирует построение DOM. Он блокирует отрисовку и выполнение последующих скриптов, а парсер работает дальше.

Считают async и defer взаимозаменяемыми. Для библиотеки и зависящего от неё кода async может выполнить их в обратном порядке.

Ставят defer на инлайн-скрипт и ждут выполнения после парсинга. Атрибут молча игнорируется, скрипт выполнится сразу.