​​🤔Вы когда-нибудь задумывался, как рендерится и отображается HTML-страница.🧐

Есть 5 этапов рендеринга HTML-страницы.

👉🏻 Построение DOM
👉🏻Построение CSSOM
👉🏻 Построение дерева рендеринга
👉🏻 Макет
👉🏻 Отображение


1.Построение DOM
На этом этапе HTML преобразуется в текст DOM HTML, который читается как байты, которые проходят последовательность шагов.

2. Построение CSSOM
Разметка CSS преобразуется в объектную модель CSS путем выполнения той же последовательности шагов, что и DOM.

3. Построение дерева рендеринга
DOM и CSSOM объединяются, чтобы сформировать дерево рендеринга, которое содержит узлы, которые должны отображаться на странице ... Как ??
Из корня дерева DOM просматривается каждый видимый узел и применяется соответствующее правило CSSOM.
Наконец, он дает дереву рендеринга, содержащему большие блоки с контентом и стилем.

4. Этап макета
Фазу компоновки можно назвать фазой геометрии, на которой мы вычисляем геометрию узлов.
На этапе компоновки вычисляется точное положение узлов и их размер относительно порта просмотра браузера. Таким образом создается коробчатая модель, которая знает точное положение и размер каждого узла.

5. Этап отображения
Поскольку мы знаем доступные узлы, их стиль и их геометрию, теперь вся эта информация используется для визуализации узлов из дерева визуализации в фактические пиксели на экране. Этот процесс называется отабражением.