Когда браузер получает HTML, он начинает парсить документ сверху вниз, строя DOM (Document Object Model) — дерево элементов страницы. Одновременно с этим браузер обнаруживает ресурсы, такие как CSS и JavaScript, и начинает их загружать.

Блокирующие сущности:

CSS — браузер блокирует отображение страницы (rendering), пока не загрузит и не применит все CSS, чтобы избежать эффекта "мерцания" без стилей.
JavaScript — если скрипт подключён без атрибута async или defer, браузер приостанавливает парсинг HTML, загружает и выполняет скрипт, чтобы избежать проблем с зависимостями и изменениями DOM.

Как с этим работать:

Использовать defer для скриптов, чтобы они загружались параллельно, но выполнялись после парсинга HTML.
Использовать async для независимых скриптов, которые могут выполняться сразу после загрузки.
Минимизировать и объединять CSS, чтобы ускорить загрузку.
Критический CSS можно встроить в <head>, а остальной загружать асинхронно.

Пример подключения скриптов:

<script src="script1.js" defer></script>
<script src="script2.js" async></script>

Таким образом, оптимизация загрузки ресурсов помогает уменьшить время блокировки и ускорить отображение страницы.

Что происходит когда HTML попадает в браузер? Что является блокирующими сущностями и как с этим работать?