Strategies for Optimizing Reflow and Repaint

Description
Reflow and Repaint are critical stages in the browser's rendering process, directly impacting front-end performance. Reflow occurs when the browser recalculates an element's geometric properties (such as size and position), causing changes to the page layout. Repaint is triggered when an element's appearance changes (like color or background) but the layout remains the same. Reflow always causes a subsequent repaint, but repaint does not necessarily trigger reflow. Frequent operations (like scrolling or animations) can cause continuous reflows and repaints, leading to page lag.

Process

1. Understand the Trigger Conditions

   • Common scenarios for Reflow:
     • Modifying element dimensions (width/height), margins (margin/padding), or position (top/left).
     • Adding or removing DOM nodes, or changes to element content.
     • Page initialization or window resize events.
   • Common scenarios for Repaint:
     • Modifying non-geometric properties like color, background, or border style.

2. Optimization Principle: Reduce the Scope and Frequency of Reflows

   • Batch DOM Operations:
     Use DocumentFragment or offline DOM (like hidden elements) to perform multiple modifications, then insert them into the page all at once.
     Example:

     // Not recommended: Each modification triggers reflow
     for (let i = 0; i < 100; i++) {
       const div = document.createElement('div');
       document.body.appendChild(div); // Each appendChild may trigger reflow
     }
     
     // Recommended: Use DocumentFragment for batch operations
     const fragment = document.createDocumentFragment();
     for (let i = 0; i < 100; i++) {
       const div = document.createElement('div');
       fragment.appendChild(div);
     }
     document.body.appendChild(fragment); // Only one reflow
     

   • Avoid Modifying Styles One by One:
     Modify styles all at once via CSS class names (className) or cssText, rather than multiple operations on the style property.
     Example:

     // Not recommended: Multiple reflows
     element.style.width = '100px';
     element.style.height = '200px';
     
     // Recommended: Combine modifications
     element.style.cssText = 'width: 100px; height: 200px;';
     // Or switch via class name
     element.className = 'new-style';
     

3. Reduce the Scope of Reflow Impact

   • Use Absolute Positioning (absolute/fixed):
     For complex animated elements, set position: absolute/fixed to take them out of the normal document flow. Their reflow will only affect themselves, not the entire page.
   • Avoid Table Layouts:
     Reflow of a single cell in a table (table) may cause the entire table to be recalculated. Prefer Flex/Grid layouts.

4. Leverage Browser Optimization Mechanisms

   • Cache Layout Information:
     When repeatedly reading offset properties (like offsetTop, clientWidth), cache them in variables first. This prevents the browser from forcing a reflow to return the latest values.
     Example:

     // Not recommended: Each read triggers reflow
     const width = element.clientWidth;
     element.style.width = width + 10 + 'px';
     const height = element.clientHeight; // Here the browser needs to reflow to get the latest height
     element.style.height = height + 10 + 'px';
     
     // Recommended: Cache layout information
     const width = element.clientWidth;
     const height = element.clientHeight;
     element.style.width = width + 10 + 'px';
     element.style.height = height + 10 + 'px'; // Only one reflow
     

   • Use Modern APIs:
     Animations using CSS3's transform and opacity properties are handled by the compositor layer separately. They skip reflow and repaint, directly triggering a Composite.

5. Developer Tools Detection

   • The Performance panel in browser DevTools can record page operations and analyze the frequency and duration of reflows and repaints.
   • In the Rendering tool, enable "Paint flashing" to highlight repainted areas and identify performance bottlenecks.

Summary
The core of optimization is to confine reflows and repaints to the smallest possible scope and frequency. By using batch operations, minimizing layout information reads, and prioritizing CSS3 animations, page smoothness can be significantly improved.