В чём разница между анимацией на requestAnimationFrame и SetInterval?

Чем отличается анимация на requestAnimationFrame от setInterval

• область: веб-анимация, таймеры
• requestAnimationFrame — это браузерный API, предназначенный для создания анимаций
• Его вызовы синхронизируются с обновлением кадра, которое обычно происходит с частотой 60 fps
• В свёрнутой вкладке браузер автоматически подавляет такие вызовы, что позволяет экономить ресурсы
• setInterval обеспечивает регулярное выполнение функции через заданный интервал, но не учитывает момент перерисовки кадра
• Если период setInterval не совпадает с частотой обновления экрана, анимация может начать дрожать или заикаться
• Для анимаций requestAnimationFrame обеспечивает плавность и более рациональное использование энергии

Итого: для качественной анимации предпочтителен requestAnimationFrame, поскольку браузер синхронизирует его работу с перерисовкой и дополнительно оптимизирует выполнение.

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

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

Ключевая разница между анимацией с использованием requestAnimationFrame и setInterval состоит в способе запуска callback. requestAnimationFrame учитывает частоту обновления дисплея, а setInterval вызывает функцию через фиксированные промежутки времени, не связывая их с перерисовкой экрана. Поэтому в браузерных анимациях requestAnimationFrame обычно дает более плавный результат и эффективнее расходует ресурсы.

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

• Синхронизация с рендером: requestAnimationFrame запускает callback ориентировочно перед следующей перерисовкой экрана — примерно с частотой ~60 FPS на большинстве мониторов. Это уменьшает мерцание и джиттер. SetInterval работает строго по таймеру, поэтому его вызовы могут «рассинхронизироваться» с частотой обновления дисплея, из-за чего анимация начинает дергаться.
• Оптимизация ресурсов: когда вкладка становится неактивной или окно сворачивается, requestAnimationFrame автоматически приостанавливается, снижая нагрузку на CPU и расход энергии. SetInterval обычно продолжает выполняться и может потреблять ресурсы без практической пользы.
• Гибкость и точность: callback requestAnimationFrame получает временную метку (timestamp), которую можно использовать для точного вычисления прогресса анимации. При работе с setInterval время приходится контролировать вручную, поэтому такой подход сложнее и менее надежен.

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

В React 18+ и современных SPA requestAnimationFrame считается стандартным решением для UI-анимаций, например кастомных переходов и анимации canvas. SetInterval иногда используют для задач с фиксированной периодичностью, которые не связаны с визуальным обновлением, — например, для таймеров или опроса данных, но не для плавной анимации.