Ce se întâmplă dacă ne manipula DOM în requestAnimationFrame?

ori de câte ori este unii DOM manipulare cum ar fi introducerea unui element de DOM-ar declanșa un reflow si cel mai probabil urmat de un vopsi

Pictura acțiune are loc în mod asincron, astfel încât "trigger" ar trebui să fie înțeleasă în acest fel. Primul cod JavaScript va termina înainte să se întâmple asta.

dacă am reuși cumva să facă o manipulare DOM în interiorul acestui rAF (edit: și, de asemenea, o altă coadă rAF la sfârșitul anului) care declanșează un reflow de fiecare dată și, astfel, o vopsi din nou, ne-ar fi blocat într-o buclă fără a face de fapt nimic pe ecran.

Care are nevoie pentru a vopsi din nou se acumulează și nu sunt sincron îndeplinite. În primul rând codul dvs. trebuie să completeze, până la apel stiva este goală. Deci, nu există nici o buclă infinită aici.

Sau este cazul în care odată ce browser-ul a decis să facă o vopsi, se va lipi cu ea și se aplică toate actualizările care s-a întâmplat în RAF de apel invers, în următorii vopsi?

Da. Când RAF de apel invers este numit, codul devine o ultimă șansă de a face update la DOM, care se pot acumula în continuare nevoie pentru pictura. În cazul în care callback vă înregistra, de asemenea, un alt apel invers pe RAF, acesta nu va executa la acel moment, dar mai târziu: la următoarea dată că browser-ul va pregăti vopsi sarcina ... deci nu cel actual.

Exemplu simplificat

Să presupunem că aveți acest cod:

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

Când se execută, vom obține următoarea secvență:

1. update este înregistrat ca callback
2. Schimbarea de fond programe nevoie de revopsire
3. La callstack devine gol
4. Browser-ul începe sa vopsi din nou loc de muncă, dar ia în considerare nu este înregistrat de apel invers. Deci se elimină această înregistrare (pentru că ar trebui să rula doar o singură dată) și execută update înainte de a face orice altceva.
5. Lățimea schimba programele nevoie de revopsire. Lista de modificări include acum schimbarea de fond și această schimbare latime si orice efect de cascadă, care a fost calculat. (Cum este reprezentată este browser-dependente)
6. La update funcția este înregistrată drept de apel invers din nou.
7. Browser-ul verifică acum ce trebuie să facă, ca parte a acestui vopsi din nou loc de muncă, și de a efectua tot ceea ce este necesar pentru a vizualiza efectele de fundal și lățimea modificări.
8. Vopsea de locuri de muncă se încheie. Tot ce rămâne este înregistrat update apel invers.
9. Atunci când browser-ul îndeplinește următoarele vopsea ciclu, vom începe din nou de la pasul 4, dar acum nu există nici un fundal în coadă-de a schimba orice mai mult. Pentru restul va fi același proces.