Qu'advient-il si nous manipuler le DOM dans requestAnimationFrame?

chaque fois qu'il ya une certaine manipulation du DOM, comme l'insertion d'un élément du DOM entraînerait une redistribution et, plus vraisemblablement, suivie par une mise à jour

La peinture à l'action se produit de manière asynchrone, afin de "déclencher" doit être compris dans ce sens. D'abord votre code JavaScript sera fini avant que la réalité.

si nous parviennent malgré tout à faire une manipulation du DOM à l'intérieur de ce rAF (edit: et aussi une autre file d'attente de la rAF à la fin) qui déclenche une redistribution à chaque fois et donc repeindre, on serait bloqué dans une boucle infinie sans vraiment rendu n'importe quoi sur l'écran.

Les besoins pour repeindre s'accumulent et ne sont pas remplies de manière synchrone. D'abord votre code a remplir jusqu'à ce que la pile des appels est vide. Donc, il n'y a pas de boucle infinie ici.

Ou est-ce le cas qu'une fois que le navigateur a décidé de faire repeindre, il va rester avec elle et appliquer toutes les mises à jour qui s'est passé dans la royal air force de rappel dans le prochain repeindre?

Oui. Lorsque la RAF callback est appelée, que le code obtient une dernière chance de mettre à jour le DOM, ce qui peut s'accumuler davantage les besoins pour la peinture. Si, dans ce rappel vous avez également enregistrer un autre rappel sur la RAF, il n'exécutera pas à l'époque, mais plus tard: à la prochaine fois que le navigateur va préparer son repeindre tâche, afin de ne pas l'actuel.

Exemple simplifié

Disons que vous avez ce code:

requestAnimationFrame(update);

myElement.style.backgroundColor = "silver"; // This queues a need for repaint

function update() {
    // This queues a need for repaint
    myElement.style.width = Math.floor(Math.random() * 100) + "px";
    requestAnimationFrame(update);
}

Lorsque cela s'exécute, nous obtenons la séquence suivante:

1. update est inscrit à titre de rappel
2. Le changement d'arrière-plan des horaires un besoin de repeindre
3. La pile des appels est vide
4. Le navigateur démarre sa repeindre travail, mais prend en compte, il est un rappel enregistré. Afin de supprimer cet enregistrement (parce qu'il doit s'exécuter uniquement une fois) et s'exécute update avant de faire quoi que ce soit.
5. La modification de la largeur des annexes a besoin de repeindre. La liste des changements inclut maintenant le changement d'arrière-plan et cette modification de la largeur et de tout effet de cascade qui a été calculé. (Comment cela est représenté, c'est le navigateur charge)
6. L' update la fonction est inscrit à titre de rappel de nouveau.
7. Le navigateur vérifie maintenant ce qu'il doit faire dans le cadre de cette repeindre travail, et effectue tout ce qui est nécessaire pour visualiser les effets de l'arrière-plan et la largeur des changements.
8. Le travail de peinture se termine. Tout ce qui est à gauche est inscrit update de rappel.
9. Lorsque le navigateur effectue son prochain cycle de peinture, on recommence à partir de l'étape 4, mais maintenant il n'y a pas de file d'attente d'arrière-plan de changement, pas plus. Pour le reste, il sera le même processus.