How to Boost Web Page Performance: Master Reflow, Repaint, and Rendering

Have you ever encountered a painfully slow web page that consumes excessive CPU and memory, causing stutter and choppy animations? Most users will abandon such pages, so developers need to understand and fix the underlying performance problems.

The page rendering process consists of five steps:

HTML code is transformed into the DOM. CSS code is transformed into the CSSOM. The DOM and CSSOM are combined to create a render tree containing visual information for each node. A layout (also called flow) is generated, performing planar composition of all render‑tree nodes. The layout is painted onto the screen.

The first three steps are fast; the heavy work lies in layout and paint, which together are referred to as "render".

During page generation and later user interaction, the browser may need to re‑render. Re‑rendering occurs when any of the following happen:

Modifying the DOM. Changing style sheets. User events such as mouse hover, scrolling, typing, or resizing.

Re‑rendering requires a new layout (reflow) and a new paint (repaint). A repaint does not always need a reflow—for example, changing an element’s color triggers only a repaint—whereas a reflow always triggers a repaint, such as when moving an element.

Reflows and repaints are the main cause of poor page performance because they are resource‑intensive. Reducing their frequency and cost is key to faster pages.

General rules:

Simpler style sheets lead to faster reflows and repaints. Deeper DOM hierarchies increase the cost of reflow/repaint. Table elements are more expensive to reflow/repaint than divs.

Nine Practical Performance Tips

1. Batch multiple DOM reads together and batch multiple writes together; avoid interleaving reads and writes.

2. Cache values that require a reflow, so subsequent uses do not trigger another reflow.

3. Change styles in bulk by modifying a class or the cssText property instead of setting many individual style properties.

div.style.cssText += " left: " + left + "px; top: " + top + "px;";

4. Use an offline DOM (e.g., DocumentFragment or cloneNode()) to make changes, then insert the fragment into the live DOM.

5. Set an element to display:none, perform many operations, then restore visibility; this reduces reflows to just two.

6. Position elements with position:absolute or position:fixed to limit reflow impact.

7. Keep elements hidden (e.g., visibility:hidden) until they must be shown; hidden elements only cause repaints, not reflows.

8. Use virtual‑DOM libraries such as React to minimise direct DOM manipulation.

9. Schedule read/write work with window.requestAnimationFrame() and window.requestIdleCallback() to align with the browser’s rendering cycle.

Refresh Rate and Frame Timing

Web animations require 30–60 FPS for smoothness; 60 FPS means each frame must finish within 16.66 ms. Achieving this often means keeping JavaScript tasks under 16 ms or offloading work to Web Workers.

The Chrome DevTools Timeline panel helps diagnose performance issues. In Event Mode, colors indicate different phases: blue for network/HTML parsing, yellow for JavaScript execution, purple for style calculation/layout (reflow), and green for repaint. In Frame Mode, each vertical bar shows the time spent per frame; lower bars are better, and reference lines mark 60 FPS and 30 FPS thresholds.

Using requestAnimationFrame()

This method defers write operations to the next repaint, preventing immediate reflows caused by interleaved reads and writes.

function doubleHeight(element) {
  var currentHeight = element.clientHeight;
  window.requestAnimationFrame(function() {
    element.style.height = (currentHeight * 2) + 'px';
  });
}
elements.forEach(doubleHeight);

For scroll handling, wrap the logic in requestAnimationFrame to run it at the optimal time.

$(window).on('scroll', function() {
  requestAnimationFrame(scrollHandler);
});

A simple rotation animation can be driven by repeatedly calling requestAnimationFrame:

var rAF = window.requestAnimationFrame;
var degrees = 0;
function update() {
  div.style.transform = "rotate(" + degrees + "deg)";
  console.log('updated to degrees ' + degrees);
  degrees += 1;
  rAF(update);
}
rAF(update);

Using requestIdleCallback()

This newer API runs callbacks only when the current frame has idle time (<16.66 ms remaining). It can also accept a timeout to force execution after a given period.

requestIdleCallback(fn);
requestIdleCallback(fn, 5000);

The callback receives a deadline object with timeRemaining() (milliseconds left in the frame) and didTimeout (whether the timeout expired). Typical usage loops while time remains, performing small chunks of work, and reschedules itself if more work remains.

function myNonEssentialWork(deadline) {
  while ((deadline.timeRemaining() > 0 || deadline.didTimeout) && tasks.length > 0) {
    doWorkIfNeeded();
  }
  if (tasks.length > 0) {
    requestIdleCallback(myNonEssentialWork);
  }
}
requestIdleCallback(myNonEssentialWork, 5000);

Currently only Chrome implements requestIdleCallback, but polyfills exist for other browsers.

References

Domenico De Felice, "How browsers work"

Stoyan Stefanov, "Rendering: repaint, reflow/relayout, restyle"

Addy Osmani, "Improving Web App Performance With the Chrome DevTools Timeline and Profiles"

Tom Wiltzius, "Jank Busting for Better Rendering Performance"

Paul Lewis, "Using requestIdleCallback"

(End)