Mastering Browser Rendering: Repaint, Reflow, and Performance Optimization

Rendering Process

(1) Convert HTML code into a Document Object Model (DOM).

(2) Load and parse CSS files to create a CSS Object Model.

(3) Using the DOM and CSS Object Model, organize visible elements into a render tree, where each render object combines a DOM node with its computed styles, effectively defining each object's appearance.

(4) Compute coordinates for each object in the render tree, defining their positions.

(5) Finally, the elements of the render tree are painted onto the screen.

Repaint

When a style change does not affect an element’s position—such as background-color, border-color, or visibility—the browser simply repaints the element with the new style.

Reflow

The browser performs a reflow when any of the following actions occur:

Adding, removing, or modifying DOM elements, or changing their order.

Content changes, including text edits within form fields.

Changing CSS properties.

Adding or removing style sheets.

Modifying class attributes.

Window operations like resizing or scrolling.

Activating pseudo‑classes (e.g., hover).

Repaint & Reflow Optimization

In practice, DOM manipulations are unavoidable, but to reduce performance costs, follow the principle of minimizing repaint and reflow triggers.

Example of optimized code (combined changes are applied after the script finishes, resulting in a single repaint/reflow):

var $body = $('body');
$body.css('padding', '1px'); // triggers repaint & reflow
$body.css('color', 'red');   // triggers repaint
$body.css('margin', '2px');  // triggers repaint & reflow

Example of inefficient code (reading a property forces the browser to execute pending repaint/reflow before continuing):

var $body = $('body');
$body.css('padding', '1px');
$body.css('padding'); // forces immediate repaint/reflow
$body.css('color', 'red');
$body.css('margin', '2px');