Що таке requestAnimationFrame?

Повне пояснення

Що це і навіщо

• requestAnimationFrame (RAF) – функція, що реєструє колбек для виконання перед наступним кадром рендеру. Використовується переважно в анімаціях, іграх та інтерактивних UI.

Ключові принципи

• RAF синхронізується з частотою дисплея (часто 60 Hz), тому колбек виконується приблизно кожні 16.7 мс.
• Якщо вкладка неактивна, браузер приостанавливає виклики RAF, що зменшує навантаження.
• Callback отримує DOMHighResTimeStamp, що дозволяє обчислювати точний час між кадрами.

Як це працює

1. Користувач викликає requestAnimationFrame(callback).
2. Браузер планує виконання callback перед наступним перерисовуванням.
3. Після виклику колбеку, якщо він сам реєструє новий RAF, цикл продовжується.

Практика і реалізація

function animate(time){
  // обчислення позиції, зміна стилів…
  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

Тестування

• Для unit‑тестів можна замокати requestAnimationFrame через Jest: global.requestAnimationFrame = jest.fn(cb => setTimeout(() => cb(performance.now()), 0));.

Оптимізація

• Не викликайте RAF у вкладках, що не видимі (браузер сам це робить).
• Уникайте тяжких обчислень у колбеку; розділяйте логіку на менші частини.

Часті помилки

• Використання setInterval замість RAF → не синхронізовано, мерехтіння.
• Забудьте про cancelAnimationFrame → витік пам’яті при переходах між компонентами.
• Виклик RAF у циклі без requestAnimationFrame → блокування UI.