Как влияют скрипты на блокировку рендеринга?

Question

Скрипты могут блокировать рендеринг, потому что браузер должен остановить парсинг HTML, загрузить и выполнить JavaScript. Это нужно, так как скрипт может изменить DOM или CSS. Пока синхронный скрипт не выполнен, браузер не продолжает строить DOM и не может корректно рендерить страницу. Атрибуты defer и async позволяют уменьшить или убрать эту блокировку.

YeaHub · Accepted Answer

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