requestAnimationFrame против setInterval
Вопрос
Почему для покадровой JS-анимации берут requestAnimationFrame, а не setInterval(fn, 16)?
Попробуйте сами
Выберите вариант, и откроется разбор.
Показать ответ и разбор
Коротко
Варианты ответа
- rAF вызывается перед отрисовкой кадра и не работает впустую в фоновой вкладкеправильный ответ
- rAF выполняется в отдельном потоке композитора и не блокирует главный поток
setIntervalне может срабатывать чаще раза в секунду в активной вкладке- rAF гарантирует ровно 60 кадров в секунду на любом экране и любой частоте
Разбор
Колбэк rAF браузер вызывает прямо перед расчётом стилей и отрисовкой, поэтому изменения попадают ровно в кадр, а в скрытой вкладке вызовы приостанавливаются. Колбэк при этом работает в главном потоке, как и любой JS страницы. setInterval умеет срабатывать часто, но не синхронизирован с кадрами и даёт рывки. Частота rAF равна частоте экрана: на 120 Гц будет около 120 вызовов, а не 60.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.
Предыдущий вопрос
Анимация раскрытия до height: auto
Следующий вопрос
Как учесть настройку «уменьшить движение»