Pourquoi requestAnimationFrame est meilleur que setInterval ou setTimeout

Bien que setInterval et setTimeout puissent être utilisés pour des tâches d'animation, requestAnimationFrame est généralement considéré comme un meilleur choix pour plusieurs raisons.

1. Synchronisation avec le taux de rafraîchissement de l'affichage

requestAnimationFrame synchronise ses rappels avec le taux de rafraîchissement de l'affichage de l'appareil, généralement 60 Hz. Cela signifie que l'animation est mise à jour à une fréquence d'images cohérente, éliminant ainsi la gigue et le saccade qui peuvent survenir avec setInterval ou setTimeout.

2. Consommation de ressources réduite

setInterval et setTimeout appellent leurs rappels à des intervalles spécifiés, même si le navigateur n'effectue pas activement le rendu. Cela peut entraîner une utilisation inutile du processeur et une décharge de la batterie. requestAnimationFrame, en revanche, n'appelle son rappel que lorsque le navigateur est sur le point d'afficher un nouveau cadre, économisant ainsi des ressources.

3. Expérience utilisateur améliorée

Les animations alimentées par requestAnimationFrame semblent plus fluides et plus réactives par rapport à celles utilisant setInterval ou setTimeout. En effet, requestAnimationFrame prend en compte le taux de rafraîchissement de l'appareil et garantit que l'animation s'exécute à un rythme cohérent et visuellement agréable.

4. Disponibilité de Timestamp

requestAnimationFrame fournit un paramètre timestamp à son rappel, qui représente l'heure à laquelle l'image est programmée pour être affichée. Cet horodatage peut être utilisé pour calculer le temps écoulé depuis l'image précédente, permettant un contrôle d'animation plus précis et des transitions fluides.

5. L'élimination du cisaillement et du scintillement

requestAnimationFrame résout les problèmes tels que le cisaillement (positions d'animation incompatibles) et le scintillement (affichage d'une image incomplète) qui peuvent survenir avec setInterval ou setTimeout. En effet, il planifie le rendu de l'image suivante uniquement lorsque l'image actuelle a été entièrement présentée à l'écran.

En résumé, requestAnimationFrame est le choix préféré pour les tâches d'animation en raison de sa synchronisation avec le taux de rafraîchissement de l'affichage, réduit consommation de ressources, expérience utilisateur améliorée, disponibilité des horodatages et élimination du cisaillement et du scintillement.