Understanding Repaint vs Reflow in Browser Rendering

The Critical Rendering Path

Before we dive into repaint and reflow, let's understand the browser's Critical Rendering Path - the sequence of steps browsers take to convert HTML, CSS, and JavaScript into pixels on screen.

1

DOM Construction

2

CSSOM Construction

3

Render Tree

4

Layout

5

Paint

Repaint and reflow occur when the browser needs to update what's displayed on screen after the initial render.

Reflow: The Geometry Shuffle

What is Reflow?

Reflow (also called layout) occurs when the browser must recalculate the position and geometry of elements in the document.

This happens when changes affect the layout of the page, such as:

Changing width/height of an element
Adding or removing visible DOM elements
Changing font size or content that affects text flow
Resizing the window
Calculating offsetHeight or offsetWidth

Reflow is expensive because it often triggers child and ancestor elements to reflow as well (known as layout thrashing).

Visualizing Reflow

// JavaScript triggering reflow:

reflowBox.style.width = '150px';

reflowBox.style.height = '80px';

Repaint: The Color Refresh

What is Repaint?

Repaint occurs when the browser needs to redraw pixels to the screen when elements change visually, but their geometry remains the same.

This happens with changes like:

Changing color or background-color
Changing visibility or opacity
Adding or modifying text
Changing outline or box-shadow

Repaint is generally less expensive than reflow since it doesn't require recalculating element positions, but frequent repaints can still impact performance.

Visualizing Repaint

// JavaScript triggering repaint:

repaintBox.style.backgroundColor = '#f87171';

repaintBox.style.opacity = '0.7';

Performance Implications

The Cost Hierarchy

1

JavaScript > Style > Layout > Paint > Composite

This is the general order of operations with associated costs

2

Reflow is more expensive than repaint

Because reflow may require recalculating positions of many elements

3

Composite-only changes are cheapest

Properties like transform and opacity can skip layout and paint

Optimizing Reflow

Avoid frequent DOM manipulations - batch changes
Use absolute/fixed positioning for complex animations
Use CSS transforms instead of changing width/height
Avoid table layouts - they trigger more reflows

Optimizing Repaint

Use opacity and transforms instead of visibility
Reduce paint areas with will-change property
Layer promotion for frequently changing elements
Debounce rapid visual state changes

Practical Demonstration

Reflow Example

0 reflows

Repaint Example

0 repaints

Performance Comparison

Click both buttons rapidly to see the performance difference

0 reflows

0 repaints

Key Takeaways

Reflow

Occurs when element geometry changes
Triggers recalculation of element positions
More expensive - can affect many elements
Triggered by width/height changes, DOM changes, etc.

Repaint

Occurs when visual changes don't affect layout
Only updates pixel colors on screen
Less expensive than reflow but still costly
Triggered by color, visibility, opacity changes, etc.