In-Depth Guide to Web Page Performance: Rendering, Reflow, Repaint, and Optimization Techniques

When a web page responds slowly, consumes excessive CPU and memory, and shows janky animations, users typically abandon it; developers therefore need to understand the causes of poor performance and how to improve it.

The page generation process can be divided into five steps: parsing HTML, constructing the DOM tree, building the CSSOM, performing layout (flow), and painting. The first three steps are usually fast, while layout and paint—collectively called rendering—are the most time‑consuming.

During rendering, two operations may occur: reflow (layout) and repaint. Reflow happens when the geometry of elements changes (e.g., moving an element), and it always triggers a repaint. Repaint occurs when visual styles change without affecting layout (e.g., changing a color). Excessive reflows and repaints are the primary reasons for sluggish pages.

Improving web performance therefore means reducing the frequency and cost of reflows and repaints, ideally batching DOM reads and writes so the browser can process them in a single rendering pass.

Nine practical tips are presented: (1) batch multiple DOM reads or writes together; (2) cache results of layout‑dependent styles; (3) modify classes or cssText instead of individual style properties; (4) use an off‑screen DOM (DocumentFragment or cloneNode) for bulk changes; (5) hide an element (display:none), perform many updates, then show it again; (6) prefer absolute or fixed positioning to limit reflow scope; (7) only make elements visible when necessary, noting that visibility:hidden only triggers repaint; (8) employ virtual‑DOM libraries such as React; (9) use window.requestAnimationFrame or window.requestIdleCallback to schedule work.

Refresh rate (FPS) is crucial for smooth animations: browsers aim for 60 Hz, meaning each frame must finish within about 16.66 ms. Achieving 60 FPS requires that JavaScript tasks on the main thread stay under this budget, or else offload work to Web Workers.

The Chrome DevTools Timeline panel helps diagnose performance issues. By recording a session, developers can view events in “Event Mode” to see which phases (JavaScript, rendering, etc.) consume time, or in “Frame Mode” to examine per‑frame timings and compare them against 30 FPS and 60 FPS reference lines.

window.requestAnimationFrame() lets developers defer write operations to the next repaint, separating them from reads and preventing a flood of reflows. An example shows doubling element heights in a loop, which would otherwise trigger many renders; wrapping the writes in requestAnimationFrame batches them into a single repaint.

window.requestIdleCallback() schedules callbacks to run when the browser has idle time at the end of a frame. It receives a deadline object with timeRemaining() and didTimeout properties, allowing code to perform work only while there is spare time or to enforce a maximum delay. This API is currently supported mainly in Chrome, with polyfills available for other browsers.

References: Domenico De Felice’s “How browsers work”, Stoyan Stefanov’s “Rendering: repaint, reflow/relayout, restyle”, Addy Osmani’s “Improving Web App Performance With the Chrome DevTools Timeline and Profiles”, Tom Wiltzius’s “Jank Busting for Better Rendering Performance”, and Paul Lewis’s “Using requestIdleCallback”.