QUESTION: Що таке requestAnimationFrame?

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

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

Ще однією найважливішою перевагою requestAnimationFrame є його енергоефективність та турбота про продуктивність системи. Якщо користувач переключається на іншу вкладку браузера або згортає вікно, браузер автоматично призупиняє виконання всіх анімацій, зав'язаних на цей метод. Це дозволяє радикально знизити навантаження на центральний процесор, заощадити заряд батареї на мобільних пристроях та запобігти перегріву заліза, в той час як setInterval продовжував би марно навантажувати систему у фоновому режимі.