브라우저 렌더링 최적화

개념 설명

Critical Rendering Path 최적화, GPU 가속 활용, Layout Thrashing 방지 등 브라우저 렌더링 성능 향상 기법.

핵심 포인트

• Critical CSS: Above-the-fold 콘텐츠 렌더링에 필요한 최소 CSS
• GPU 레이어: transform, opacity 사용으로 Composite 레이어에서 처리
• Layout Thrashing: 지속적인 Reflow 방지를 위한 배치 처리
• Viewport 최적화: 가시 영역 밖 요소는 Lazy Loading
• Resource Hints: preload, prefetch, preconnect로 리소스 로딩 최적화

예시 코드

/* GPU 가속 활용 */
.smooth-animation {
  /* Reflow/Repaint 일으키는 속성 피하기 */
  /* left: 100px; - 나쁜 예 */
  
  /* Composite 레이어에서 처리 - 좋은 예 */
  transform: translateX(100px);
  will-change: transform; /* 브라우저에 미리 알림 */
}