본문으로 건너뛰기

브라우저 렌더링 메커니즘

· 약 4분

브라우저 렌더링 메커니즘과 성능 최적화의 원리

브라우저의 동작 원리를 깊이 이해하고, 성능에 직접적으로 영향을 미치는 렌더링 단계와 프레임워크 렌더링 전략의 차이를 기술한다.

DOM이란?​

  • HTML 파싱 → 트리 형태의 Document Object Model 생성
  • Tree의 구조적 특성과 접근 비용

DOM 조작의 비용​

  • DOM API 호출이 layout/reflow/paint에 어떻게 영향을 주는지

Virtual DOM의 개념​

  • React를 중심으로 설명
    • 실제 DOM과 분리된 메모리상의 가상 트리
    • diffing algorithm과 reconciliation 방식

Virtual DOM 최적화 전략​

  • Keyed diff vs Unkeyed diff
  • Batching / Fiber Architecture (React 기준)

=======================================================================

Reflow, Repaint, Layout Thrashing의 본질​

Reflow와 Repaint 정의​

  • Reflow: 레이아웃 변경 (geometry 계산)

  • Repaint: 스타일 변경 (색상, 배경 등) → GPU와 연관

Reflow가 발생하는 조건​

  • DOM 구조 변경, 스타일 변경, 창 크기 조정 등

Layout Thrashing​

  • 연속적으로 style/layout 정보를 읽고 다시 쓰는 패턴

  • 예시:

    for (let el of list) {
      el.style.height = el.offsetHeight + "px"; // 읽기 → 쓰기 → 읽기...
    }

성능 최적화 전략​

  • Style 변경은 batch로 처리
  • requestAnimationFrame, getBoundingClientRect 최소화
  • CSS Containment 사용 (contain: layout)

브라우저의 렌더링 과정: Critical Rendering Path​

전체 렌더링 플로우 요약​

  1. HTML 파싱 → DOM 생성

  2. CSS 파싱 → CSSOM 생성

  3. DOM + CSSOM → Render Tree

  4. Layout (Reflow)

  5. Paint

  6. Composite → GPU

CRP 최적화를 위한 주요 포인트​

  • Render-blocking 리소스 최소화

  • Lazy loading (이미지, 폰트)

  • preload, prefetch, dns-prefetch 태그

Frame Budget 개념​

  • 60FPS 기준: 16.66ms 안에 모든 연산이 끝나야 함

  • Long Task, Dropped Frame 원인 분석

Hydration과 렌더링 전략 비교 (SSR vs CSR vs SSG)​

CSR (Client Side Rendering)​

  • JS 다운로드 후 동적 DOM 생성

  • 초기 TTI(Time to Interactive)가 늦음

SSR (Server Side Rendering)​

  • HTML 사전 생성 → JS Hydration

  • 초기 퍼포먼스 좋지만 Hydration 비용이 큼

SSG (Static Site Generation)​

  • 빌드 타임에 HTML 생성

  • 정적 콘텐츠에 최적 (Next.js의 getStaticProps 등)

Hydration이란?​

  • HTML은 미리 있지만, 인터랙티브 기능은 client에서 attach

  • React의 Partial Hydration / Streaming SSR 등의 진화 방향

렌더링 전략 선택 기준​

기준CSRSSRSSG
초기 로딩속도느림빠름매우 빠름
SEO낮음높음매우 높음
콘텐츠 실시간성높음화면낮음

부록: Lighthouse와 Chrome DevTools를 활용한 성능 측정 지표​

  • TTFB, FCP, LCP, TTI, CLS 정의

  • Layout Shift와 Paint Blocking Time 분석