Если вы хотите анимировать некоторый код, тогда используйте только requestAnimationFrame, если вы хотите выполнить действие только тогда, когда браузеру больше нечего делать, тогда используйте requestIdleCallback.
, чтобы упростить в общем, давайте рассмотрим, что и requestAnimationFrame, и requestIdleCallback являются вызовами setTimeout с аргументами времени ожидания переменных.
requestAnimationFrame будет тогда setTimeout(fn, time_until_next_screen_refresh). fn будет вызвано непосредственно перед тем, как страница будет отображена на экране. В настоящее время это лучший таймер, который мы должны делать для анимации, поскольку он гарантирует, что мы будем делать визуальные изменения только один раз для каждого фактического кадра, со скоростью, которую монитор может отображать, то есть для каждого кадра, если наш код работает быстро. достаточно.
requestIdleCallback будет setTimeout(fn, time_until_idle). fn будет вызван, как только браузеру больше нечего будет делать. Это может быть сразу или через несколько итераций цикла событий.
Так что, хотя у обоих одинаковый API, они предоставляют совершенно разные функции, и единственно приемлемым для создания анимации является requestAnimationFrame, поскольку requestIdleCallback практически не имеет никакой связи с рендерингом.