렌더링 흐름(렌더 트리, 리플로우, 리페인트)

✅ 전체 렌더링 흐름 요약

웹 브라우저가 HTML과 CSS를 받아와 화면에 출력하는 전체 과정은 다음과 같습니다:

1. HTML 파싱 → DOM 트리 생성
2. CSS 파싱 → CSSOM 트리 생성
3. DOM + CSSOM → 렌더 트리 생성
4. 렌더 트리 기반 → 레이아웃 계산 (리플로우)
5. 레이아웃 기반 → 화면에 그림 (리페인트)

🔷 렌더 트리 (Render Tree)

정의

화면에 실제로 보이는 요소만을 포함한 트리 구조

특징

• DOM + CSSOM을 조합해서 생성
• display: none 요소는 포함되지 않음
• visibility: hidden은 포함됨 (보이지 않지만 공간 차지)
• 요소마다 크기, 위치, 스타일 정보가 들어 있는 박스(Box)로 표현됨

🔷 리플로우 (Reflow)

정의

렌더 트리의 요소들의 위치와 크기(레이아웃)를 계산하는 과정

발생 조건

• DOM 구조 변경
• 창 크기 변경
• margin, padding, border, width, font-size 등의 변경
• offsetTop, scrollTop 같은 속성 접근 시 강제 발생

성능 영향

• ❗ 성능 부담 큼
• 상위 요소의 변경이 하위 요소 전체에 영향을 줄 수 있음

🔷 리페인트 (Repaint)

정의

요소의 시각적 스타일이 바뀔 때 발생 (위치·크기 변화 없음)

발생 조건

• color, background-color, box-shadow, visibility 등 변경

성능 영향

• 💡 리플로우보다는 비용이 적지만, 너무 자주 일어나면 성능 저하 가능

📌 요약 표

🧠 예제로 흐름 이해하기

<p style="color: red; font-size: 16px;">Hello</p>

DOM 트리 생성: <p>Hello</p>

CSSOM 트리 생성: p { color: red; font-size: 16px }

렌더 트리 생성: p + 스타일 적용

리플로우: 폰트 크기 기준으로 p의 크기·위치 계산

리페인트: 빨간색 텍스트로 실제 화면에 그림