Что представляет собой requestAnimationFrame?

Что представляет собой requestAnimationFrame?

• Браузерный API для эффективного выполнения анимаций
• Синхронизирует callback с перерисовкой экрана
• Позволяет работать с 60 FPS либо частотой обновления дисплея
• Для плавности заменяет setTimeout/setInterval
• Сокращает нагрузку на CPU и энергопотребление
• Callback запускается до следующего repaint
• Применяется в гейминге, UI-анимациях и плавных переходах

Подробный ответ

Основной ответ

requestAnimationFrame — встроенный браузерный API, предназначенный для оптимизированного обновления графики и анимаций. Браузер вызывает переданную функцию синхронно с перерисовкой, благодаря чему рендеринг получается плавным и эффективным, обычно с частотой около 60 кадров в секунду.

Ключевые моменты

• Синхронизация с экраном: в отличие от таймеров с фиксированным интервалом (setTimeout/setInterval), requestAnimationFrame запускает callback перед ближайшим repaint. Это уменьшает пропуски кадров и делает движение ровнее.
• Экономия ресурсов: для скрытой, неактивной или свёрнутой вкладки браузер приостанавливает вызовы requestAnimationFrame. CPU и GPU получают меньшую нагрузку, а энергия экономится, тогда как таймеры могут продолжать выполняться.
• Использование: callback получает timestamp, по которому можно вычислять изменения анимации с учётом времени кадра и точнее контролировать её скорость.

Практический контекст

В React 18+ и при работе с canvas 2D/WebGL requestAnimationFrame считается стандартным способом организовать smooth анимацию для игр, визуализаций данных и интерфейсных эффектов. Для UI с высокой частотой кадров он подходит лучше setTimeout: при 60fps обеспечивает латентность около 16ms и плавность.