브라우저가 HTML을 받아 화면을 그리는 과정 (Critical Rendering Path)

https://minsu08.tistory.com/15

이 블로그는 해당 글에서 이어지는 글입니다.

---

웹 브라우저는 서버로부터 HTML을 받아 여러 단계를 거쳐 화면을 렌더링한다. (이 과정을 이해하면 웹 성능 최적화나 프레임워크의 동작 원리를 이해하는데 큰 도움이 된다.)

 

흐름

HTML 다운로드
↓
DOM 생성
↓
CSS 다운로드
↓
CSSOM 생성
↓
Render Tree 생성
↓
Layout 계산
↓
Paint

 

이 과정을 Critical Rendering Path라고도 합니다.

---

1. DOM 생성 (DOM Construction)

브라우저는 서버로부터 받은 HTML 문서를 파싱(parsing) 하여 DOM Tree를 생성합니다.

DOM(Document Object Model)은 HTML 문서를 트리 구조의 객체 형태로 표현한 것입니다.
브라우저는 HTML 태그를 읽어 문서의 구조를 메모리 상의 객체 구조로 변환합니다.

예를 들어 다음과 같은 HTML이 있다고 가정해 보겠습니다.

 

<div>
<p>Hello</p>
</div>

 

브라우저 내부에서는 다음과 같은 DOM Tree가 생성됩니다.

div
└ p

 

DOM은 단순한 구조 표현이 아니라 JavaScript가 웹 페이지를 제어할 수 있도록 만들어진 객체 구조입니다.

예를 들어 다음과 같은 JavaScript 코드가 동작할 수 있는 이유도 DOM이 존재하기 때문입니다.

 

document.querySelector("p").textContent = "Hi";

 

즉,

• HTML → 문서 구조를 작성한 텍스트
• DOM → 브라우저가 HTML을 해석하여 만든 객체 기반 구조

라고 이해할 수 있습니다.

---

2. CSSOM 생성 (CSS Object Model)

브라우저는 HTML뿐만 아니라 CSS 파일도 다운로드한 뒤 파싱합니다.

CSS 역시 브라우저 내부에서 트리 구조의 객체 형태로 변환되는데, 이를 CSSOM(CSS Object Model) 이라고 합니다.

CSS → CSSOM

 

CSSOM에는 다음과 같은 스타일 정보들이 포함됩니다.

• 색상(color)
• 폰트(font)
• margin / padding
• display 속성
• layout 관련 속성

DOM이 문서의 구조 정보라면
CSSOM은 스타일 정보를 담고 있는 구조라고 볼 수 있습니다.

---

3. Render Tree 생성

브라우저는 DOM과 CSSOM을 결합하여 Render Tree를 생성합니다.

DOM + CSSOM → Render Tree

 

Render Tree는 실제로 화면에 렌더링될 요소들만 포함하는 트리 구조입니다.

예를 들어 다음과 같은 CSS가 적용된 요소가 있다고 가정해 보겠습니다.

 

display: none;

 

이 요소는 DOM에는 존재하지만 화면에 표시되지 않기 때문에 Render Tree에는 포함되지 않습니다.

즉 Render Tree는

• DOM 구조
• CSS 스타일 정보

이 두 가지를 결합한 실제 화면 렌더링을 위한 트리 구조입니다.

---

4. Layout (Reflow)

Render Tree가 생성되면 브라우저는 각 요소의 정확한 위치와 크기를 계산합니다.

이 과정을 Layout 또는 Reflow라고 합니다.

이 단계에서는 다음과 같은 정보들이 계산됩니다.

• 요소의 위치
• 요소의 크기
• 요소 간의 배치 관계
• 화면에서 차지하는 영역

예를 들어 다음과 같은 CSS가 있다면

 

display: flex;

 

브라우저는 flex 규칙에 따라 각 요소가 어떤 위치에 배치될지 계산하게 됩니다.

Layout 과정은 비교적 비용이 큰 작업이기 때문에 불필요한 DOM 변경이 많으면 렌더링 성능이 저하될 수 있습니다.

---

5. Paint

Layout 계산이 완료되면 브라우저는 각 요소를 픽셀 단위로 화면에 그립니다.

이 단계를 Paint라고 합니다.

이 과정에서 다음과 같은 작업이 수행됩니다.

• 배경 색상 그리기
• 텍스트 렌더링
• 이미지 렌더링
• border / shadow 등 스타일 적용

즉 브라우저는 Render Tree의 정보를 기반으로 실제 화면에 표시될 픽셀을 생성합니다.