Web Performance: Reflow and Repaint

There are many ways to improve web performance: minify JS, reduce HTTP requests, use CDNs for critical assets, etc. Another lever is reducing reflow/repaint. Here’s a summary.

Rendering Pipeline

From Li Bing’s “Browser Working Principles and Practice”.

Techniques

1. Toggle CSS classes instead of frequently editing style
   • Fewer reflow/repaint operations
2. Avoid table layouts
   • Smaller reflow/repaint scope
3. Batch DOM operations (e.g., DocumentFragment) or use frameworks like React
   • Fewer reflow/repaint operations
4. Debounce window.resize
   • Fewer reflow/repaint operations
5. Separate DOM reads from writes
   • Mixed read/write forces layout flushes
6. Use will-change: transform when appropriate
   • Trade memory for speed

At a high level, skipping stages of the pipeline reduces total work and improves performance.