How to Reduce Reflows and Repaints in CSS

When building modern web applications, performance is not only about JavaScript execution or server speed. A major hidden factor affecting smooth user experience is how the browser handles reflows and repaints.

If your website feels laggy during scrolling, animations stutter, or interactions delay slightly, there’s a high chance that excessive reflows or repaints are happening in the background.

Understanding and optimizing these rendering processes is essential for building fast, responsive websites.

What Are Reflows and Repaints?

Before fixing them, you need to understand what they actually mean.

Reflow (Layout Recalculation)

A reflow happens when the browser recalculates the position and geometry of elements on the page.

It occurs when something affects layout, such as:

• Changing width or height
• Modifying font size
• Adding/removing elements
• Changing margins or padding
• Resizing the window

Reflow is expensive because the browser may need to recalculate the layout of many elements.

Repaint

A repaint happens when the browser redraws elements visually without changing layout.

It occurs when:

• Changing background color
• Changing text color
• Modifying visibility styles
• Applying shadows or outlines

Repaints are less expensive than reflows, but frequent repaints still degrade performance.

Why Reflows and Repaints Matter

Every modern browser follows a rendering pipeline:

1. Parse HTML → DOM
2. Parse CSS → CSSOM
3. Combine → Render Tree
4. Layout → Reflow
5. Paint → Repaint
6. Composite → Display

When reflows and repaints happen frequently:

• Frame rate drops
• Animations stutter
• Scroll becomes laggy
• CPU usage increases
• Battery drains faster on mobile

This directly impacts user experience and Core Web Vitals.

Common Causes of Reflows

1. Changing Layout Properties

Any change to geometry triggers reflow:

width height margin padding top left display

Example:

element.style.width = "300px";

This forces the browser to recalculate layout.

2. Reading Layout Properties Repeatedly

Accessing properties like:

offsetHeight offsetWidth getBoundingClientRect()

inside loops can trigger repeated reflows.

Bad example:

for (let i = 0; i < items.length; i++) {  console.log(items[i].offsetHeight); }

3. DOM Manipulation in Loops

Adding elements one by one causes multiple layout recalculations.

for (let i = 0; i < 100; i++) {  document.body.appendChild(div); }

4. Window Resize Events

Resizing triggers automatic recalculation of layout.

Common Causes of Repaints

1. Changing Visual Styles

These trigger repaint:

color background-color visibility box-shadow outline

Example:

element.style.backgroundColor = "red";

2. Hover Effects

Frequent hover transitions can cause repeated repaints if not optimized.

3. Animating Non-Optimized Properties

Animating properties like width or top causes both reflow and repaint.

How to Reduce Reflows and Repaints

Now let's focus on practical optimization strategies.

1. Avoid Layout-Thrashing (Most Important Fix)

Layout thrashing happens when you mix read and write operations.

Bad example:

element.style.width = "200px"; console.log(element.offsetWidth); element.style.width = "300px"; console.log(element.offsetWidth);

Each read forces the browser to recalculate layout.

Fix:

Group reads and writes separately:

const width = element.offsetWidth; element.style.width = "300px";

2. Use transform Instead of Layout Properties

Instead of animating:

left: 100px; top: 100px;

Use:

transform: translateX(100px);

Why?

• transform does NOT trigger reflow
• It is GPU-accelerated
• Much smoother performance

3. Use opacity for Visual Transitions

Instead of toggling visibility using layout-heavy properties:

display: none;

Prefer:

opacity: 0;

This avoids layout recalculation.

4. Batch DOM Updates

Bad:

for (let i = 0; i < 1000; i++) {  document.body.innerHTML += "<div></div>"; }

Good:

let html = ""; for (let i = 0; i < 1000; i++) {  html += "<div></div>"; } document.body.innerHTML = html;

Or better:

const fragment = document.createDocumentFragment();

This reduces multiple reflows into a single update.

5. Avoid Forcing Layout Reads

Avoid repeatedly accessing:

• offsetHeight
• offsetWidth
• scrollTop

Instead cache values:

const height = element.offsetHeight;

6. Minimize DOM Size

Large DOM trees increase reflow cost.

Best practices:

• Remove unnecessary elements
• Avoid deep nesting
• Use virtual rendering for large lists

7. Use CSS Containment

CSS containment isolates layout calculations:

.container {  contain: layout paint; }

This prevents changes from affecting the entire page.

8. Optimize Animations with will-change

For frequently animated elements:

.box {  will-change: transform, opacity; }

This hints the browser to optimize rendering.

Use sparingly.

9. Avoid Expensive CSS Properties

Some properties are more expensive than others:

High-cost:

• box-shadow
• filter
• border-radius (on large elements)

Use carefully in animations.

10. Use Debouncing for Events

Resize or scroll events can trigger frequent reflows.

Bad:

window.addEventListener("resize", handler);

Better:

window.addEventListener("resize", debounce(handler, 200));

This reduces unnecessary recalculations.

How Browsers Handle Rendering

Understanding the pipeline helps optimize better:

1. DOM creation
2. CSS parsing
3. Layout (reflow)
4. Paint (repaint)
5. Composite layers

Any change to layout or style may restart parts of this process.

Real-World Example

Imagine a dashboard showing live analytics:

Without optimization:

• Every data update recalculates layout
• Charts lag
• UI becomes unresponsive

With optimization:

• Only necessary elements update
• Smooth transitions
• Stable frame rate

Best Practices Summary

To reduce reflows and repaints:

• Avoid layout changes in loops
• Use transform instead of position changes
• Batch DOM updates
• Cache layout values
• Reduce DOM size
• Use CSS containment
• Optimize event handling
• Prefer GPU-accelerated properties

Final Thoughts

Reflows and repaints are silent performance killers in modern web applications. Unlike JavaScript errors, they don’t break your code—but they slowly degrade user experience.

By understanding how the browser renders pages and applying small optimizations consistently, you can dramatically improve performance.

Smooth websites don’t happen by accident—they are carefully engineered with rendering behavior in mind.

If you optimize reflows and repaints properly, your applications will feel faster, smoother, and more professional to users.