Пересчёт стилей

Это первый шаг конвейера отрисовки. Прежде чем раскладывать элементы, браузер должен знать их стили: пройти по правилам таблиц стилей, проверить селекторы, разрешить конфликты по каскаду, подставить наследуемые значения и переменные. На выходе получаются вычисленные стили — то, что показывает вкладка Computed в DevTools. Если потом меняется класс, атрибут или структура документа, часть этой работы приходится повторять.

Браузеры стараются пересчитывать только затронутые элементы. Но сколько их окажется, зависит от того, где произошло изменение и как написаны селекторы.

Цепочка последствий

Пересчёт стилей сам по себе может быть недорогим, но он определяет, что будет дальше. Если изменилось только color, браузер перейдёт к перерисовке. Если изменилась ширина или отступ — сначала к перерасчёту компоновки. Если только transform или opacity на отдельном слое — возможно, сразу к композитингу.

Пример: где менять класс

// затрагивает каждый элемент страницы, у которого
// есть правило вида .catalog-dense .xxx
document.body.classList.add('catalog-dense');

// затрагивает только каталог и его потомков
document.querySelector('.catalog').classList.add('is-dense');

// принудительный пересчёт: браузеру нужен ответ прямо сейчас
const h = getComputedStyle(el).height;

Класс на body или html заставляет браузер проверить всё дерево. То же касается переменной CSS, которая меняется на корневом элементе и используется везде, например при переключении темы. Для разовых действий это нормально, для анимаций на каждом кадре — нет.

Что увеличивает стоимость

• Количество элементов. Страница с десятками тысяч узлов DOM — каталог без пагинации, огромное меню — пересчитывается дольше, как бы аккуратно ни были написаны стили.
• Широкие изменения. Смена класса у общего предка вместо конкретного блока.
• Чтение стилей в цикле. getComputedStyle() после каждой записи заставляет браузер пересчитывать стили немедленно.
• Сложные селекторы. Сами по себе они редко становятся узким местом, но в сочетании с большим DOM и частыми изменениями это заметно.

Во вкладке Performance этот этап подписан как Recalculate Style. В подробностях указано, сколько элементов затронуто: если там тысячи после клика по одной кнопке, стоит поискать класс, который меняется слишком высоко в дереве.