Есть 5 этапов рендеринга HTML-страницы.
:point_right:?Построение DOM
:point_right:?Построение CSSOM
:point_right:?Построение дерева рендеринга
:point_right:?Макет
:point_right:? Отображение
1.Построение DOM
На этом этапе HTML преобразуется в текст DOM HTML, который читается как байты, которые проходят последовательность шагов.
2. Построение CSSOM
Разметка CSS преобразуется в объектную модель CSS путем выполнения той же последовательности шагов, что и DOM.
3. Построение дерева рендеринга
DOM и CSSOM объединяются, чтобы сформировать дерево рендеринга, которое содержит узлы, которые должны отображаться на странице … Как ??
Из корня дерева DOM просматривается каждый видимый узел и применяется соответствующее правило CSSOM.
Наконец, он дает дереву рендеринга, содержащему большие блоки с контентом и стилем.
4. Этап макета
Фазу компоновки можно назвать фазой геометрии, на которой мы вычисляем геометрию узлов.
На этапе компоновки вычисляется точное положение узлов и их размер относительно порта просмотра браузера. Таким образом создается коробчатая модель, которая знает точное положение и размер каждого узла.
5. Этап отображения
Поскольку мы знаем доступные узлы, их стиль и их геометрию, теперь вся эта информация используется для визуализации узлов из дерева визуализации в фактические пиксели на экране. Этот процесс называется отабражением.