Was verursacht und verursacht keine Repaints/Reflows wenn innerhalb von requestAnimationFrame?

Question

Zum Beispiel, wenn ich etwas tun, wie

requestAnimationFrame(function() { 
    el.appendChild(otherEl) 
    el.appendChild(anotherEl) 
    anotherEl.removeChild(someOtherEl) 
    anotherEl.appendChild(yetAnotherEl) 
}) 

Does, die eine (synchrone?) Verursachen repaint/Reflow während der Zeit geschehen, wenn wir neu streichen/Reflow zu vermeiden, sind versucht, zu verursachen, wodurch der Zweck der Miktion requestAnimationFrame?

Oder wird der Browser schlau sein und warten, bis dieser Rahmen abgeschlossen ist (nachdem alle diese DOM-Manipulationen abgeschlossen sind), um schließlich die resultierende DOM-Struktur zu zeichnen?

Was sind all die Dinge, die Repaints/Reflow-Vorgänge verursachen können und die wir vermeiden möchten, während wir in einem RequestAnimationFrame sind?

Die Liste der Stile in this html5rocks article erwähnen nur Stil, die (ich denke) verursachen Repaint/Reflow, wenn sie geändert werden. Ich bin auch neugierig zu wissen, welche JavaScript-Eigenschaften (und auf welchem ​​Objekt sie sich befinden) Reflow verursachen, wenn auf sie zugegriffen wird (d. H. Reflow passiert, um den Wert einer bestimmten Eigenschaft zu erhalten).

Answer 1

Heißt das, was sie tun (synchron?) Neu aufgebaut während der Zeit passieren, wenn wir Farben zu vermeiden sind versuchen verursachen, wodurch der Zweck der request für ungültig erklären?

Ich verstehe nicht ganz, du bist die erste Frage, aber ich werde versuchen, es trotzdem zu beantworten.

Hinzufügen oder Entfernen von Elementen aus dem DOM löst einen Reflow aus, während requestAnimationFrame eine formale Version des translateZ (0) oder translate3d (0,0,0) Tricks ist, um eine Layer-Erstellung zu erzwingen. In diesem Sinne ist das Auslösen eines Reflow für die Verwendung von rAF irrelevant. Sie haben ein "Repaint" erwähnt, das in der Zeit passiert, in der wir versuchen, Farben zu vermeiden. Ich nehme an, Sie beziehen sich auf die Drosselung, die Sie sowieso implementieren sollten. Lass es mich wissen, wenn ich es nicht richtig beantworte.

Oder wird der Browser smart und warten Sie, bis dieser Rahmen ist abgeschlossen (nach all den DOM-Manipulationen abgeschlossen sind), um schließlich malen die resultierende Struktur DOM?

Da alle Ihre Appends und entfernt in der gleichen rAF Aufruf sind, sollte der Browser (nach meinem Verständnis), um sie malen alle zusammen in einem einzigen Frame.

Was sind all die Dinge, die Bemalungen/Rückflüsse verursachen können, und dass wir würde tun, während in einem request vermeiden wollen?

Repaints werden von allem ausgelöst, was zu einer Änderung der Sichtbarkeit führt, aber das Layout nicht beeinflusst. Durch die Opazität wird kein Repaint ausgelöst, sodass die Animation viel billiger ist.

Reflow beeinflusst das Layout der gesamten Seite oder eines Teils der Seite, wodurch Größe und Positionen der betroffenen Elemente neu berechnet werden und daher in Animationen vermieden werden sollten. Übersetzen, drehen und skalieren, lösen Sie jedoch keinen Reflow aus.

Sie können mehr über diese here lesen und eine Liste der CSS-Eigenschaften, die Layout auslösen und neu streichen.

Schließlich, nur um die letzte Frage zu klären, erscheinen Repaints und Layouts unabhängig davon, ob sie sich innerhalb oder außerhalb eines rAF befinden. Behalte das im Hinterkopf.