• Reflow (Layout): 요소 기하(크기, 위치) 재계산 — 비용 큼
• Repaint: 기하는 같고 픽셀만 다시 그림 — Reflow보다 가벼움
• Composite: 레이어 합성만 — 가장 가벼운 편

📐 (예시) Reflow 트리거

• width, height, margin, padding, border 변경
• DOM 추가/삭제, 텍스트 변경
• getComputedStyle, offsetWidth 등 레이아웃 읽기 (forced sync layout)
• 창 resize, 폰트 로드

🖌️ (예시) Repaint만 트리거

• color, background, visibility, outline
• Reflow 없이 색/스타일만 바뀔 때

🧩 (예시) Composite-friendly

• transform, opacity (새 레이어로 승격될 수 있음)
• will-change (남용 금지 — 메모리 증가)

💡 최소화 팁

• 레이아웃 읽기/쓰기 batch (read → write 분리)
• 애니메이션은 transform + opacity
• DocumentFragment로 DOM 일괄 삽입
• position: fixed 요소는 다른 Reflow와 분리되는 경우 많음

🔗 참고 자료

• Reflow (MDN Glossary) — 레이아웃(위치, 크기) 재계산인 reflow의 용어 정의다.
• Repaint (MDN Glossary) — 시각 갱신을 위한 다시 그리기(repaint)를 설명한다.
• Avoid large, complex layouts and layout thrashing (web.dev) — forced sync layout, thrashing 회피 방법을 다룬다.
• Critical rendering path (MDN) — Layout과 Paint가 CRP에서 차지하는 위치를 정리한다.