Какие этапы проходит браузер после получения HTML-документа?

Question

После получения HTML браузер начинает его разбирать и строить DOM-дерево. Параллельно он загружает и обрабатывает CSS, формируя CSSOM. Затем DOM и CSSOM объединяются в render tree. После этого браузер рассчитывает размеры и позиции элементов и отрисовывает страницу на экране.

YeaHub · Accepted Answer

Когда HTML-документ получен по сети, браузер запускает процесс рендеринга страницы.Основные этапы обработкиПарсинг HTMLБраузер читает HTML сверху вниз и преобразует его в DOM-дерево.Загрузка ресурсовВ процессе парсинга обнаруживаются:CSS-файлыJavaScript-файлыизображения и шрифтыПостроение CSSOMCSS-файлы парсятся в отдельную структуру — CSSOM, которая описывает стили элементов.Формирование render treeDOM и CSSOM объединяются в render tree, содержащий только видимые элементы и их стили.Layout (reflow)Для каждого элемента рассчитываются размеры и положение на странице.PaintБраузер рисует пиксели на экране: текст, цвета, границы, изображения.Важные особенностиНекоторые ресурсы могут блокировать рендерингИзменения в DOM или CSS могут вызвать повторный layout и paintВыводПонимание этапов рендеринга помогает писать более производительный фронтенд и избегать лишних перерисовок страницы.