Plusieurs requestAnimationFrame performance
Si je suis en train de faire de multiples animations, est-il acceptable de performance pour ajouter plusieurs requestAnimationFrame rappels? F. ex:
function anim1() {
// animate element 1
}
function anim2() {
// animate element 2
}
function anim3() {
// animate element 3
}
requestAnimationFrame(anim1);
requestAnimationFrame(anim2);
requestAnimationFrame(anim3);
Ou est-il prouvé pire qu'à l'aide d'un simple rappel:
(function anim() {
requestAnimationFrame(anim);
anim1();
anim2();
anim3();
}());
je demande parce que je ne sais pas vraiment ce qui se passe dans les coulisses, est requestAnimationFrame faire la queue quand vous l'appelez plusieurs fois?
2 réponses
vous ne devriez utiliser qu'un seul requestAnimationFrame appel que les appels à requestAnimationFrame faire de la pile. La version single callback est donc plus performante.
le requestAnimationFrame lie un appel de fonction et renvoie le frameID. Demander plusieurs trames N'est pas la même chose que d'ajouter plusieurs écouteurs d'événements à un événement - chacune de vos fonctions est appelée dans un autre trame. Ainsi, si vous demandez plusieurs cadres de façon continue (chaque fonction se rappelle récursivement), vous perdez l'avantage que toutes les mises à jour sont rendues dans un seul cadre. Donc, même s'il y a un framerate élevé les animations peuvent ne pas avoir l'air si lisse.
mais: vous pouvez seulement utilisez cancelAnimationFrame (frameID) pour toutes les méthodes et peut avoir besoin d'un code supplémentaire pour annuler les animations simples