Как работает браузер при отрисовке страницы? Какие этапы проходят?

При отрисовке страницы браузер проходит несколько ключевых этапов:

1. Загрузка HTML — браузер запрашивает HTML-документ и начинает его парсить.
2. Построение DOM — из HTML создаётся дерево DOM (Document Object Model).
3. Загрузка и парсинг CSS — браузер загружает CSS-файлы и строит CSSOM (CSS Object Model).
4. Построение рендер-дерева — объединение DOM и CSSOM в рендер-дерево, которое содержит только видимые элементы с их стилями.
5. Вычисление расположения (Layout) — определение размеров и позиций элементов на странице.
6. Отрисовка (Painting) — заполнение пикселей на экране согласно рендер-дереву.
7. Исполнение JavaScript — скрипты могут изменять DOM и CSSOM, что может привести к повторным этапам построения и отрисовки.

Этот процесс оптимизирован для скорости и плавности отображения, браузер может выполнять некоторые этапы параллельно и использовать кэширование.