What is the difference between reflow and repaint

A repaint occurs when changes are made which affect the visibility of an element, but not its layout. Examples of this include outline, visibility, or background color. A reflow involves changes that affect the layout of a portion of the page (or the whole page). Resizing the browser window, changing the font, content changing (such as user typing text), using JavaScript methods involving computed styles, adding or removing elements from the DOM, and changing an element's classes are a few of the things that can trigger reflow. Reflow of an element causes the subsequent reflow of all child and ancestor elements as well as any elements following it in the DOM.

Practical Code Example

// Reflow vs Repaint:
// 1. Reflow (Layout recalculation): Changes to geometry (width, height, display)
element.style.width = '200px'; // Triggers Reflow + Repaint (expensive!)

// 2. Repaint: Visual changes that do not affect layout geometry (color, background)
element.style.color = 'blue';  // Triggers Repaint only (faster)