Что происходит на этапе рендеринга браузера: Style calculation

После того как браузер построил DOM и CSSOM, ему нужно понять, как именно должен выглядеть каждый элемент на странице. Этим занимается этап Style calculation (расчёт стилей). На этом шаге браузер сопоставляет каждый узел DOM с правилами из CSSOM и вычисляет итоговые значения всех CSS-свойств для этого узла.

Что происходит по шагам

1. Браузер собирает все источники стилей: внешние CSS-файлы, встроенные <style>, инлайн-атрибуты style и user-agent стили.
2. Из них строится CSSOM — объектная модель CSS, где правила представлены в виде дерева.
3. Для каждого DOM-узла браузер подбирает совпадающие селекторы, учитывая каскад, специфичность и порядок объявления.
4. Вычисляются computed styles: относительные единицы (em, %, rem) переводятся в абсолютные пиксели, наследуемые свойства подставляются от родителей.
5. Результат — дерево computed styles, которое передаётся на этап Layout.

Почему это важно для производительности

Style calculation может быть дорогим, если у вас тысячи элементов и сложные селекторы. Каждый раз, когда вы меняете класс или добавляете элемент, браузер может пересчитать стили для части дерева. Если изменения затрагивают геометрию (ширину, отступы), запускается reflow, а затем repaint.

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

// Плохо: частая смена класса на body вызывает массовый пересчёт стилей
body.classList.toggle('dark-theme');

// Лучше: менять CSS-переменные, которые не требуют пересчёта всего дерева
// или использовать will-change для изоляции слоёв

Как оптимизировать

• Используйте простые селекторы (классы вместо сложных вложенных конструкций).
• Избегайте частых изменений стилей в цикле — группируйте их через requestAnimationFrame.
• Применяйте CSS-переменные для тем, чтобы не пересчитывать всё дерево.
• Ограничивайте область изменений с помощью contain: style или will-change.

В итоге Style calculation — это мост между структурой документа и его визуальным представлением. Понимание этого этапа помогает писать CSS, который быстро обрабатывается, и избегать лишних перерисовок при динамических изменениях интерфейса.