---
id: wiki-2026-0508-reflow-and-repaint
title: Reflow and Repaint
category: 10_Wiki/Topics
status: verified
canonical_id: self
aliases: [Layout Thrashing, Browser Rendering, Compositing]
duplicate_of: none
source_trust_level: A
confidence_score: 0.9
verification_status: applied
tags: [browser, rendering, performance, dom, web]
raw_sources: []
last_reinforced: 2026-05-10
github_commit: pending
tech_stack:
  language: javascript
  framework: web
---

# Reflow and Repaint

## 매 한 줄
> **"매 DOM mutation 의 cost 의 reflow 의 dominate"**. Browser rendering pipeline 의 layout (reflow) → paint (repaint) → composite. Reflow 의 가장 expensive — geometry recalc 매 children. 2026 의 GPU compositing + Layout API 의 mitigate.

## 매 핵심

### 매 Pipeline
1. **Style** — CSS 의 element 의 match.
2. **Layout (Reflow)** — geometry (width/height/position) compute.
3. **Paint (Repaint)** — pixel 의 layer 의 fill.
4. **Composite** — layers 의 GPU 의 combine.

### 매 Reflow triggers
- Geometric 변화: `width`, `height`, `top`, `padding`, `font-size`.
- DOM mutation: `appendChild`, `removeChild`.
- Read-then-write 패턴: `offsetHeight` (force sync layout).
- Window resize, font load.

### 매 Repaint-only triggers (no reflow)
- `color`, `background-color`, `visibility`.
- 매 cheap relative.

### 매 Composite-only (cheapest)
- `transform`, `opacity` (with `will-change` or layer promotion).
- GPU 의 handle — 60fps 의 가능.

### 매 Layout thrashing
- 매 read → write → read → write 의 loop → 매 forced sync layout 의 매 step.
- Fix: 매 batch reads, batch writes.

### 매 Modern APIs
- **`requestAnimationFrame`**: 매 paint 직전 의 schedule.
- **`IntersectionObserver`**: 매 scroll 의 listen 의 X.
- **`ResizeObserver`**: layout 의 element-level observe.
- **CSS `contain: layout/paint`**: subtree isolation.
- **`content-visibility: auto`**: viewport 외 의 skip render.
- **CSS Houdini Layout API**: custom layout — 매 2026 widely available.
- **View Transitions API**: smooth page-to-page animation.

### 매 응용
1. List virtualization (react-virtual, TanStack Virtual).
2. Animation 의 transform/opacity-only.
3. SPA route transition (View Transitions).
4. Long-list performance (`content-visibility`).
5. Charting (Canvas/WebGL 의 DOM 의 avoid).

## 💻 패턴

### Layout thrashing 의 fix
```javascript
// BAD — 매 iteration 의 forced reflow
for (const el of items) {
  const w = el.offsetWidth;        // read
  el.style.width = (w + 10) + "px"; // write — invalidates layout
}

// GOOD — batch reads, then batch writes
const widths = items.map(el => el.offsetWidth);
items.forEach((el, i) => { el.style.width = (widths[i] + 10) + "px"; });
```

### transform animation (composite-only)
```css
.card { will-change: transform; transition: transform 200ms ease-out; }
.card:hover { transform: translateY(-4px) scale(1.02); }
/* 매 60fps GPU 의 — top/left 의 use 의 X */
```

### content-visibility
```css
.long-article > section {
  content-visibility: auto;
  contain-intrinsic-size: 0 500px;  /* 매 placeholder size */
}
/* 매 viewport 외 의 layout/paint 의 skip — 10x 빠름 매 long page */
```

### IntersectionObserver (lazy)
```javascript
const io = new IntersectionObserver(entries => {
  entries.forEach(e => {
    if (e.isIntersecting) {
      e.target.src = e.target.dataset.src;
      io.unobserve(e.target);
    }
  });
}, { rootMargin: "200px" });

document.querySelectorAll("img[data-src]").forEach(img => io.observe(img));
```

### View Transitions API (2026)
```javascript
async function navigate(url) {
  if (!document.startViewTransition) { location.href = url; return; }
  document.startViewTransition(async () => {
    const html = await fetch(url).then(r => r.text());
    document.body.innerHTML = parseBody(html);
  });
}
```

### React virtualization (TanStack)
```typescript
import { useVirtualizer } from "@tanstack/react-virtual";

function List({ items }: { items: Item[] }) {
  const parentRef = useRef<HTMLDivElement>(null);
  const v = useVirtualizer({
    count: items.length,
    getScrollElement: () => parentRef.current,
    estimateSize: () => 40,
    overscan: 5,
  });
  return (
    <div ref={parentRef} style={{ height: 600, overflow: "auto" }}>
      <div style={{ height: v.getTotalSize(), position: "relative" }}>
        {v.getVirtualItems().map(vi => (
          <div key={vi.key} style={{ position: "absolute", top: vi.start,
                                      height: vi.size, width: "100%" }}>
            {items[vi.index].name}
          </div>
        ))}
      </div>
    </div>
  );
}
```

### Profile with PerformanceObserver
```javascript
new PerformanceObserver(list => {
  for (const entry of list.getEntries()) {
    if (entry.duration > 50) console.warn("Long task:", entry);
  }
}).observe({ entryTypes: ["longtask"] });
```

## 매 결정 기준
| 상황 | Approach |
|---|---|
| Animate position | `transform` + `will-change` |
| Animate color | OK (repaint only, cheap) |
| Long list (>1000) | Virtualize (TanStack Virtual) |
| Static long page | `content-visibility: auto` |
| Subtree isolation | `contain: layout paint` |
| Page transition | View Transitions API |
| Charts / heavy draw | Canvas / WebGL |

**기본값**: 매 transform/opacity 의 animate, virtualize 매 >100 rows, profile with Chrome Performance panel.

## 🔗 Graph
- 부모: [[Web-Performance]] · [[Browser-Rendering]]
- 변형: [[Layout Thrashing]] · [[Compositing]] · [[GPU-Acceleration]]
- 응용: [[CSS Animations & Performance]] · [[View-Transitions]]
- Adjacent: [[Core Web Vitals Optimization (INP, LCP, CLS)|Core-Web-Vitals]] · [[CLS]] · [[INP]]

## 🤖 LLM 활용
**언제**: 매 perf bottleneck explain (read flame chart), code review for layout thrash, CSS containment recommend.
**언제 X**: actual measurement (Chrome DevTools / Lighthouse 의 use), pixel-level paint debugging.

## ❌ 안티패턴
- **`top`/`left` animate**: 매 매 frame reflow → 30fps. transform 의 use.
- **Read-write loop**: layout thrashing — batch.
- **`!important` 의 abuse**: 매 specificity war 의 reflow rules complex 의.
- **Deep DOM (10k+ nodes)**: 매 reflow time 의 linear. virtualize.
- **Sync `getBoundingClientRect` 매 RAF**: forces layout — cache.

## 🧪 검증 / 중복
- Verified (Chrome DevTools docs, web.dev rendering, MDN content-visibility, View Transitions spec).
- 신뢰도 A.

## 🕓 Changelog
| 날짜 | 변경 |
|---|---|
| 2026-05-08 | Phase 1 |
| 2026-05-10 | Manual cleanup — pipeline + 2026 modern APIs |