브라우저 렌더링 과정을 단계별로 설명할 수 있나요?

브라우저는 받은 HTML·CSS·JS를 여러 단계를 거쳐 화면의 픽셀로 그립니다. 이 과정을 크리티컬 렌더링 패스(Critical Rendering Path) 라고 합니다.

단계별 흐름

1. DOM 구성 — HTML을 파싱해 노드 트리인 DOM(Document Object Model) 을 만듭니다.
2. CSSOM 구성 — CSS를 파싱해 스타일 규칙 트리인 CSSOM(CSS Object Model) 을 만듭니다. CSS는 렌더 차단 리소스입니다.
3. 렌더 트리(Render Tree) — DOM과 CSSOM을 결합해, 화면에 보이는 노드와 계산된 스타일만 담은 트리를 만듭니다. display: none 요소는 제외됩니다.
4. 레이아웃(Layout / Reflow) — 각 노드의 정확한 위치와 크기(기하 정보) 를 뷰포트 기준으로 계산합니다.
5. 페인트(Paint) — 텍스트·색·테두리·이미지 등 실제 픽셀을 칠합니다. 여러 레이어로 그려질 수 있습니다.
6. 합성(Composite) — 페인트된 레이어들을 올바른 순서로 합쳐 최종 화면을 만듭니다(GPU 활용).

HTML → DOM ┐
            ├→ 렌더 트리 → 레이아웃 → 페인트 → 합성 → 화면
CSS → CSSOM ┘

JavaScript의 개입

<script> 는 기본적으로 파서를 차단하고, DOM·CSSOM을 수정할 수 있습니다. 그래서 위치·async/defer가 렌더링 타이밍에 영향을 줍니다. CSSOM이 완성되기 전 실행되는 스크립트는 CSSOM을 기다리기도 합니다.

리플로우 · 리페인트

• 리플로우(Reflow) — 크기·위치 변경처럼 레이아웃을 다시 계산(비용 큼).
• 리페인트(Repaint) — 색상 등 레이아웃에 영향 없는 시각 변경만 다시 그림.
• transform·opacity 변경은 레이아웃·페인트를 건너뛰고 합성 단계만 처리될 수 있어 성능에 유리합니다.

네트워크 관점(요청부터 응답까지)은 렌더링을 네트워크 관점에서 보기에서 다룹니다. 이 문서는 받은 자원을 화면으로 그리는 단계에 집중합니다.