Некомпозитная анимация может выглядеть неровной (не плавной) на слабых телефонах или когда в основном потоке выполняются ресурсоемкие задачи. Яркая анимация может увеличить совокупный сдвиг макета (CLS) вашей страницы. Уменьшение CLS улучшит ваш показатель производительности Lighthouse.
Фон
Алгоритмы браузера для преобразования HTML, CSS и JavaScript в пиксели называются конвейером рендеринга .
Ничего страшного, если вы не понимаете, что означает каждый шаг конвейера рендеринга. Главное, что нужно понять прямо сейчас, — это то, что на каждом этапе конвейера рендеринга браузер использует результат предыдущей операции для создания новых данных. Например, если ваш код делает что-то, что запускает Layout, шаги Paint и Composite необходимо выполнить снова. Некомпозитная анимация — это любая анимация, которая запускает один из более ранних этапов конвейера рендеринга (стиль, макет или рисование). Некомпозитные анимации работают хуже, поскольку заставляют браузер выполнять больше работы.
Ознакомьтесь со следующими ресурсами, чтобы более подробно узнать о конвейере рендеринга:
- Взгляд изнутри на современные веб-браузеры (часть 3)
- Упрощение сложности покраски и уменьшение площади покраски.
- Придерживайтесь свойств только для композитора и управляйте количеством слоев.
Как Lighthouse обнаруживает некомпозитную анимацию
Если анимацию невозможно скомпоновать, Chrome сообщает о причинах сбоя в трассировке DevTools, которую и читает Lighthouse. Lighthouse перечисляет узлы DOM, которые имеют анимации, которые не были скомпонованы, а также причины сбоя для каждой анимации.
Как обеспечить композицию анимации
См. разделы «Придерживаться свойств только для композитора и управлять количеством слоев» и «Высокопроизводительная анимация» .