웹 성능 최적화 - 렌더링 최적화

간단 소개

웹 성능 최적화 방법론(렌더링, 로딩)과 렌더링 성능 개선을 위한 Reflow, Repaint 개념, GPU 가속 활용법, 성능 측정 도구 및 사례를 소개한다.

AI Summary

웹 성능 최적화 개요
- 웹앱 성능 개선은 렌더링 성능과 로딩 성능 최적화로 나뉜다.
- 렌더링 성능 최적화는 애니메이션 최적화(Reflow, Repaint)를 포함한다.
- 로딩 성능 최적화는 Lazy Loading, Preloading 등을 포함한다.
렌더링 성능 최적화 심층 분석
- Reflow는 요소의 위치/크기 재계산, Repaint는 스타일 속성 변경 시 발생한다.
- 애니메이션은 초당 프레임 수(FPS)가 중요하며, 60FPS 미만 시 Jank 현상이 발생한다.
- transform과 opacity CSS 속성은 GPU 가속을 활용하여 렌더링 성능을 향상시킨다.
성능 측정 및 개선 사례
- 크롬 Performance 탭을 사용하여 렌더링 성능을 측정한다.
- 사운드 미터 컴포넌트 테스트 결과, transform 속성을 사용한 경우가 성능이 가장 좋았다.
- 태그를 사용한 구현은 성능이 가장 낮게 측정되었다.