브라우저 랜더링 (CRP)

1. 한줄정리

CRP (Critical Rendering path): 브라우저는 HTML과 CSS를 파싱해 DOM + CSSOM → Render Tree → Layout → Paint → Composite 순서로 화면을 그린다

이 과정을 Critical Rendering Path(CRP)라 하며, 렌더링 최적화의 핵심이다

---

2. 등장 배경

• 사용자가 URL을 입력하면 브라우저는 단순히 HTML을 보여주는 게 아니라, HTML, CSS, JS, 이미지, 폰트 등 모든 리소스를 받아서 화면에 표시해야 한다. 이 때, 화면을 그리는 방식을 이해하면, FCP(First Contentful Paint), LCP (Largest Contentful Paint) 같은 성능 지표를 개선할 수 있다.

---

3. 핵심 내용

• Creitical Rendering Path (CRP) 단계 요약

1. HTML 파싱 → DOM(Document Object Model) 생성
2. CSS 파싱 → CSSOM(CSS Object Model) 생성
3. Render Tree 생성 (DOM + CSSOM 결합)
4. Layout 단계 (위치와 크기 계산)
5. Paint 단계 (픽셀로 그리기)
6. Composite 단계 (레이어 합성)

이 중 DOM, CSSOM, Render Tree, Layout, Paint, Composite 과정이 한 번의 렌더링 이라 보면 된다

---

4. 동작 원리

1. DOM (Document Object Model)
   • HTML이 파싱되면 트리 구조의 DOM 노드가 생성된다
   • 예:

     Hello

     → Document → div → p → textNode(”Hello”)
2. CSSOM (CSS Object Model)
   • CSS 파일이 로드되면 브라우저는 이를 파싱해 CSSOM 트리를 만든다
   • 이때 랜더링 차단 리소스 (render-blocking resource)로 분류되어, CSS 로드가 끝나야 렌더 트리 생성이 시작된다
3. Render Tree
   • DOM + CSSOM을 결합해, 실제 화면에 표시될 렌더 트리(Render Tree)를 만든다
   • display: none 요소는 포함되지 않으며, visibility: hidden 요소는 포함된다
4. Layout (Reflow)
   • 각 노드의 위치, 크기 등 기하 정보(box model)를 계산한다
   • 화면 크기나 폰트 크기 변경 시 다시 계산해야 하므로 “Reflow” 발생
5. Paint
   • 각 요소를 픽셀 단위로 색칠(Paint)한다
   • CSS 속성에 따라 레이어, 그림자, 애니메이션 등을 적용한다
6. Composite
   • 여러 레이어를 GPU가 합성(Compositing)하여 최종 화면을 렌더링한다

---

5. 장단점 분석

장점

구분	장점	단점
DOM 기반 렌더링	구조적이고 유지보수 쉬움	복잡한 DOM 조작 시 느림
CSSOM 결합 구조	스타일 일관성 유지	외부 CSS는 렌더 차단 발생
CRP 전체	최적화로 FCP/LCP 개선 가능	Reflow/Repaint 빈번 시 성능 저하

• 핵심은 랜더링 차단 요소를 줄이고, Reflow/Repaint를 최소화하는 것

---

6. 연관 개념 및 용어 정리

• Reflow: 요소의 레이아웃이 다시 계산되는 현상 (DOM 크기·위치 변경 시 발생)
• Repaint: 색상, 배경 등 시각적 요소만 다시 그리는 현상
• Render-blocking resource: CSS, JS처럼 DOM 생성을 잠시 멈추게 하는 리소스
• Critical CSS: 화면 표시 시 꼭 필요한 최소한의 CSS (나머지는 지연 로드)
• FCP/LCP/CLS: Core Web Vitals - 첫 콘텐츠 표시, 최대 콘텐츠 표시, 레이아웃 안정성