Rendering Performance

Rendering performance affects how smooth and responsive interfaces feel during interaction.

01 — Purpose

Smooth, responsive interfaces

Rendering performance affects how smooth and responsive interfaces feel — interfaces should remain stable and responsive during interaction.

Users notice jank, stutter, and frozen inputs long before they open DevTools. Rendering performance is the difference between an interface that feels instant and one that fights back on every scroll or tap.

See JavaScript cost and hydration costs for main-thread work that often causes rendering pain.

02 — Principles

Stable during interaction

Smooth interaction is part of usability.

  • minimise layout recalculation — batch reads and writes to the DOM
  • reduce DOM complexity — fewer nodes, shallower trees where possible
  • animate efficiently — prefer transform and opacity over layout properties
  • avoid unnecessary re-rendering — update only what changed

03 — Practice

Common problems and good practice

Layout thrashing, excessive repainting, heavy DOM updates, and animation jank.

  • avoid layout thrashing — read layout properties, then write, in separate frames
  • use requestAnimationFrame for visual updates tied to scroll or animation
  • virtualise long lists — render visible rows, not thousands of DOM nodes
  • debounce or throttle expensive handlers — search, resize, scroll listeners
  • profile with Performance panel — find long tasks blocking the main thread

04 — Avoid

Rendering anti-patterns

Heavy DOM work on every interaction destroys INP and user confidence.

  • layout thrashing — alternating read/write of offsetHeight, scrollTop, etc.
  • excessive repainting — animating width, height, top, left on large surfaces
  • heavy DOM updates — re-rendering entire lists on minor state changes
  • animation jank — JavaScript-driven layout animation at 60fps without GPU-friendly properties
  • synchronous work in event handlers — parsing, sorting, or filtering large datasets on click

05 — Close

Responsiveness is a feature

Users judge quality by how the interface feels under their fingers.

Test on a mid-range phone with CPU throttling. Scroll, filter, and type through critical flows. If the UI stutters, trace long tasks and layout cost — then measure INP before and after fixes.

See Core Web Vitals, JavaScript cost, and accessible motion for animation that does not harm responsiveness.