Browser Rendering: Reflow and Repaint

Introduction

Reflow and repaint are frequent terms in front‑end development. This article explores their underlying mechanisms by walking through the browser rendering process.

Browser Rendering Process

The browser sends a request, downloads resources, and the rendering engine (illustrated with WebKit) builds the DOM tree, CSSOM tree, combines them into a render tree, performs layout, and finally paints the pixels.

WebKit Main Flow

Render Tree

The render tree is built by traversing visible DOM nodes, applying matching CSS rules, and creating render objects such as RenderInline , RenderBlock , and RenderListItem .

Reflow and Repaint Principles

Each render object has layout (reflow) and paint (repaint) methods. Layout computes geometry (size and position) while paint converts the render tree into screen pixels.

What Is Reflow?

When a render object is added to the render tree, its geometry is unknown. The layout step calculates width, height, and position, constituting a reflow.

Global vs. Incremental Layout

Global layout affects the entire render tree (e.g., font‑size change, window resize). Incremental layout processes only nodes marked as “dirty” and is usually queued as a reflow command.

Triggers for reflow include changes to geometric CSS properties, DOM insertion/removal, reading/writing offset/scroll/client properties, and calling getComputedStyle .

What Is Repaint?

After layout, the browser paints each visible node onto the screen. Repaint is triggered by visual changes such as visibility , outline , or background‑color that do not affect geometry.

Paint Order

Background color

Background image

Border

Children

Outline

Debugging with Performance Tools

Example: clicking a button changes a box width, causing a full layout‑paint‑composite cycle.

const box = document.querySelector('#box');
const btn = document.querySelector('#btn');
btn.addEventListener('click', () => {
  box.style.width = '200px';
});

Changing only the background color skips layout:

box.style.background = '#fof';

Pixel Pipeline

The pipeline consists of JavaScript/CSS → Style calculation → Layout → Paint → Composite. Each stage can be a performance bottleneck.

Reducing Reflow & Repaint

Avoid forced synchronous layout by caching values and minimizing reads of offset/scroll/client properties.

Batch DOM changes using DocumentFragment . let container = document.getElementById('container'); let fragment = document.createDocumentFragment(); for (let i = 0; i < 10; i++) { let li = document.createElement('li'); li.innerHTML = 'li' + i; fragment.appendChild(li); } container.appendChild(fragment);

Enable GPU acceleration by promoting elements to their own compositing layer (e.g., using transform: translateZ(0) or will‑change ).

Using requestAnimationFrame

Schedule visual updates just before the next repaint: window.requestAnimationFrame(() => { // update DOM or styles here });

Using requestIdleCallback

Perform low‑priority work during browser idle periods to avoid blocking critical rendering: window.requestIdleCallback(deadline => { while (deadline.timeRemaining() > 0 && tasks.length) { runTask(tasks.shift()); } });

Other Tips

Prefer transform over top/left for moving elements.

Avoid CSS expressions like calc() when possible.

Use simple class selectors and BEM naming for better selector performance.

Conclusion

By understanding the browser rendering pipeline and the cost of reflow and repaint, developers can apply targeted optimizations—such as reducing layout thrashing, leveraging GPU‑accelerated properties, and using animation frames—to improve front‑end performance.

References

Browser internals, rendering performance guides, and articles on reflow/repaint.