As front-end developers, understanding how browsers render pages can significantly improve your appβs performance. Two key processes in the rendering pipeline are reflow and repaint. Letβs break down what each does, why they matter, and how you can optimize them.
𧩠What Is Reflow?
- Also known as layout.
- Happens when the browser recalculates the positions and sizes of elements on the page.
- Triggered by changes to element geometry β such as CSS properties like
width,height,margin,padding,border, or DOM changes. - Typically expensive, because it can affect the entire document tree β definitely not something you want happening frequently during user interactions.
π¨ What Is Repaint?
- Also called paint or render.
- Occurs when visual aspects of elements change β like background color, visibility, text color, or shadows.
- Doesn’t require layout recalculation.
- Still costs CPU cycles, but is cheaper than reflow.
π Reflow vs Repaint: A Quick Comparison
| Feature | Reflow (Layout) | Repaint (Rendering) |
|---|---|---|
| Trigger examples | width, height, padding, margin, border, DOM structure changes | background-color, color, visibility, outline |
| What is updated | Element geometry & layout | Element pixels/color |
| Browser work | Full re-computation of layout tree | Just re-drawing visuals |
| Performance impact | High (can cascade through DOM) | Moderate (confined to affected elements) |
β‘ Performance Optimization Techniques
Here are three actionable ways to reduce reflow and repaint overhead:
- Minimize layout-triggering CSS changes
Avoid changing geometry-related properties (e.g.,width,margin) frequently, especially during animations. Set them upfront in CSS when possible. - Use GPU-accelerated properties for animations
Stick totransformandopacityβ both can be handled by the GPU, avoiding layout recalculation. This yields smoother animations. - Use
will-changemindfully
Hint that an element will change (e.g.,will-change: transform) so the browser can prepare optimizations. But use sparingly β overuse can increase memory usage.
𧩠Real-World Example: Click-to-Expand Card
Imagine a card that expands on click.
Bad (triggers reflow):
Better (GPU-accelerated repaint only):
Or hint it in advance:
This ensures only a repaint, not a layout shift β resulting in smoother UI updates.
β TL;DR
- Reflow recalculates layout and positions β expensive!
- Repaint redraws visuals β less costly, but still avoidable.
- Use transform & opacity with GPU acceleration for animations.
- Use will-change strategically to help browsers optimize.
β¨ Final Thoughts
Smooth, responsive UI isn’t just about clean code β it’s about knowing how browsers work under the hood. Minimizing reflow and repaint not only improves performance but makes your interface feel faster and more pleasant.
If youβd like, I can help convert this into a developer-friendly Markdown guide or include real-world performance metrics. Just let me know!
