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

Published on

Translated to: English, Español, Português, 한국어, 中文, 日本語

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

Предыстория

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

Конвейер рендеринга состоит из следующих последовательных этапов: JavaScript, стилизация, макет, отрисовка, компоновка.
Конвейер рендеринга.

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

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

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

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

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

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

Ресурсы

Last updated: Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.