Web

브라우저 렌더링 과정

2025년 12월 10일

🖥️ 브라우저 렌더링 과정 완전 정리

1️⃣ 브라우저 렌더링이란?

브라우저 렌더링이란

👉 HTML, CSS, JavaScript를 해석해 화면에 픽셀로 그리는 전체 과정이다.

“HTML을 받았다” ≠ “화면에 보인다”

중간에 꽤 많은 단계가 있다.

2️⃣ 전체 흐름 한눈에 보기

HTML 파싱
   ↓
DOM 생성
   ↓
CSS 파싱
   ↓
CSSOM 생성
   ↓
Render Tree 생성
   ↓
Layout (Reflow)
   ↓
Paint
   ↓
Composite

3️⃣ HTML 파싱 → DOM 생성

📌 HTML 파싱

브라우저는 HTML을 위에서 아래로 한 줄씩 파싱
태그를 만나면 노드로 변환
트리 구조로 연결

➡️ 결과물: DOM(Document Object Model)

⚠️ 파싱 중 `<script>`를 만나면?

<scriptsrc="app.js"></script>

HTML 파싱 중단
JS 다운로드 & 실행
끝나야 다시 HTML 파싱 재개

➡️ 그래서 보통 defer, async 사용

4️⃣ CSS 파싱 → CSSOM 생성

📌 CSS 파싱

CSS 파일을 파싱해 CSSOM(CSS Object Model) 생성
스타일 규칙을 트리 구조로 정리

➡️ CSS는 렌더링을 막는다(Render-blocking)

DOM은 있어도 CSSOM이 없으면 화면을 못 그림

5️⃣ Render Tree 생성

DOM + CSSOM → Render Tree

실제 화면에 표시될 노드만 포함
display: none 요소는 제외
각 노드에 계산된 스타일 포함

➡️ “이제 그릴 준비 완료”

6️⃣ Layout (Reflow)

📌 Layout이란?

각 요소의:

위치(x, y)
크기(width, height)

를 계산하는 단계

➡️ 뷰포트 기준으로 정확한 좌표 계산

⚠️ Reflow가 발생하는 경우

요소 크기 변경
위치 변경
폰트 변경
브라우저 리사이즈

👉 비용이 꽤 큼

7️⃣ Paint

📌 Paint란?

계산된 정보를 바탕으로
픽셀을 실제로 채우는 과정

예:

텍스트 색상
배경색
border
box-shadow

8️⃣ Composite

📌 Composite란?

여러 레이어를 합쳐서
최종 화면을 구성

특히 GPU 가속이 사용됨:

transform
opacity

➡️ Paint/레이아웃 없이 화면 갱신 가능

9️⃣ 성능 관점에서 중요한 포인트 ⭐

🚫 Layout / Paint 많이 발생하면 느려짐

el.style.width ="200px";
el.style.height ="300px";

→ Layout + Paint 발생

✅ Composite만 발생하면 빠름

transform:translateX(20px);
opacity:0.5;

→ GPU 레벨에서 처리

1️⃣0️⃣ JavaScript가 렌더링에 미치는 영향

JS는 DOM과 CSSOM을 조작함

element.classList.add("active");

→ 스타일 변경

→ Layout / Paint / Composite 중 일부 재실행

1️⃣1️⃣ 자주 나오는 오해 정리

❌ “Virtual DOM이 렌더링을 대신한다?”

아님 ❌

👉 Virtual DOM은 변경 계산만 담당

실제 렌더링은 브라우저가 함

❌ “렌더링은 한 번만 일어난다?”