Модель DOM+CSSOM

Объектная модель представления вебстраницы

Конструктор вебстраниц должен иметь представление о процессах браузера для оптимизации критического пути рендеринга. Понимание процессов позволяет снизить время загрузки вебстраницы за счёт минимизации узлов и минимизации рекурсивного наследования стилей,

Процессы браузера при отображении вебстраницы:

Обработать разметку HTML. Построить объектную модель вебстраницы (DOM).
Обработать разметку в файлах стилей CSS. Построить объектную модель стилей вебстраницы (CSSOM).
Объединить модели вебстраницы (DOM) и стилей (CSSOM) в единую модель представления вебстраницы (DOM+CSSOM).
Вычислить макет позиционирования объектов вебстраницы.
Отобразить вебстраницу на экране устройства пользователя.

Макетирование вебстраницы

Браузер объединяет деревья DOM и CSSOM в дерево представления (Render tree) вебстраницы. При этом выбирает только те узлы, которые необходимы для представления вебстраницы:

Начинает с корня дерева DOM и обходит в глубину каждый видимый узел.
Исключает невидимые узлы (метатеги, скрипты), а также узлы скрытые CSS (например, свойство display: none;).
Для каждого видимого узла находит соответствующее правило в модели CSSOM и применяет это правило.
В результате браузер получает дерево представления вебстраницы, которое содержит как содержательные данные, так и данные о стиле видимых элементов. Однако в дереве представления отсутствуют позиции на экране устройства пользователя.

Позиционирование объектов вебстраницы

На этапе позиционирования браузер вычисляет точное положение и размер объектов. Для этого:

В метаданных вебстраницы браузер находит тег viewport:

<meta name="viewport" content="width=device-width,initial-scale=1" />

Получив данные тега viewport, браузер опять обходит дерево, начиная с корня. В результате обхода браузер получает блочную модель (Box model), в которой точно зафиксированы положения каждого элемента в области просмотра. Все относительные измерения преобразованы в абсолютные значения.
Данные поступают процессу растеризации (rasterizing), который отображает их в виде пикселей на экране устройства.

Время, затрачиваемое браузером на макетирование и позиционирование, зависит от размера вебстраницы, сложности правил стиля, особенностей экрана устройства.

Гиперссылка