Как работает функция `requestAnimationFrame()` в JavaScript и какие у неё преимущества перед альтернативными методами синхронизации вроде `setTimeout()` и `setInterval()`?

Что такое requestAnimationFrame()

requestAnimationFrame(callback) — это браузерный API, который планирует выполнение callback-функции прямо перед следующей перерисовкой экрана. Он синхронизируется с частотой обновления дисплея, обычно работая с 60fps (примерно каждые 16.6ms).

Как это работает

• Ты передаёшь callback-функцию в качестве аргумента
• Браузер вызывает её в оптимальный момент перед следующей перерисовкой
• Чтобы создать непрерывный цикл анимации, callback должен вызывать себя рекурсивно:

Преимущества перед setTimeout и setInterval

• Синхронизация с частотой обновления дисплея — анимации работают плавно без визуальных разрывов или пропусков кадров
• Автоматически ставится на паузу, когда вкладка неактивна — экономит CPU и батарею, в отличие от setTimeout/setInterval, которые продолжают работать в фоне
• Оптимизированное планирование на стороне браузера — браузер сам выбирает наилучший момент для выполнения callback, сокращая лишние перерисовки
• Без дрейфа интервалов — setInterval может смещаться со временем из-за задержек выполнения; requestAnimationFrame всегда выравнивается с циклом перерисовки

Когда это использовать

Используй requestAnimationFrame() для любой визуальной анимации или цикла рендеринга. Оставляй setTimeout/setInterval для невизуальных задач, таких как polling API или отложенное выполнение логики.