Exactly. To elaborate on how this works in Gecko. The rendering pipeline has several optional stages: requestAnimationFrame (Scripts) -> Style flush -> Reflow

Exactly. To elaborate on how this works in Gecko. The rendering pipeline has several optional stages: requestAnimationFrame (Scripts) -> Style flush -> Reflow flush -> display list construction -> Layer construction (recycling) -> invalidation -> Paint/Rasterization -> Compositing (on it's own thread). Gecko tries to only run each stage of the pipeline only if they are needed. Fast operations like a CSS transition on an opacity or transform will only activate the Compositing phase. WebGL only canvas drawing will only activate rAF + Compositing. Meanwhile a JS animation on "top" will run all of these phases.