("Rework" isn't a browser term — the two real concepts are reflow and repaint, and the third tier is composite.)

Reflow (a.k.a. Layout)

The browser recalculates the geometry of elements — their position and size — and where everything sits in the layout. It's triggered by anything that changes layout:

• Changing width, height, margin, padding, border, top/left, display, font-size.
• Adding/removing/resizing DOM nodes.
• Changing the window size.
• Reading layout properties (offsetHeight, getBoundingClientRect, scrollTop) — can force a synchronous reflow.

Reflow is expensive — it can cascade: changing one element's size shifts its siblings, its parent, its children. And a reflow always triggers a repaint afterward (new geometry must be redrawn).

Repaint

The browser redraws pixels — but geometry stays the same. Triggered by visual-only changes:

• color, background-color, visibility, box-shadow, outline, border-color.

A repaint is cheaper than a reflow because the layout is already known — it's "fill in different pixels in the same boxes." A repaint does NOT trigger a reflow.

The hierarchy (cost, cheap → expensive)

Composite only  <  Repaint  <  Reflow (+ repaint)

• Composite-only — transform and opacity can be handled by the GPU at the composite stage, skipping both layout and paint. That's why they're the properties you animate.
• Repaint — paint stage only.
• Reflow — layout stage, then paint, then composite. The full pipeline.

Optimizing

• Animate transform/opacity, not top/left/width/height.
• Batch DOM reads and writes — interleaving them ("read, write, read, write") causes layout thrashing: each read forces a synchronous reflow to get a fresh value. Read all, then write all.
• Minimize layout-affecting changes in hot paths; change a class once instead of many inline styles.
• Use will-change sparingly to hint the browser to promote an element to its own layer.

The framing

"Reflow — or layout — is the browser recalculating element geometry: positions and sizes. Repaint is redrawing pixels when geometry hasn't changed — like a color change. Reflow is more expensive and always forces a repaint after it; a repaint alone never causes a reflow. Below both is composite-only: transform and opacity go straight to the GPU, skipping layout and paint entirely — which is why you animate those. The classic mistake that triggers excess reflow is layout thrashing: interleaving DOM reads and writes so each read forces a synchronous layout."