2nd/10_Wiki/Topics/AI_and_ML/프론트엔드 성능 최적화(Frontend Performance Optimization).md

프론트엔드 성능 최적화(Frontend Performance Optimization)

📌 Brief Summary

프론트엔드 성능 최적화는 브라우저가 코드를 해석하여 화면에 렌더링하는 과정과 웹 애플리케이션의 작동 방식을 개선하여 사용자 경험을 극대화하는 과정입니다. 이는 브라우저의 중요 렌더링 경로(CRP) 최적화부터 불필요한 리플로우(Reflow)와 리페인트(Repaint) 최소화, 그리고 웹 렌더링 전략(CSR, SSR, SSG 등)의 올바른 선택을 아우릅니다. 최근에는 React의 Fiber 아키텍처, 상태 업데이트 자동 배칭, 컴파일러를 통한 자동 메모이제이션, 그리고 React 서버 컴포넌트(RSC) 도입을 통해 클라이언트 측 자바스크립트의 실행 및 번들 크기를 획기적으로 줄이는 방향으로 발전하고 있습니다.

📖 Core 기Content

1. 브라우저 렌더링 과정 (Critical Rendering Path) 및 DOM 최적화

• 렌더 트리 구성: 브라우저는 HTML을 파싱하여 DOM을 만들고, CSS를 파싱하여 CSSOM을 생성한 후, 화면에 표시될 가시적인 노드들만을 결합하여 렌더 트리(Render Tree)를 구축합니다 [1, 2].
• Reflow와 Repaint 최소화: 렌더 트리가 변경되면 브라우저는 요소의 정확한 크기와 위치를 다시 계산하는 레이아웃(Reflow) 단계를 거친 후 픽셀을 화면에 그리는 페인트(Repaint) 작업을 수행합니다 [3-9]. Reflow는 연산 비용이 매우 높으므로 불필요한 DOM 깊이를 줄이고, 레이아웃에 영향을 주는 속성 변경을 피해야 합니다 [7, 8, 10-12]. 애니메이션의 경우 transform 속성이나 하드웨어(GPU) 가속을 활용해 Reflow를 피하고 컴포지팅(Compositing) 단계에서 처리되도록 최적화해야 합니다 [5, 12-14].
• 렌더링 차단 리소스 최적화: CSS와 동기식 자바스크립트는 초기 파싱 및 렌더링을 차단(Render-Blocking)하므로, 자바스크립트에는 async나 defer를 사용하고 중요한 리소스는 Preload 스캐너를 통해 미리 로드하여 렌더링 지연을 방지해야 합니다 [15-23].

2. 프론트엔드 아키텍처 및 React 렌더링 최적화

• 가상 DOM (Virtual DOM) 및 재조정 (Reconciliation): React는 메모리상에 가상 DOM을 두고 상태 변경 전후를 비교합니다. O(n) 복잡도의 Heuristic Diffing 알고리즘을 사용하며, 요소의 타입이 다르거나 리스트에 key 속성이 변경된 경우에만 실제 DOM 노드를 업데이트하여 연산을 최소화합니다 [24-37].
• Fiber 아키텍처: React 16부터 도입된 Fiber는 렌더링 작업을 잘게 쪼개는 시간 분할(Time-Slicing) 기술과 우선순위(Lanes) 시스템을 제공합니다. 클릭이나 타이핑 같은 긴급한 작업을 먼저 처리하고 무거운 렌더링은 중단 및 재개할 수 있어 동시성 렌더링(Concurrent Rendering)과 부드러운 UI 응답성을 달성합니다 [26, 38-51].
• 자동 배칭 (Automatic Batching) 및 메모이제이션: React 18은 Promise나 setTimeout 같은 비동기 환경 내의 상태 업데이트도 하나로 묶어서(Batching) 처리하여 불필요한 리렌더링을 줄입니다 [52-56]. 또한, React Compiler는 빌드 타임에 AST를 분석해 정적 값과 반응형 값을 식별하고 자동으로 메모이제이션 경계를 추가하여 개발자가 수동으로 useMemo나 useCallback을 작성해야 하는 부담과 오버헤드를 크게 줄여줍니다 [57-65].

3. 웹 렌더링 전략 (CSR, SSR, SSG) 및 하이드레이션

• 렌더링 전략의 장단점: CSR(클라이언트 사이드 렌더링)은 동적 상호작용에 유리하지만 초기 로드가 느리고 SEO에 불리합니다 [66-70]. SSR(서버 사이드 렌더링)은 완성된 HTML을 바로 제공하여 초기 화면 표시(FCP)가 빠르고 SEO에 유리하지만 매 요청마다 서버 부하가 발생합니다 [71-76]. SSG(정적 사이트 생성)는 빌드 타임에 HTML을 미리 생성하여 가장 빠르고 CDN 캐싱이 가능하지만 동적 콘텐츠에는 한계가 있습니다 [77-82].
• 하이드레이션 (Hydration) 병목 해결: SSR 사용 시, 정적인 HTML이 사용자에게 표시된 후 자바스크립트를 다운로드하고 연결하여 상호작용을 활성화하는 하이드레이션 과정이 필수적입니다 [71, 83-85]. 이 과정은 메인 스레드를 차단하여 상호작용 지연 시간(TTI, TBT)을 악화시킬 수 있으므로, 사용자 뷰포트에 따라 렌더링을 지연시키는 선택적 하이드레이션(Selective Hydration)이나 지연 로딩 방식을 통해 최적화할 수 있습니다 [86-93].
• React 서버 컴포넌트 (React Server Components, RSC): 상호작용이 필요 없는 정적 컴포넌트를 서버에서만 실행하고 결과 HTML과 직렬화된 지침(React Flight 프로토콜)만을 클라이언트에 스트리밍하는 아키텍처입니다. 클라이언트로 전송되는 자바스크립트 번들 크기를 0으로 만들어 하이드레이션 자체를 생략하므로, 성능(INP 등)이 대폭 향상되며 클라이언트와 서버 간의 데이터 폭포(Waterfall) 현상을 서버 수준에서 병렬로 해결할 수 있습니다 [94-109].

🔗 Knowledge Connections

• Related Topics: 브라우저 렌더링 과정(Critical Rendering Path), 가상 DOM 및 재조정(Virtual DOM and Reconciliation), React Fiber 아키텍처, 하이드레이션(Hydration), 웹 렌더링 전략(CSR, SSR, SSG, ISR), React 서버 컴포넌트(React Server Components), React Compiler
• Projects/Contexts: Next.js를 활용한 웹 애플리케이션의 하이브리드 렌더링 구축, Core Web Vitals (LCP, INP, CLS) 지표 측정 및 개선
• Contradictions/Notes: 서버 사이드 렌더링(SSR)은 클라이언트 사이드 렌더링(CSR)에 비해 초기 화면 렌더링 속도(FCP)가 빠르고 검색 엔진 최적화(SEO)에 매우 유리하다는 강력한 이점을 지니지만 [71, 110], 자바스크립트를 로드하고 HTML 요소에 이벤트 리스너 등을 부착하는 하이드레이션(Hydration) 과정을 거쳐야 하므로 실제 사용자가 상호작용할 수 있는 시간(TTI)은 CSR의 로드 직후 반응성보다 다소 지연될 수 있다는 트레이드오프가 존재합니다 [71, 84, 111, 112].

---

Last updated: 2026-04-25