10 Proven Ways to Reduce Reflows and Boost Web Performance

Large page loads make performance optimization essential; smoother web apps improve user experience and traffic. Before optimizing, understand two browser rendering terms: Repaint and Reflow.

Repaint : occurs when visibility changes without affecting layout (e.g., opacity, background‑color, visibility, outline). The browser must check all nodes' visibility, making it costly.

Reflow : a more destructive operation that forces the browser to recalculate positions and sizes of all elements, often triggered by changes to an element that affect its children, parents, or siblings.

Both operations block the browser process and can even slow JavaScript execution. Common scenarios that trigger reflow include adding/removing/modifying visible DOM elements, changing CSS that affects layout (e.g., width), CSS3 animations/transitions, reading offsetWidth/offsetHeight, and user interactions such as hover, input, resize, or font changes.

Best‑practice layout tips

Avoid inline styles and table layouts. Inline styles cause an extra reflow after HTML download, and table parsing requires heavy size calculations; using table-layout: fixed can mitigate some cost.

Flexbox can also incur performance loss because flex items may change position and size after page load.

Simplify CSS

Fewer styles mean faster reflows; avoid overly complex selectors, especially when using frameworks like Bootstrap. Tools such as Unused CSS, uCSS, grunt‑uncss, and gulp‑uncss can remove unused rules.

Simplify DOM hierarchy

Reduce the depth and number of nodes; fewer levels and elements speed up reflows. If older browsers are not a concern, eliminate unnecessary wrapper elements.

Fine‑grained DOM operations

Operate on the DOM in as small a granularity as possible to limit the impact of local changes on the whole page.

Remove complex animations from document flow

Place animated elements outside the normal flow using position: absolute or fixed, which creates a new layer that does not affect other elements.

Use hidden elements wisely

Elements with display:none do not trigger repaint or reflow, allowing style changes to be applied off‑screen before making them visible.

Batch DOM updates

Updating many elements individually triggers multiple reflows; batch updates into a single operation. Example code that causes three reflows:

var myelement = document.getElementById('myelement'); myelement.width = '100px'; myelement.height = '200px'; myelement.style.margin = '10px';

Refactor to a single reflow:

var myelement = document.getElementById('myelement'); myelement.classList.add('newstyles'); /* newstyles { width:100px; height:200px; margin:10px; } */

Similarly, when building a list, use a DocumentFragment to construct all li elements in memory and append the fragment once, avoiding repeated reflows.

var frag = document.createDocumentFragment(); var ul = frag.appendChild(document.createElement('ul')); for (var i=1;i<=3;i++) { var li = ul.appendChild(document.createElement('li')); li.textContent = 'item ' + i; } document.body.appendChild(frag);

Constrain element changes

Design components to minimize cascading layout changes, e.g., give tab panels a fixed height to avoid reflow on content switch.

Balance smoothness and performance

Moving an element one pixel per frame looks smooth but may strain low‑end devices; moving four pixels reduces frame rate slightly but eases performance pressure.

Analyze repaints with developer tools

Modern browsers provide timeline panels (Chrome/Edge Blink, Firefox) that highlight repaint and reflow events in green, helping identify costly operations.

Source: w3cplus – 南北（@ping4god） URL: http://www.w3cplus.com/performance/10-ways-minimize-reflows-improve-performance.html