What does repaints / reflows do and do not when inside requestAnimationFrame?

Question

For example, if I do something like

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

Does this cause (synchronous?) Redrawing / replanning during the time when we try to avoid redrawing / reflow, thereby invalidating the target requestAnimationFrame?

Or, will the browser be smarter and wait until this frame is complete (after all these DOM manipulations have been completed) to finally draw the resulting DOM structure?

What are all the things that repaints / reflows can cause and what we would like to avoid doing while inside the requestAnimationFrame?

The list of styles in this html5rocks article only mentions the style that (I think) causes repaint / reflow when they change. I’m also interested in knowing which JavaScript properties (and what object they are on) cause re-layout when it is accessed (for example, an overflow occurs in order to be able to get the value of a certain property).

Answer 1

Because of this, does (synchronous?) Repainting occur during the time when we try to avoid applying paints, thereby requestAnimationFrame?

I do not quite understand that you are the first question, but I will try to answer anyway.

DOM , requestAnimationFrame translateZ (0) translate3d (0,0,0) . rAF. , " , ", , , , . , .

, , ( DOM), , DOM?

, rAF, ( ) .

, repaints/reflows, requestAnimationFrame?

- -, , . , .

Reflow , , . , , .

css, .

, , , , rAF. .