Избегайте анимации за пределами этапа компоновки

Анимация, выполняемая за пределами этапа компоновки, может выглядеть «рваной» (т. е. не быть плавной) на медленных телефонах или во время выполнения ресурсоемких задач в основном потоке. Дергающиеся анимации могут увеличивать показатель Cumulative Layout Shift (совокупное смещение макета, CLS) вашей страницы. Снижение CLS помогает улучшить оценку производительности в Lighthouse.

# Предыстория

Алгоритмы, используемые браузером для преобразования HTML, CSS и JavaScript в растровое изображение, в совокупности известны как конвейер рендеринга.

Ничего страшного, если вы не понимаете, за что отвечают этапы рендеринга. Важно лишь понимать, что на каждом этапе рендеринга браузер обрабатывает данные, полученные в ходе предыдущего этапа. Например, если ваш код инициирует изменения на этапе макета, это приводит к необходимости повторного запуска отрисовки и компоновки. Анимация за пределами этапа компоновки — это любая анимация, которая запускает один из предыдущих этапов рендеринга (стилизацию, макет или отрисовку). Анимации за пределами этапа компоновки имеют низкую производительность, так как заставляют браузер совершать больше работы.

Чтобы подробнее узнать о конвейере рендеринга, ознакомьтесь со следующими ресурсами:

• Взгляд изнутри на современные веб-браузеры (часть 3)
• Упрощение и сокращение областей прорисовки
• Используйте свойства, вызывающие только компоновку, и контролируйте количество слоев

# Как Lighthouse обнаруживает анимации за пределами этапа компоновки

Когда анимацию невозможно выполнить в рамках этапа компоновки, Chrome сообщает о причинах в трассировке DevTools, которую и использует Lighthouse. Lighthouse перечисляет узлы DOM, анимация которых выполняется за пределами этапа компоновки, а также указывает причины такого поведения для каждой анимации.

# Как обеспечить анимацию в рамках этапа компоновки

См. статьи Используйте свойства, вызывающие только компоновку, и контролируйте количество слоев и Высокопроизводительная анимация.

# Ресурсы

• Исходный код проверки Avoid non-composited animations
• Используйте свойства, вызывающие только компоновку, и контролируйте количество слоев
• Высокопроизводительная анимация
• Упрощение и сокращение областей прорисовки
• Взгляд изнутри на современные веб-браузеры (часть 3)