← Back to the Blog Home
post's image

Daily Comparison #11: Repaint vs. Reflow - Performance

Ghost wrote 2 months ago (Apr 21, 2025) with 76👁️ | 5 mins read

Welcome back to the Daily Comparison! For our eleventh installment, we're diving into the inner workings of web browsers to understand two critical concepts related to rendering performance: Repaint and Reflow (sometimes also called Layout). Knowing the difference between these and what triggers them can significantly help you optimize your web applications for speed and a smoother user experience.

Reflow (Layout)

What it is:

Reflow is the process where the browser calculates the position and size of all the elements on a webpage. It essentially determines the geometry of the layout. When a reflow happens, the browser needs to re-calculate the dimensions and positioning of the elements in the document. This can be a computationally expensive operation, especially for complex layouts.

What Triggers a Reflow?

Many changes to the DOM can trigger a reflow, including:

  • Resizing the browser window: This changes the viewport dimensions.
  • Changing the font: Different fonts can have different sizes and spacing.
  • Changing the font size: Obviously affects the dimensions of text elements.
  • Adding, removing, or updating DOM elements: This can shift the layout of other elements.
  • Changing the content of an element: Text changes can affect the element's size.
  • Changing CSS properties: Properties that affect the layout, such as:
    • width, height
    • margin, padding
    • border
    • display (none, block, inline-block, etc.)
    • position (static, relative, absolute, fixed)
    • float, clear
    • Properties that affect scrolling (e.g., overflow)
  • Scrolling: Can sometimes trigger reflows depending on the layout and how scrolling is handled.
  • Calculating the position or size of an element: Accessing properties like offsetWidth, offsetHeight, clientWidth, clientHeight, scrollWidth, scrollHeight, getComputedStyle() can force a reflow if the layout hasn't been calculated recently.

Performance Impact: Reflows are generally more performance-intensive as they often affect a significant portion of the document and require recalculating the geometry of multiple elements.

Analogy: Imagine rearranging furniture in a room. If you move a large sofa, you might need to adjust the position of other chairs and tables to fit it all in. This is similar to a reflow – one change can have a cascading effect on other elements.

Repaint

What it is:

Repaint is the process where the browser redraws the visible parts of the elements on the screen. It happens after a reflow has occurred (if necessary) or when changes are made to the visual appearance of an element that do not affect its layout.

What Triggers a Repaint?

Changes that only affect the visual appearance of elements, without altering their position or size in the layout, can trigger a repaint, including:

  • Changing CSS properties: Properties that affect the visual appearance but not the layout, such as:
    • background-color, background-image
    • color, text-shadow
    • visibility, opacity
    • outline, box-shadow
  • Changes to the visibility property: Making an element visible or hidden.

Performance Impact: Repaints are generally less performance-intensive than reflows because they don't involve recalculating the layout of the document. The browser simply needs to update the visual presentation of elements that have changed.

Analogy: Imagine changing the color of the walls or adding a new painting to the same room with the existing furniture arrangement. The layout of the furniture remains the same, but the room's appearance changes. This is similar to a repaint.

The Relationship Between Reflow and Repaint

It's important to note that a reflow will always trigger a repaint. This is because if the layout of elements changes, the browser will need to redraw those elements (and potentially others affected by the layout change) in their new positions and sizes. However, a repaint does not always trigger a reflow. If only the visual appearance of an element changes without affecting its layout, only a repaint is necessary.

Optimizing for Performance: Avoiding Excessive Reflows

Since reflows are more performance-intensive, it's crucial to minimize their occurrence in your web applications. Here are some common optimization techniques:

  • Batch DOM Changes: Instead of making multiple small changes to the DOM, try to group them together and apply them at once. This can reduce the number of reflows triggered.
  • Use CSS Transforms and Opacity for Animations: Animating properties like transform and opacity often avoids triggering reflows, as they can be handled by the browser's compositing process.
  • Avoid Forcing Synchronous Layout: Be cautious when accessing layout properties (like offsetWidth, offsetTop) immediately after making DOM changes. This can force the browser to perform a synchronous layout calculation.
  • Use DocumentFragment for Multiple DOM Manipulations: When adding multiple elements to the DOM, consider using a DocumentFragment to perform the manipulations in memory before appending the fragment to the document.
  • Optimize CSS Selectors: Complex CSS selectors can take longer for the browser to process and might indirectly contribute to layout performance issues.

Conclusion:

Understanding the difference between repaint and reflow is fundamental to optimizing the rendering performance of your web applications. Reflows, which involve recalculating the layout, are more expensive, while repaints are simply the redrawing of elements. By being mindful of what triggers these processes and by implementing optimization techniques, you can create smoother and faster experiences for your users. Stay tuned for more Daily Comparisons!