브라우저 렌더링 흐름, DOM / CSSOM / Render Tree

🎯 목표

• 브라우저에서 JS가 왜, 언제 실행되는지 설명할 수 있도록 한다.
• HTML / CSS / JS를 브라우저가 어떻게 처리해서 화면을 그리는지 정리한다.

---

브라우저 렌더링 흐름

HTML 파싱
→ DOM 생성
→ CSS 파싱
→ CSSOM 생성
→ Render Tree
→ Layout
→ Paint

---

파싱(parsing)이란?

문자열로 된 문서를
브라우저가 이해할 수 있는 의미 있는 객체 구조로 바꾸는 과정

---

HTML 파싱 예시

<button>클릭</button>
이 상태에서 브라우저 입장에서는

버튼 ❌

구조 ❌

의미 ❌

👉 단순한 문자 덩어리

브라우저는 HTML을 위에서부터 읽으면서 다음과 같이 해석한다.

"<button>"  → Button 노드 생성
"클릭"      → Text 노드 생성
"</button>" → 닫힘 처리
그 결과 만들어지는 구조는 다음과 같다.

Document
 └─ body
    └─ button
        └─ "클릭"
이렇게 생성된 트리가 DOM 트리이다.

DOM / CSSOM / Render Tree
HTML → DOM

CSS → CSSOM

DOM + CSSOM → Render Tree

Render Tree란?
Render Tree는 DOM과 CSSOM을 결합해서
실제로 화면에 그릴 요소만 선별한 트리 구조이다.

백엔드로 따졌을 때 DTO 포지션과 비슷하다.
받아올 때 선언한 변수들을 전부 사용하지 않고,
필요한 것들만 뽑아서 사용하는 느낌이다.

파싱의 핵심

파싱은 이것이 무엇인지 이해하는 단계이다.
화면을 그리는 단계는 아니다.

Layout 과 Reflow

Layout
Render Tree를 기준으로
각 요소의 위치와 크기를 계산하는 단계

Reflow
Layout을 다시 계산하는 작업
DOM 구조 변경이나 요소의 크기 / 위치가 변경되면 발생한다.

Paint와의 차이
색 변경 → Paint

크기 / 위치 변경 → Reflow

box.style.color = "red";    // Paint
box.style.width = "200px"; // Reflow
색상 변경은 Layout에 영향을 주지 않기 때문에
Reflow가 아니라 Paint만 발생한다.

JS가 DOM을 바꾸면 성능이 나빠지는 이유
JS로 DOM을 변경하면
기존 Render Tree와 Layout 정보가 무효화된다.

그 결과,

DOM 변경
→ Render Tree 무효화
→ Layout(Reflow)
→ Paint
이 과정이 여러 번 반복되면
브라우저가 레이아웃을 계속 다시 계산하게 되어
성능이 저하된다.