Какие есть этапы рендеринга html страницы?

Браузер начинает парсить HTML-документ и строить DOM-дерево (Document Object Model), представляющее иерархическую структуру всех элементов страницы.

Если браузер находит <script>, он приостанавливает парсинг, загружает и выполняет скрипт, что может изменить структуру DOM.

Во время парсинга HTML браузер обнаруживает ссылки на внешние ресурсы (CSS, изображения, шрифты, скрипты) и начинает их загружать параллельно.

CSS загружается и парсится, формируя CSSOM (CSS Object Model).

DOM и CSSOM объединяются для создания рендер-дерева, которое представляет собой структуру элементов, подлежащих отображению на экране с примененными стилями.

Браузер вычисляет размеры и положение каждого элемента на странице, основываясь на рендер-дереве. Этот процесс называется layout или reflow.

Браузер преобразует рендер-дерево в пиксели на экране, рисуя текст, цвета, изображения, тени и другие графические элементы.

Некоторые элементы могут быть отрисованы в отдельных слоях для улучшения производительности (например, анимации или фиксированные элементы). На этапе композиции браузер объединяет эти слои в одно изображение для отображения на экране.

Браузер обрабатывает пользовательские события (клики, прокрутка, ввод данных и т.д.).

JavaScript может изменять DOM, что может запустить повторные этапы layout и painting.