Что может заблокировать путь парсинга HTML в браузере

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

Различаете ли вы блокировку парсинга и блокировку отрисовки. Это ядро разговора про критический путь и метрики загрузки: от того, что именно останавливается, зависит, куда двигать скрипт и стиль.

Как отвечать

Парсер строит DOM по мере прихода байтов и останавливается на нескольких вещах:

• обычный <script src> без атрибутов: парсер ждёт загрузки и выполнения, потому что скрипт может дописать документ через document.write;
• встроенный <script>: качать нечего, но выполнение всё равно останавливает разбор;
• скрипт, перед которым в документе есть ещё не загруженный стиль. Браузер обязан применить стили до выполнения, иначе getComputedStyle вернёт неверное значение, поэтому стиль тормозит скрипт, а скрипт тормозит парсер;
• синхронные сетевые вызовы внутри выполняющегося скрипта.

Отсюда рецепты. defer откладывает выполнение до конца разбора и сохраняет порядок скриптов, async выполняет сразу после загрузки без гарантии порядка, модули ведут себя как defer по умолчанию.

Отдельно проговорите, что сам по себе CSS парсинг не блокирует, он блокирует отрисовку, а картинки и шрифты не блокируют ни то, ни другое. Стоит упомянуть предварительный сканер: он находит ссылки на ресурсы дальше по документу, даже пока парсер стоит, поэтому ресурсы, которые добавляет скрипт, он не видит.

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

Говорят, что стили блокируют парсинг HTML. Разбор разметки идёт дальше, останавливается отрисовка, а через скрипты появляется косвенная задержка. Разница видна на водопаде загрузки и меняет решение: критический стиль встраивают, остальное грузят отдельно.

Считают async и defer взаимозаменяемыми. Скрипт с async может выполниться раньше, чем разобрана нужная ему часть документа, и не найти элемент, а два таких скрипта выполнятся в порядке загрузки, а не в порядке объявления. Библиотека и зависящий от неё код так ломаются регулярно.

Приравнивают перенос скриптов в конец body к defer. Парсер всё равно встанет на теге, просто позже, и на тот же срок позже начнётся загрузка файла. Ещё в список блокирующих почти всегда попадают картинки, хотя разбор разметки они не останавливают.