Как сделать анимацию плавной
Вопрос
Анимация на сайте дёргается на телефонах. Как будешь разбираться и что поменяешь?
Попробуйте сами
Ответьте вслух за 2 минуты, как на собесе. Потом сверьтесь с тезисами: что прозвучало, а что нет.
Показать ответ и разбор
Коротко
Что должно прозвучать в ответе
Запишу профиль во вкладке Performance и посмотрю, есть ли layout и paint на каждом кадре
Переведу движение на `transform` и `opacity` вместо `top`, `left`, `width`, `height`
Уберу `transition: all`, перечислю свойства явно
Точечно `will-change` перед анимацией, без глобального применения
Проверю JS: длинные задачи в главном потоке, чтение размеров вперемешку с записью стилей, `setInterval` вместо rAF
Учту `prefers-reduced-motion`
Что могут спросить следом
- Почему
transformдешевле, чемleft? - Что такое layout thrashing и как его избежать?
- Когда
will-changeвредит?
Разбор
Начну с измерения: в DevTools во вкладке Performance записываю анимацию с замедлением CPU и смотрю, что происходит в каждом кадре. Если вижу фиолетовые блоки Layout и зелёные Paint, значит анимируются свойства геометрии. Перевожу движение на transform: translate() и scale(), появление на opacity: они обрабатываются на этапе composite. Заменяю transition: all на явный список. Если элемент тяжёлый, ставлю will-change: transform перед анимацией и снимаю после, чтобы не плодить слои. Отдельно смотрю JS: нет ли длинных задач, не читаю ли я offsetHeight после каждой записи стилей, используется ли requestAnimationFrame. И для людей, которым мешает движение, отключаю или упрощаю анимации в @media (prefers-reduced-motion: reduce).
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.