Che cosa succede se abbiamo manipolare il DOM in requestAnimationFrame?

ogni volta che c'è qualche DOM manipolazione come l'inserimento di un elemento DOM innescherebbe un reflow e probabilmente seguita da un ridisegno

La pittura d'azione viene eseguita in modo asincrono, in modo da "trigger" deve essere intesa in questo modo. Prima il codice JavaScript finirà prima che realmente accade.

se abbiamo in qualche modo riesci a fare una DOM manipolazione all'interno di questo rAF (edit: e anche la coda di un altro rAF alla fine) che innesca un riflusso ogni volta, e quindi un ridisegno, si sarebbe bloccato in un ciclo infinito senza rendering in realtà nulla sullo schermo.

La necessità di ridisegno accumulano e non sono soddisfatte in modo sincrono. Prima il codice è completo fino a quando la chiamata pila è vuota. Quindi non c'è nessun ciclo infinito qui.

O è il caso che una volta che il browser ha deciso di fare un repaint, si bastone con esso e applicare tutti gli aggiornamenti che è successo nella RAF richiamata nel prossimo riverniciare?

Sì. Quando la RAF callback viene chiamata, che il codice viene un'ultima possibilità per fare gli aggiornamenti del DOM, che possono accumulare ulteriori esigenze per la pittura. Se nella richiamata registrare anche un altro callback su RAF, non eseguirà in quel momento, ma in seguito: alla prossima volta che il browser preparerà il proprio riverniciare compito-così non quella attuale.

Esempio semplificato

Diciamo che hanno questo codice:

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);
}

Quando si esegue, si ottiene la seguente sequenza:

1. update è registrato come callback
2. Lo sfondo modificare le pianificazioni un bisogno di riverniciatura
3. Lo stack di chiamate diventa vuota
4. Il browser inizia a ridipingere di lavoro, ma che tiene conto non c'è un marchio registrato di callback. Così si rimuove questa registrazione (perché si deve eseguire solo una volta) e lo esegue update prima di fare qualsiasi cosa.
5. La larghezza di modificare le pianificazioni un bisogno di riverniciatura. L'elenco dei cambiamenti di ora include lo sfondo cambia e questo cambio di larghezza e qualsiasi effetto a cascata che è stato calcolato. (Come viene rappresentato è dipendente dal browser)
6. Il update la funzione è registrato come richiamata di nuovo.
7. Il browser controlla ora cosa si deve fare come parte di questo repaint di lavoro, ed esegue tutto ciò che è necessario per visualizzare gli effetti di sfondo e le variazioni di larghezza.
8. Il lavoro di vernice estremità. Tutto ciò che è a sinistra è registrato update richiamata.
9. Quando il browser esegue la successiva verniciatura, si ricomincia dal punto 4, ma ora non c'è in coda di sfondo cambia più. Per il resto sarà la stessa del processo.