What does and doesn't cause repaints/reflows 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 that cause a (synchronous?) repaint/reflow to happen during the time when we're trying to avoid causing repaint/reflow, thus voiding the purpose of requestAnimationFrame?

Or, will the browser be smart and wait until after that frame is complete (after all those DOM manipulations are complete) in order to finally paint the resulting DOM structure?

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

The list of styles in this html5rocks article mention only style that (I think) cause repaint/reflow when they are modified. I'm also curious to know which JavaScript properties (and on which object they are on) cause reflow when being accessed (i.e. reflow happens in order to be able to get the value of a certain property).

Answer 1

Does that cause a (synchronous?) repaint to happen during the time when we're trying to avoid causing paints, thus voiding the purpose of requestAnimationFrame?

I don't quite understand you're first question but I'll try to answer it anyway.

Adding or removing elements from the DOM triggers a reflow, whilst requestAnimationFrame is a formal version of the translateZ(0) or translate3d(0,0,0) trick to force a layer creation. In that sense, triggering a reflow is irrelevant to using rAF. You mentioned a "repaint to happen during the time when we're trying to avoid causing paints" which I assume you're referring to throttling which you should be implementing anyway. Let me know if I didn't answer it properly.

Or, will the browser be smart and wait until after that frame is complete (after all those DOM manipulations are complete) in order to finally paint the resulting DOM structure?

Given that all your appends and removes are in the same rAF call, the browser (to my understanding) should paint them all together in a single frame.

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

Repaints are triggered by anything which causes a change in the visibility but does not affect the layout. Opacity doesn't trigger a repaint so it's much cheaper to animate.

Reflow affects the layout of the whole or a portion of the page causing the size and positions of the affected elements to be recalculated and should therefore be avoided in animations. Translate, rotate and scale however don't trigger reflow.

You can read more about this here and get a list of the css properties which trigger layout and repaint.

Lastly just to clear up that last question, repaints and layouts occur whether or not they're inside or outside of a rAF. Just keep that in mind.