How Repaints and Reflows Impact Web Performance—and How to Minimize Them

Repaints and reflows are crucial browser rendering actions that significantly affect frontend performance.

Repaint occurs when an element’s visual appearance changes, such as visibility or background color. Reflow (layout) happens when the browser must recalculate the positions and sizes of elements, for example after changing an element’s width, height, or content; a reflow always triggers a repaint.

Operations that cause reflow include:

Changing an element’s geometric properties (width, height, etc.), which forces the browser to recompute layout for the element and all of its descendants.

Modifying the DOM tree structure, such as adding, removing, or moving nodes. Inserting a node at the top of the body forces a full page reflow, while inserting at the bottom does not affect earlier elements.

Reading layout‑dependent properties, because the browser must ensure the values are up‑to‑date. These properties include offsetTop, offsetLeft, offsetWidth, offsetHeight, scrollTop, scrollLeft, scrollWidth, scrollHeight, clientTop, clientLeft, clientWidth, clientHeight, and the function getComputedStyle().

Ways to reduce the performance cost of repaints and reflows:

Batch style changes into a single operation.

// bad
var test = document.getElementById('test');
test.style.color = '#000';
test.style.background = '#111';

// good
.test {
  background: #111;
  color: #000;
}
document.getElementById('test').className = 'test';

Use absolute or fixed positioning when layout permits, so the element is removed from the normal flow and its changes do not affect other elements.

Combine multiple DOM manipulations into one, for example by using a DocumentFragment.

// bad
for (var i = 0; i < 10; i++) {
  $("#test").append('hi');
}

// good
var frag = document.createDocumentFragment();
var str = '';
for (var i = 0; i < 10; i++) {
  str += 'hi';
}
frag.innerHTML = str;
document.getElementById('test').appendChild(frag);

Temporarily set display:none on elements that will be heavily manipulated, then show them after the work is done.

Cache frequently accessed layout properties in variables instead of reading them repeatedly.

// bad
var a = document.body.scrollTop + 1;
var b = document.body.scrollTop + 2;

// good
var top = document.body.scrollTop;
var a = top + 1;
var b = top + 2;