✅ Reflow vs Repaint (랜더링 성능)

1. 🔁 Reflow (Layout)

요소의 위치나 크기 계산이 다시 일어나는 과정

• 예시:
  • DOM에 새로운 요소 추가
  • 기존 요소의 width, height, padding, margin, display, position 변경
  • 윈도우 크기 조절
• 브라우저는 레이아웃 전체나 일부를 다시 계산
• 매우 무겁고 성능에 큰 영향

👉 예시 코드:

element.style.width = "500px"; // → Reflow 발생

2. 🎨 Repaint (Paint)

---

위치나 크기는 그대로인데 시각적 속성만 바뀌는 것

• 예시:
  • color, background-color, visibility, border-color 변경
• Reflow 없이도 발생 가능
• 성능 부담은 덜하지만, 빈번하면 느려짐

👉 예시 코드:

element.style.backgroundColor = "red"; // → Repaint만 발생

---

⚠️ Reflow는 Paint도 동반하지만, Paint는 Reflow 없이도 발생할 수 있음!

작업	Reflow	Repaint
width, height, margin 변경	✅	✅
color, background-color 변경	❌	✅
DOM 추가/삭제	✅	✅
텍스트 내용 변경	✅	✅
transform 또는 opacity 변경	❌	✅ (GPU 가속 가능)

---

💣 DOM 조작 시 왜 중요하냐?

• 무식하게 DOM을 조작하면 매번 Reflow 발생 → 전체 레이아웃 다시 계산 → 성능 폭망💥
• 특히 루프 안에서 DOM 변경하면 진짜 최악이다

---

✅ 성능 최적화 팁

• DOM 조작은 한꺼번에 묶어서 처리
• documentFragment 사용
• classList.add()로 CSS 클래스 변경만 하도록 유도
• requestAnimationFrame으로 애니메이션 최적화
• Layout Thrashing 방지 → 읽기-쓰기 DOM 작업 섞지 마라 ❗

---

요약 한줄로 정리

Reflow는 레이아웃 계산, Repaint는 시각적 속성 변경. Reflow가 훨씬 무겁고 성능에 치명적이다.