Как работает браузер?

Браузер получает запрошенный URL, разбирает его и отправляет HTTP-запрос на сервер. Сервер обрабатывает запрос и отправляет ответ, содержащий HTML, CSS, JavaScript, изображения и другие ресурсы.

Браузер парсит HTML-документ, создавая DOM-дерево (Document Object Model).

Затем обрабатывает CSS, строя CSSOM-дерево (CSS Object Model).

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

Происходит фаза Layout (или Reflow), в ходе которой вычисляются геометрические параметры каждого элемента (позиция, размеры).

На этапе Painting (или Repainting) браузер отрисовывает видимые элементы на экране, используя информацию из Render Tree и Layout.

Если есть JavaScript, браузер загружает и выполняет его. JavaScript может изменять DOM и CSSOM, что может вызвать повторные этапы Layout и Painting.

Браузер кэширует полученные ресурсы для ускорения последующих загрузок.