Critical Render Path

 

Critical Render Path는 브라우저가 HTML, CSS, JavaScript 등의 리소스를 사용해 웹 페이지를 화면에 렌더링하는 과정이다. 

---

1. HTML Parsing (DOM Tree 생성)

• HTML 문서를 파싱하여 DOM(Document Object Model) 트리를 생성.
• DOM은 HTML 문서의 계층적 구조를 표현한다.
  • 예: <div> 요소가 다른 <p> 요소를 포함하는 관계 등.

---

2. CSS Parsing (CSSOM Tree 생성)

• CSS 문서를 파싱하여 CSSOM(CSS Object Model) 트리를 생성.
• CSSOM은 스타일 정보를 구조화한 객체 모델이다.
  • 예: 색상, 크기, 위치 등의 스타일 정보.

---

3. Render Tree 생성

• DOM과 CSSOM을 결합하여 렌더 트리(Render Tree)를 생성.
• 이 단계에서 브라우저는 화면에 표시해야 할 요소와 스타일을 결정한다.
• 렌더 트리는 페이지의 시각적 표현을 위한 구조이다.

---

4. Layout (Reflow)

• 각 요소의 크기(width, height)와 위치(x, y)를 계산.
• 브라우저는 요소를 화면에서 정확히 어디에 배치할지 결정한다.

---

5. Paint

• 화면에 픽셀 단위로 요소를 그리기(Painting) 작업.
• 색상, 텍스트, 그림자와 같은 시각적 속성을 렌더링.

---

Critical Render Path의 요약 단계

1. DOM 생성: HTML → DOM 트리 생성.
2. CSSOM 생성: CSS → CSSOM 트리 생성.
3. Render Tree 생성: DOM + CSSOM → Render Tree.
4. Layout (Reflow): 요소 크기 및 위치 계산.
5. Paint: 화면에 요소를 그리기.

 

 

 용어 설명

• DOM (Document Object Model): HTML 문서의 구조를 객체 모델로 표현.
• CSSOM (CSS Object Model): CSS 스타일 정보를 구조화하여 표현.
• Render Tree: 화면에 표시할 요소와 스타일을 포함한 구조.
• Layout (Reflow): 요소의 위치와 크기를 결정하는 단계.
• Paint: 화면에 픽셀을 그리는 과정.

---

최적화

• 렌더링 최적화를 위해 CSS와 JavaScript를 효율적으로 로드하고, 필요하지 않은 리소스는 지연 로드(Lazy Loading)하여 Critical Render Path를 단축할 수 있다.