Почему дёргается анимация
Вопрос
Анимация выезжающей панели дёргается на слабых телефонах. Как бы ты искал причину и исправлял?
Попробуйте сами
Ответьте вслух за 2 минуты, как на собесе. Потом сверьтесь с тезисами: что прозвучало, а что нет.
Показать ответ и разбор
Коротко
Что должно прозвучать в ответе
Открыть Performance в DevTools и посмотреть, что занимает кадр: scripting, layout, paint
Анимировать `transform` и `opacity` вместо `left`, `top`, `width`
Убрать чередование чтения и записи геометрии (layout thrashing)
JS-анимации вести через `requestAnimationFrame` или перейти на CSS/Web Animations
Аккуратно использовать `will-change`, не на всё подряд
Разгрузить главный поток от длинных задач
Что могут спросить следом
- Чем опасен
will-changeна сотне элементов? - Почему CSS-анимация
transformможет идти плавно при занятом главном потоке? - Как учесть
prefers-reduced-motion?
Разбор
Сначала я бы записал профиль во вкладке Performance с замедлением CPU и посмотрел, на что уходит время кадра. Типичная причина: анимируют left или width, и браузер на каждом кадре делает layout и paint. Я бы переписал анимацию на transform: translateX и opacity: их композитор меняет без пересчёта геометрии, а CSS-анимации таких свойств могут идти плавно даже при занятом главном потоке. Если анимация на JS, её надо вести через requestAnimationFrame, а не setTimeout, и убедиться, что в кадре нет чтения offsetHeight после записи стилей. will-change: transform можно поставить на саму панель, чтобы слой создался заранее, но не на всё подряд: каждый слой ест память. И отдельно проверить, нет ли в это время длинных задач, которые забивают главный поток. Для пользователей с prefers-reduced-motion анимацию лучше упростить.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.