Происходит ли остановка парсинга и рендеринга при встрече внешнего ресурса
Что проверяют
Различаете ли вы блокировку разбора документа и блокировку отрисовки. Ответ «да, блокирует» без деталей не говорит ничего, а от деталей зависит, умеете ли вы чинить медленный первый экран.
Как отвечать
Разложите по типам ресурсов.
- Скрипт без атрибутов блокирует парсер: разбор встаёт на время загрузки и выполнения. Встроенный в страницу скрипт блокирует всегда.
defer: файл качается параллельно, выполняется после разбора документа, порядок между такими скриптами сохраняется.async: качается параллельно и выполняется сразу по готовности, прерывая парсер в произвольный момент. Порядок не гарантирован, поэтому годится для независимых вещей вроде счётчиков.type="module"ведёт себя какdeferпо умолчанию.- Стили парсер не останавливают, но блокируют отрисовку: без CSSOM нет дерева рендеринга, и браузер не показывает недостроенную страницу, чтобы не мигать нестилизованным текстом. Косвенно они тормозят и разбор, потому что скрипт после тега стилей ждёт их загрузки: он вправе спросить вычисленные стили.
- Картинки не блокируют ни то, ни другое. Шрифты задерживают показ текста, что лечится свойством
font-display.
Добавьте, что во время блокировки браузер не простаивает: упреждающий сканер разметки заранее находит ссылки на ресурсы и ставит их в очередь загрузки. И назовите лечение: defer вместо скрипта в конце тела страницы, критичный CSS внутри документа, остальной отложенно, атрибут media на второстепенных стилях.
Где спотыкаются
Говорят, что таблица стилей останавливает разбор HTML. Она останавливает отрисовку, разбор идёт дальше, и из-за этой путаницы непонятно, почему вообще помогает деление стилей на критичные и остальные.
Считают async улучшенным defer и вешают его на скрипты, зависящие друг от друга или от готового DOM. Получают плавающие ошибки, которые воспроизводятся только на медленной сети.
Верят, что пока парсер стоит, ничего не грузится, и вручную раскладывают теги «в правильном порядке». Сканер это уже сделал, а вот вызов document.write его действительно ломает.