전체 렌더링 과정 요약
1. HTML 파싱 → DOM 트리 생성
2. CSS 파싱 → CSSOM 트리 생성
3. DOM + CSSOM → Render Tree 생성
4. Layout(=Reflow) → 위치/크기 계산
5. Painting → 픽셀 정보 준비
6. Compositing → 화면에 실제 그리기HTML 파싱 → DOM 트리 생성
- HTML Parser가 HTML 코드를 순차적으로 읽고 DOM(Document Object Model)이라는 트리를 생성합니다.
<body>
<h1>Hello</h1>
<p>World</p>
</body>→
Document
└── html
└── body
├── h1
└── p- 이 파싱 과정 중
<script>를 만나면 JS 실행을 위해 파싱을 중단함 (렌더링 블로킹 리소스) - 외부 스크립트의 경우 defer, async 속성으로 파싱 블로킹을 줄일 수 있음
CSS 파싱 → CSSOM 트리 생성
- CSS Parser가 모든
<style>및<link rel="stylesheet">를 분석하여 CSSOM(CSS Object Model)을 만듭니다.
p {
font-size: 16px;
}→
Stylesheet
└── Rule: p { font-size: 16px }- 중요: CSSOM도 렌더링 블로킹 리소스입니다 (CSS가 없으면 스타일 계산 불가 → 화면 못 그림)
DOM + CSSOM → Render Tree 생성
- Render Tree는 DOM + CSSOM을 합쳐서 만든 시각적 표현용 트리입니다.
display: none인 요소는 제외됩니다 (화면에 표시 안 되므로)
Render Tree
└── body
├── h1 (style: ...)
└── p (style: font-size: 16px)Layout (Reflow)
- Render Tree를 기반으로 각 요소의 위치(x, y), 크기(width, height)를 계산합니다.
- 이 단계는 브라우저 뷰포트, 폰트, 패딩, 마진 등 복합 계산이 들어가는 복잡한 단계입니다.
레이아웃 계산이 바뀌면 브라우저는 전체 구조를 다시 계산해야 하며, 이를 Reflow라고 부릅니다.
Painting
- 계산된 위치와 스타일을 바탕으로 각 요소를 픽셀로 변환합니다.
- 색상, 폰트, 박스 그림자 등 시각적 속성을 그리기 위한 단계
이 단계의 변경은 Repaint를 발생시킵니다.
Compositing (합성 단계)
- 복잡한 UI는 레이어(layer)로 분리되어 있고, 이 레이어들을 조합하는 과정입니다.
- 예: CSS
transform,opacity,will-change는 하드웨어 가속 레이어를 생성해서 성능을 높입니다.
Reflow vs Repaint
| 구분 | 설명 | 예시 | 비용 |
|---|---|---|---|
| Reflow | Layout 다시 계산 | width, height, display, position 변경 | 💥 아주 무거움 |
| Repaint | 픽셀만 다시 그림 | color, background-color, visibility 변경 | ⚠️ 중간 수준 |
| Compositing Only | 레이어만 다시 조합 | transform, opacity | ✅ 가벼움 (GPU 처리) |
가상 DOM(Virtual DOM)과의 비교
Virtual DOM이란?
- React, Vue 같은 라이브러리에서 사용하는 JavaScript 기반의 메모리 내 DOM 구조입니다.
- 실제 DOM을 직접 수정하지 않고, 변경된 Virtual DOM을 실제 DOM과 비교(Diffing)하여 필요한 부분만 바꿉니다.
Diffing 과정 자체에서는 Reflow가 발생하지 않습니다. 하지만 Diffing 결과를 실제 DOM에 적용하는 과정에서 Reflow가 발생할 수 있습니다. (batching으로 효율적으로 reflow)
Browser DOM vs Virtual DOM
| 비교 항목 | 전통적인 DOM 조작 | 가상 DOM 기반 (React, Vue 등) |
|---|---|---|
| 렌더링 최적화 | ❌ 없음 | ✅ 있음 (diffing + batching) |
| Reflow 최소화 | ❌ | ✅ |
| 렌더링 효율 | 낮음 | 높음 |
| 메모리 사용량 | 적음 | 다소 증가 (가상 트리 유지) |
Reference
Backend engineer