Как происходит загрузка страницы

Ответ

Браузер загружает HTML, парсит его и строит DOM. Параллельно загружаются CSS, формируется CSSOM. Затем DOM и CSSOM объединяются в Render Tree.

Этапы:

  1. Parsing HTML - построение DOM
  2. CSS Loading - построение CSSOM
  3. Render Tree - комбинация DOM + CSSOM
  4. Layout - расчет позиций элементов
  5. Paint - отрисовка пикселей

JavaScript может блокировать парсинг HTML при выполнении (если нет async/defer).

Пример:

<script defer src="script.js"></script> <!-- Не блокирует рендеринг -->
<script async src="analytics.js"></script> <!-- Загружается параллельно -->