> Почему ресурсы CSS и JavaScript блокируют построение и отображение страницы (JavaScript)

Ресурсы CSS и JavaScript блокируют построение и отображение страницы из-за особенностей работы браузерного движка. CSS считается "блокирующим рендеринг" (render-blocking), потому что браузер не начинает отрисовку страницы до полной загрузки и обработки CSS-файлов. Это необходимо, чтобы избежать "вспышки нестилизованного контента" (Flash of Unstyled Content, FOUC) - когда пользователь видит сырой HTML без стилей, а затем резкое появление оформления. Браузер приостанавливает построение дерева рендеринга (render tree), пока не разберёт все CSS-правила, чтобы точно знать, как отображать каждый элемент.

JavaScript, в свою очередь, может блокировать как построение DOM (Document Object Model), так и рендеринг. Когда браузер встречает тег <script> (без атрибутов async или defer), он останавливает парсинг HTML, загружает и выполняет скрипт. Это связано с тем, что JavaScript может изменять DOM (через document.write) или CSSOM (через манипуляции стилями). Если скрипт расположен после CSS-файла, он дополнительно ждёт загрузки CSS, так как может запрашивать стили через getComputedStyle. Таким образом, синхронный JavaScript блокирует и парсинг HTML, и рендеринг, пока не выполнится полностью.

Для оптимизации используют атрибуты async (скрипт загружается параллельно и выполняется сразу после загрузки, не блокируя парсинг) и defer (скрипт загружается параллельно, но выполняется только после завершения парсинга HTML), а также критический CSS (inline-стили для "над сгиба").