Вопрос проверяет понимание того, как JavaScript влияет на парсинг HTML, построение DOM и скорость первой отрисовки страницы.
Скрипты могут блокировать рендеринг, потому что браузер должен остановить парсинг HTML, загрузить и выполнить JavaScript. Это нужно, так как скрипт может изменить DOM или CSS. Пока синхронный скрипт не выполнен, браузер не продолжает строить DOM и не может корректно рендерить страницу. Атрибуты defer и async позволяют уменьшить или убрать эту блокировку.
JavaScript напрямую участвует в формировании страницы, поэтому браузер относится к нему как к потенциально опасному для рендера ресурсу.
Определение: Render-blocking script — это скрипт, который останавливает парсинг HTML и задерживает отрисовку страницы до момента своей загрузки и выполнения.
Браузер не знает заранее, что сделает скрипт:
может изменить DOM (document.write, appendChild)
может читать стили и размеры элементов
может добавить новые стили или скрипты
Из-за этого браузер обязан выполнить скрипт строго в том месте, где он встречается.
<script>Парсинг HTML останавливается.
Скрипт загружается (если внешний).
Скрипт выполняется.
Парсинг HTML продолжается.
defer и async меняют ситуациюdefer
HTML парсится без остановки.
Скрипт выполняется после построения DOM.
Порядок выполнения сохраняется.
async
HTML парсится без остановки.
Скрипт выполняется сразу после загрузки.
Порядок выполнения не гарантирован.
<script src="app.js" defer></script>
<script src="analytics.js" async></script>
Синхронные скрипты → задержка FCP, “белый экран”.
defer → безопасный вариант для большинства приложений.
async → хорошо для независимых скриптов (метрики, реклама).
Вывод: скрипты блокируют рендеринг, потому что браузер обязан выполнить их до продолжения парсинга. Использование defer и async — ключ к ускорению загрузки страницы.