What is the difference between browser reflow and repaint?

Reflow (also called layout) occurs when the browser must recalculate the position and dimensions of elements. It is triggered by changes that affect layout geometry: adding or removing elements, changing width/height/margin/padding/font-size, reading layout properties like offsetWidth in JavaScript. Reflow is expensive because it may cascade through the entire document. Repaint occurs when an element's appearance changes without affecting layout: changing color, background-color, visibility, or outline. Repaints are cheaper than reflows but still cost GPU cycles. Compositing is the cheapest: only transform and opacity changes can be handled entirely by the compositor thread without triggering reflow or repaint on the main thread.