Что такое requestAnimationFrame?

Метод requestAnimationFrame представляет собой специализированный программный интерфейс в JavaScript, созданный специально для плавной реализации визуальных анимаций в веб-браузере. Главное его отличие от классического setInterval заключается в том, что он жестко синхронизирован с частотой обновления экрана монитора, которая в большинстве современных дисплеев составляет 60 кадров в секунду (fps), а на продвинутых устройствах может достигать 120 Гц и выше.

Когда вы передаете функцию обратного вызова в requestAnimationFrame, браузер гарантирует, что код анимации выполнится ровно перед очередным перерисовыванием страницы (repaint). Это позволяет избежать таких неприятных эффектов, как подтормаживания, рывки и разрывы кадров (tearing), которые часто возникают при попытке анимировать элементы через фиксированные интервалы времени. Метод возвращает числовой идентификатор запроса, который можно передать в функцию cancelAnimationFrame, если анимацию требуется прервать до ее завершения, например, при закрытии модального окна.

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