📌"브라우저가 HTML을 어떻게 화면에 띄울까?"

📖 본문

1. 크리티컬 렌더링 패스란?

브라우저가 HTML, CSS, JavaScript를 해석하고,
**사용자가 볼 수 있는 화면(Pixel)**으로 만드는 전체 과정을 말합니다.
즉, “코드를 → 화면”으로 바꾸는 여정이죠.

---

2. 단계별 과정

① HTML 파싱 → DOM 생성

• 브라우저가 HTML 파일을 위에서부터 한 줄씩 읽음
• 태그를 구조화하여 DOM(Document Object Model) 트리로 만듦

② CSS 파싱 → CSSOM 생성

• <link> 또는 <style> 태그의 CSS를 해석
• CSS 규칙을 트리 구조로 만들어 CSSOM 형성

③ Render Tree 생성

• DOM + CSSOM 결합 → 렌더 트리(Render Tree) 생성
• 실제 화면에 보여질 요소와 스타일 정보만 포함

④ 레이아웃(Layout)

• 각 요소의 크기와 위치 계산
• 반응형이라면 화면 크기에 맞춰 재계산

⑤ 페인팅(Paint)

• 색상, 그림자, 이미지 등을 픽셀 단위로 채움

⑥ 합성(Composite)

• 여러 레이어를 합쳐 최종 화면을 그림

---

3. 중요한 점 — 렌더링 속도에 영향을 주는 요소

• CSS와 JS 로드 순서
  • CSS가 늦게 로드되면 렌더링이 지연됨
  • JS는 DOM 파싱을 멈추게 할 수 있음 (defer, async 활용)
• 이미지 용량
  • 용량이 크면 페인팅에 시간 많이 걸림
• 리플로우 / 리페인트 최소화
  • DOM 구조나 스타일 변경이 많으면 속도 저하

---

4. 브라우저 렌더링 흐름 그림

HTML → DOM 생성
CSS → CSSOM 생성
DOM + CSSOM → Render Tree 생성
Render Tree → Layout(크기·위치 계산)
Layout → Paint(색칠)
Paint → Composite(합성)

📌 정리 표

단계                                                                                   설명

DOM 생성	HTML 구조 파싱
CSSOM 생성	CSS 해석
Render Tree	DOM+CSSOM 결합
Layout	요소 크기·위치 계산
Paint	픽셀 색칠
Composite	화면 합성