Reflow and Repaint: Causes and How to Avoid Them

What are Reflow and Repaint?

Reflow and Repaint are two processes that occur in browser when DOM or CSS changes. These processes affect performance, so it's important to understand when and how they occur to minimize them.

Reflow (also known as "layout")

Reflow occurs when element sizes or positions on page change. This process forces browser to recalculate not only changed element's position, but also positions of all other elements that may be affected by changes (e.g., due to container size change).

When Reflow occurs, browser recalculates coordinates and sizes of all elements, which can be expensive, especially on complex pages.

Repaint (also known as "paint")

Repaint occurs when element styles that don't affect its position on page change (e.g., background color, font, border, etc.). Unlike Reflow, Repaint doesn't require recalculating other elements' positions, only updates visual representation of specific element.

When Do Reflow and Repaint Occur?

When Reflow Occurs:

Reflow occurs in following cases:

1. Element size change:

   • Changing width, height, margin, padding and other properties.
   • Example: changing block width or increasing content height.

2. Document structure change:

   • Adding, removing or changing elements in DOM.
   • Example: inserting new element or removing existing element.

3. Element position change:

   • Changing position, top, left, right, bottom, z-index properties.
   • Example: changing position of element with absolute or relative positioning.

4. Font or font size change:

   • Changing font styles, e.g., font-size, font-family, line-height.
   • Example: changing text size in block.

5. Element visibility or display change:

   • Changing display (e.g., from none to block or vice versa).
   • Example: hiding or showing elements.

6. Animations and transformations:

   • Although animations such as transform don't always cause Reflow, if animation changes layout, it can cause Reflow.

When Repaint Occurs:

Repaint occurs in following cases:

1. Color or style change:

   • Changing color, background-color, border, box-shadow and other styles that don't affect size or position.
   • Example: changing element background color or text.

2. Opacity change:

   • Changing opacity doesn't affect layout, but causes Repaint to update display.
   • Example: decreasing element opacity.

3. Background addition and change:

   • Changing background-image, background-position, background-size and other background-related properties.
   • Example: changing background image or its position.

4. Fonts and text styles:

   • Changing font-family, font-size, line-height, letter-spacing, if it doesn't affect positioning.
   • Example: changing letter spacing (letter-spacing).

5. Border style change:

   • Changing element border color or width, if it doesn't affect its sizes.
   • Example: changing block border color or thickness.

How to Minimize Reflow and Repaint?

Reflow and Repaint can slow down page rendering, especially if they occur frequently or for large elements. Here are some tips to minimize them:

1. Minimize DOM changes:

   • Avoid frequent DOM structure changes, as this always causes Reflow.
   • Try to group DOM changes in one cycle, rather than calling them one by one.

2. Use requestAnimationFrame:

   • Use requestAnimationFrame to synchronize visual changes with screen repaint to avoid unnecessary repaints.

3. Use CSS transformations instead of size changes:

   • If possible, use transform and opacity for animation instead of changing sizes or position to avoid Reflow.
   • Example: using transform: translate() instead of changing top and left.

4. Use document fragments:

   • When adding multiple elements to DOM, use Document Fragment to prevent multiple Reflow calls.

5. Hide elements before changing their sizes:

   • If you want to change element size or position, hide them first, change parameters, then show back. This prevents unnecessary Reflow during process.

6. Using will-change:

   • Use will-change property to indicate to browser in advance which elements will change. This helps browser optimize rendering.