웹 성능 최적화 - 애니메이션 최적화

 

🎞️ 애니메이션 최적화

💥 쟁크(Jank) 현상

애니메이션이 부드럽지 않고 끊기는 현상

 

• DOM 업데이트 시 Reflow가 발생함
• Reflow는 레이아웃 계산과 Paint 재수행을 유발
• 이로 인해 프레임 드랍과 성능 저하 발생

---

📐 Reflow

레이아웃을 다시 계산하는 과정

 

처리 순서

1. DOM + CSSOM 파싱
2. Render Tree 생성
3. Layout 계산 및 배치
4. Paint
5. Composite

---

🎨 Repaint

레이아웃 재계산 없이 화면을 다시 그리는 과정
예: color, background-color 변경 등

 

처리 순서

1. DOM + CSSOM 파싱
2. Render Tree 생성
3. Layout 계산 및 배치 (변경 없을 시 생략 가능)
4. Paint
5. Composite

---

 

🚀 애니메이션 성능 최적화 전략

부드러운 애니메이션을 위해 Reflow/Repaint를 최소화
가능하면 GPU 가속을 활용 (transform, opacity 등)

 

 

 

❌ Reflow를 유발하는 CSS 속성

• 레이아웃에 영향을 주는 속성들
• width, height, margin, padding, border
• top, left, right, bottom, display, position
  
  

❌ Repaint를 유발하는 CSS 속성

• 시각적 스타일에 영향을 주는 속성들
• color, background-color, border-color, box-shadow

 

⭕️ Reflow & Repaint 모두 피할 수 있는 속성

• GPU 렌더링 최적화 가능
• transform, opacity