Reflow and Repaint
Reflow = layout recalculation, Repaint = visual update
What is Reflow?
"Layout recalculation"
Reflow (or layout) is when the browser recalculates the positions and dimensions of elements in the document.
"Reflow is the process of recalculating element positions and dimensions when layout-affecting properties change."
What is Repaint?
"Visual update without layout change"
Repaint (or redraw) is when the browser updates the visual appearance of elements without changing their layout.
"Repaint updates the visual appearance of elements without recalculating layout, which is faster than reflow."
What Triggers Reflow?
Layout-affecting changes
Properties that trigger reflow:
- Width, height
- Margin, padding, border
- Display (none, block, etc.)
- Position (absolute, fixed)
- Font size
- Adding/removing DOM elements
"Reflow is triggered by changes to layout-affecting properties like dimensions, margins, display, or DOM structure."
What Triggers Repaint?
Visual-only changes
Properties that trigger repaint (not reflow):
- Color
- Background color
- Visibility
- Outline
- Box-shadow (sometimes)
- Border-radius (sometimes)
"Repaint is triggered by visual-only changes like colors, backgrounds, or visibility that don't affect layout."
Performance Impact
Reflow > Repaint > Composite
| Operation | Cost |
|---|---|
| Reflow | Most expensive |
| Repaint | Moderate |
| Composite | Least expensive |
"Reflow is the most expensive operation, followed by repaint, while compositing is the cheapest."
Minimizing Reflows
Batch DOM changes
// ❌ Bad - multiple reflows
element.style.width = "100px";
element.style.height = "100px";
element.style.margin = "10px";
// ✅ Good - single reflow
element.style.cssText = "width: 100px; height: 100px; margin: 10px;";
// ✅ Better - use classes
element.className = "new-style";
"Minimize reflows by batching DOM changes, using CSS classes, or reading layout properties before making changes."
Read/Write Separation
Read all, then write all
// ❌ Bad - read/write interleaved
const width = element.offsetWidth; // Read (triggers reflow)
element.style.width = width + 10 + "px"; // Write (triggers reflow)
// ✅ Good - batch reads, then writes
const width = element.offsetWidth; // Read
const height = element.offsetHeight; // Read
element.style.width = width + 10 + "px"; // Write
element.style.height = height + 10 + "px"; // Write
"Separate read and write operations - read all layout properties first, then make all changes."
CSS Optimizations
Use transforms and opacity
/* ❌ Triggers reflow */
.element {
left: 100px;
top: 100px;
}
/* ✅ Triggers composite only */
.element {
transform: translate(100px, 100px);
opacity: 0.5;
}
"Use CSS transforms and opacity for animations - they trigger compositing, not reflow or repaint."
Document Fragments
Batch DOM insertions
// ❌ Bad - multiple reflows
list.appendChild(item1);
list.appendChild(item2);
list.appendChild(item3);
// ✅ Good - single reflow
const fragment = document.createDocumentFragment();
fragment.appendChild(item1);
fragment.appendChild(item2);
fragment.appendChild(item3);
list.appendChild(fragment);
"Document fragments allow batching DOM insertions, reducing reflows from multiple append operations."
Best Practices
✅ Batch DOM reads and writes ✅ Use CSS classes instead of inline styles ✅ Use transforms for animations ✅ Minimize layout-affecting changes ✅ Use document fragments for multiple inserts ✅ Avoid reading layout properties in loops
"Reflow recalculates element positions and dimensions when layout changes, while repaint updates visual appearance without layout changes. Reflow is expensive and triggered by dimension, margin, or display changes. Repaint is cheaper and triggered by color or background changes. Optimize by batching DOM operations, using CSS transforms for animations, and separating reads from writes."
🧠 Ultra-Short Cheat Sheet
Reflow = layout recalculation (expensive)
Repaint = visual update (cheaper)
Batch DOM changes
Read all, then write all
Use transforms for animations
Document fragments
CSS classes > inline styles