What are the best practices for optimizing CSS to reduce unnecessary reflows and repaints, especially in large-scale applications?

1. Reflow (Layout Recalculation):

A reflow (also called layout or re-layout) occurs when the browser recalculates the position, size, and layout of elements on the page. This process happens every time the layout of the page changes such as when elements are added, removed, resized, or their visibility changes. It’s a more complex and time-consuming operation

Example :

<div id="box" style="width: 100px; height: 100px; background-color: blue;"></div>

<script>
const box = document.getElementById('box');
// Triggering a reflow by changing width and height
box.style.width = '200px';
box.style.height = '200px';

// Triggering a repaint by changing the background color
box.style.backgroundColor = 'red';
</script>

When does a reflow happen?

• Adding, removing, or modifying DOM elements (e.g., appendChild, removeChild).
• Changing the layout by adjusting CSS styles like width, height, margin, padding, etc.
• Resizing the window or changing the size of elements.
• Changing the font size or font properties.
• Using methods like offsetWidth, offsetHeight, scrollTop, getBoundingClientRect() because they force the browser to recalculate layout.

How reflow works:

When you change something that affects the layout of the page, the browser has to:

1. Recalculate the positions and dimensions of all elements affected by the change.
2. Rebuild the layout tree, which is the internal representation of how the elements are laid out.

If many elements are affected by a single change, the reflow can be costly and slow down the performance of your site.

2. Repaint (Visual Update)

A repaint (or redraw) occurs when visual properties of an element change but the layout doesn’t. It’s less expensive than a reflow because it only requires updating the appearance of elements without recalculating their position or layout. Repaints happen after the layout is recalculated (in cases where both are needed) or when non-layout-affecting properties are changed, like color or visibility.

Example :

<div id="box" style="width: 100px; height: 100px; background-color: blue;"></div>

<script>
// Triggering a repaint by changing the background color
box.style.backgroundColor = 'red';
</script>

When does a repaint happen?

• Changing the background-color, border-color, or visibility properties.
• Changing the box-shadow, outline, or color of an element.
• Updating opacity (opacity), transforms (transform), or z-index.

A repaint doesn’t involve recalculating layout, so it’s faster than reflow, but it still requires redrawing parts of the page, which takes some time.

The Rendering Pipeline

1. DOM Construction: The browser parses HTML to build the DOM (Document Object Model) tree.
2. CSSOM Construction: CSS is parsed to build the CSSOM (CSS Object Model) tree.
3. Render Tree Construction: The DOM and CSSOM are combined to create the render tree, which contains the visual information for each visible element.
4. Layout (Reflow): The browser calculates the position and size of each visible element in the render tree.
5. Paint: The browser fills in pixels based on the visual properties like colors, borders, shadows, etc.
6. Composite: The browser composes the different painted layers (for complex elements like animations, 3D transforms, etc.) and displays them on the screen.

Performance Impact

• Reflow: Expensive in terms of performance, especially if it affects large parts of the page or is triggered repeatedly (e.g., in a loop or on resize). It affects the layout of the page and requires recalculating positions and sizes of elements.
• Repaint: Less expensive than a reflow but still impacts performance, especially if many elements need to be repainted frequently.

How to Optimize Reflows and Repaints

1. Minimize DOM manipulation : Use techniques like batching DOM updates (as mentioned earlier) or DocumentFragment to make multiple changes at once, instead of one by one.

2. Avoid layout thrashing : If you read a layout property (e.g., offsetHeight) and immediately write (change the layout) in the same cycle, it forces a reflow, known as layout thrashing. To avoid this, separate reading and writing DOM properties in different steps.
   

   
   const height = element.offsetHeight; 
   element.style.height = height + 'px';
   

3. Use CSS classes : Instead of modifying individual styles, use CSS classes to make changes. The browser handles class switching more efficiently.
   

   element.classList.add('newClass');
   

4. Reduce complexity of CSS: Avoid deeply nested elements and overly complex CSS rules that can trigger reflows.

5. Use visibility: hidden instead of display: none when you just want to hide an element without affecting layout. display: none triggers a reflow, while visibility: hidden only triggers a repaint.

Conclusion

• Reflows involve recalculating the layout of the page and are more costly in terms of performance.
• Repaints update the visual appearance without affecting layout and are less costly.
• Minimizing both helps keep your site responsive and fast, improving user experience.