Компоновка, рисование и композиция: конвейер отрисовки

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

Компоновка вычисляет геометрию — ширину, высоту и координаты x/y — каждого элемента. Изменение свойств, влияющих на геометрию (ширина, внешний отступ, внутренний отступ, размер шрифта, позиционирование), запускает компоновку элемента и, возможно, всего его поддерева — это самый затратный этап.

Отрисовка заполняет пиксели каждого слоя: фоны, границы, текст, тени. Изменение цвета, цвета фона, видимости или радиуса скругления вызывает перерисовку без повторной компоновки — это дешевле компоновки, но всё ещё затратно, если перерисовывается большая область.

Композитор объединяет слои с помощью GPU. Свойства CSS, влияющие только на композитинг, — трансформация и непрозрачность — можно анимировать без запуска компоновки или отрисовки. GPU обрабатывает их со скоростью 60 кадров в секунду при минимальном участии CPU.

csstriggers.com (теперь документация на стороне браузера) описывает, какие свойства CSS запускают компоновку, отрисовку и/или композитинг в каждом движке браузера. Используйте его для проверки свойств анимации. Для анимации предпочтительны трансформация и непрозрачность.

Такие проблемы возникают, когда JavaScript в цикле чередует чтение свойств компоновки (offsetWidth) и запись свойств стилей. Каждая запись делает компоновку недействительной, а каждое чтение принудительно запускает синхронную перекомпоновку. Объединяйте все операции чтения перед всеми операциями записи, чтобы избежать лишних перекомпоновок.

Только transform и opacity полностью обрабатываются композитором, когда элемент находится на собственном слое. Анимация любого другого свойства — даже left/top — запускает компоновку или отрисовку в основном потоке и может вызвать рывки.

Браузеры переводят элементы на собственный слой GPU, если у них указано will-change: transform, есть CSS-анимация transform/opacity, фиксированное позиционирование с соседними композитными элементами или 3D-трансформация. Каждый слой использует память GPU — слишком большое число слоёв создаёт нагрузку на память.

Шторм перерисовки возникает, когда за каждый кадр заново отрисовывается большая часть страницы. Выполните профилирование в Chrome DevTools → Визуализация → Мигание при отрисовке, чтобы определить области перерисовки. Размещайте часто анимируемые элементы на собственных слоях, чтобы ограничить область перерисовки.

Запишите профиль производительности в Chrome DevTools. На пламенной диаграмме отображаются события компоновки, обновления дерева слоёв, отрисовки и композитинга. Длинные полосы компоновки или отрисовки указывают на узкие места. Стремитесь к времени кадра менее 16 мс, чтобы поддерживать частоту 60 кадров/с.

По возможности анимируйте свойства transform и opacity. Для анимаций появления используйте clip-path вместо width/height — в современных браузерах clip-path эффективно обрабатывается композитингом. Не анимируйте box-shadow: вместо этого используйте opacity и псевдоэлемент с заранее отрисованной тенью.

Какие два свойства CSS можно анимировать без запуска компоновки или отрисовки?

Конвейер отрисовки — компоновка, отрисовка и композитинг — определяет производительность анимации. Компоновка требует больше всего ресурсов, отрисовка занимает промежуточное положение, а свойства, обрабатываемые только на этапе композитинга (transform, opacity), обрабатываются GPU. Понимание этих триггеров позволяет создавать плавные анимации с частотой 60 кадров/с без постоянного повторения компоновки и штормов перерисовки.