В какой момент происходит рендеринг

Рендеринг в браузере происходит после построения DOM и CSSOM, когда они объединяются в Render Tree. Основные этапы:

1. Парсинг HTML → строится DOM
2. Парсинг CSS → строится CSSOM
3. Создание Render Tree (DOM + CSSOM)
4. Layout (Reflow) – вычисление позиций и размеров элементов
5. Paint – отрисовка пикселей

Рендеринг блокируется JS-кодом, поэтому важно:

• Размещать скрипты перед </body> или использовать async/defer
• Минимизировать синхронные операции

Пример блокировки:

<script>
  // Этот код заблокирует рендеринг
  document.querySelector('h1').style.color = 'red';
</script>

Оптимизированный вариант:

<script defer>
  // Этот код выполнится после построения DOM
  document.querySelector('h1').style.color = 'red';
</script>