Как браузеры обрабатывают CSS: пошаговое объяснение

Как браузеры обрабатывают CSS: пошаговое объяснение

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

1. От сети к тексту: получение HTML и CSS

Процесс рендеринга начинается, как только браузер начинает получать байты из сети:

HTTP-запрос: браузер запрашивает HTML-документ по URL.
Поток ответа: сервер отправляет байты, которые браузер декодирует в текст (обычно UTF-8).
Инкрементальный парсинг: браузер не ждёт полной загрузки документа — он начинает разбирать HTML по мере его поступления.

Во время разбора HTML браузер обнаруживает внешние ресурсы, такие как таблицы стилей и скрипты, через теги <link rel="stylesheet"> и блоки <style>. Для них запускаются отдельные сетевые запросы.

2. Построение DOM-дерева из HTML

По мере чтения HTML браузер формирует DOM-дерево (Document Object Model):

Исходный HTML разбивается на токены (теги, текстовые узлы, комментарии и т.д.).
Токены преобразуются в узлы (элементы, текстовые узлы и т.д.).
Узлы организуются в дерево, отражающее вложенную структуру документа.

Каждый элемент становится узлом DOM со свойствами: имя тега, атрибуты, родитель, потомки, обработчики событий. На этом этапе браузер знает структуру документа, но ещё не определил, как он будет выглядеть.

3. Загрузка и разбор CSS

Во время построения DOM браузер сталкивается с CSS в трёх основных формах:

Внешние таблицы стилей: через <link rel="stylesheet" href="...">
Встроенные стили: внутри <style>...</style>
Инлайн-стили: через атрибут style="..."

Для внешнего и встроенного CSS браузер выполняет разбор:

CSS-текст разбивается на токены (селекторы, свойства, значения, единицы измерения, функции).
Токены формируются в правила (селектор + блок деклараций).
Правила сохраняются в объектной модели стилей — CSSOM (CSS Object Model).

Разбор также включает:

Корректную обработку синтаксических ошибок (неизвестные свойства, недопустимые значения).
Нормализацию значений (например, приведение имён цветов к каноническому виду).
Обработку директив @media, @supports, @keyframes.

4. Построение CSSOM (CSS Object Model)

После разбора CSS у браузера появляется полная CSSOM, параллельная DOM:

Каждая таблица стилей представлена объектом (или набором объектов).
Каждое правило содержит список селекторов и блок деклараций.
Декларации связывают имя свойства с разобранным значением.

CSSOM позволяет браузеру:

Быстро определять, какие правила применимы к элементу.
Пересчитывать стили при изменениях (например, при смене класса или размера окна).
Предоставлять доступ к стилям через JavaScript (document.styleSheets, getComputedStyle).

5. Сопоставление селекторов с элементами DOM

Имея DOM и CSSOM, браузер сопоставляет стили с элементами:

Для каждого элемента определяется, какие CSS-правила к нему применимы.
Сопоставление селекторов обычно оптимизировано и выполняется справа налево.
Учитываются псевдоклассы (:hover, :focus, :nth-child()) и псевдоэлементы (::before, ::after).

Результатом является список потенциальных правил для каждого элемента. Конфликты между ними разрешаются на этапе каскада.

6. Каскад: разрешение конфликтующих правил

Каскад — это алгоритм, определяющий, какое правило «побеждает», если несколько правил задают одно и то же свойство:

Источник и важность:
- стили браузера (user agent),
- пользовательские стили,
- стили автора,
- !important в каждом источнике.
Специфичность: более специфичные селекторы имеют приоритет.
- Инлайн-стили имеют очень высокую специфичность.
- ID-селекторы сильнее классов, классы — сильнее селекторов по тегу.
Порядок в коде: при равных условиях выигрывает правило, объявленное позже.

После применения каскада для каждого свойства каждого элемента определяется окончательное правило.

7. Наследование: передача значений по дереву

Некоторые свойства наследуются (например, color, font-family, line-height), другие — нет (margin, border, background).

При вычислении стиля элемента браузер:

Берёт результат каскада.
Для наследуемых свойств без явного значения использует вычисленное значение родителя.
Для ненаследуемых свойств без значения применяет начальное значение из спецификации CSS.

Ключевые слова inherit, initial, unset, revert изменяют стандартное поведение.

8. Вычисление используемых значений

После каскада и наследования браузер имеет заданные значения свойств. Многие из них относительные и требуют уточнения:

Преобразование относительных единиц (em, rem, %, vh, vw) в пиксели.
Разрешение значений auto в flex и grid-контейнерах.
Подстановка резервных значений при отсутствии поддержки.

На выходе формируется полный набор конкретных данных о стилях для каждого элемента.

9. Построение дерева рендеринга (Render Tree)

Браузер строит render tree — структуру, похожую на DOM, но содержащую только отображаемые элементы:

Исключаются невидимые элементы (например, <head>).
Элементы с display: none не попадают в дерево.
Псевдоэлементы, создающие блоки, включаются.

Каждый узел соответствует блоку (или нескольким блокам) с прикреплённой информацией о стиле.

10. Layout: вычисление размеров и позиций

На этапе layout (reflow) браузер рассчитывает размеры и положение каждого блока:

Начинает с корневого элемента (html), размер которого определяется viewport.
Рекурсивно вычисляет размеры и позиции дочерних элементов.
Учитывает box model, отступы, границы, позиционирование (static, relative, absolute, fixed, sticky).

Layout — ресурсоёмкий процесс, особенно при частых изменениях DOM или стилей.

11. Painting: преобразование блоков в пиксели

После layout браузер знает, как элементы выглядят и где находятся. Этап painting:

Проход по render tree с учётом контекстов наложения и z-index.
Отрисовка фонов, границ, текста, теней, изображений.
Применение фильтров, режимов смешивания, масок.

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

12. Компоновка (Compositing) и вывод на экран

На этапе compositing:

Слои объединяются с учётом прозрачности, трансформаций и порядка наложения.
Часто используется GPU для ускорения.
Итоговое изображение отправляется системе отображения.

Свойства, которые можно анимировать на уровне компоновки (например, transform, opacity), работают быстрее, чем те, что требуют layout или repaint.

13. Реакция на изменения: перерасчёты стилей, layout и paint

Страницы динамичны. При изменениях браузер может:

Пересчитать стили (изменение класса, inline-стиля).
Пересчитать layout (изменение размеров, контента).
Перерисовать (изменение цвета).

Для оптимизации браузеры:

Группируют изменения.
Ограничивают перерасчёт минимальными поддеревьями.
Повторно используют данные, где это возможно.

14. Почему это важно разработчикам

Понимание процесса рендеринга напрямую влияет на разработку:

Отладка: знание каскада и специфичности помогает понять, почему стиль не применяется.
Производительность: минимизация дорогостоящих операций улучшает UX.
Поддерживаемость: продуманная архитектура CSS упрощает масштабирование.

Эффективный CSS — это работа в рамках рендеринг-конвейера браузера, а не борьба с ним.

От разбора HTML и CSS до вычисления стилей, layout, отрисовки и компоновки — конвейер рендеринга браузера представляет собой точную последовательность шагов. Освоение этой последовательности даёт более глубокий контроль над тем, как страницы выглядят и работают на разных устройствах и в разных браузерах.