Как браузер отрисовывает страницу с момента получения HTML?

После получения HTML, CSS и JS браузер проходит несколько этапов рендеринга страницы:

1. Парсинг HTML — браузер строит DOM (Document Object Model), представляющий структуру документа.
2. Парсинг CSS — строится CSSOM (CSS Object Model), описывающий стили.
3. Построение Render Tree — объединение DOM и CSSOM в дерево рендеринга, содержащее видимые элементы с их стилями.
4. Layout (Reflow) — вычисление точных размеров и позиций элементов на странице.
5. Painting — отрисовка пикселей на экране, согласно рассчитанным стилям и позициям.
6. JS-исполнение — скрипты могут изменять DOM и CSSOM, вызывая повторные этапы layout и paint.

Таким образом, браузер последовательно строит структуру, применяет стили, вычисляет расположение и отображает содержимое, обновляя его при необходимости из-за JS.