⚙️ 주요 단계:
1. HTML 파싱 → DOM 트리 생성
- 브라우저는 HTML 문서를 위에서 아래로 순차적으로 파싱(해석)함.
- 이 과정에서 HTML 태그 → 노드 구조로 변환되어 DOM (Document Object Model) 트리를 만듦.
- DOM은 페이지의 내용(문서 구조)을 표현한 트리 구조.
2. CSS 파싱 → CSSOM 트리 생성
- 연결된 CSS 파일(또는
<style>,style속성)을 읽어 해석함. - 이 정보를 기반으로 CSSOM (CSS Object Model)이라는 별도의 트리를 생성.
- CSSOM은 각 요소에 어떤 스타일이 적용될지 정보를 담고 있음.
📌 CSSOM이 뭐꼬?
CSSOM(CSS Object Model)은 브라우저가 CSS를 해석해서 만든 트리 구조의 데이터
쉽게 말해, CSS 버전의 DOM이라고 보면 된다.📦 DOM vs CSSOM
구분 DOM CSSOM 뭔가요? HTML 요소들의 구조를 나타낸 트리 CSS 스타일 정보를 구조화한 트리 언제 생김? HTML 파싱할 때 CSS 파싱할 때 하는 역할 페이지에 어떤 요소가 있는지 알려줌 각 요소에 어떤 스타일이 적용되는지 알려줌 🎯 왜 CSSOM이 필요할까?
브라우저는 “어떤 요소에 어떤 스타일을 적용할까?”를 결정해야 하며,
그러기 위해 CSS를 파싱해서 계산 가능한 형태로 구조화해둔다.
즉, CSSOM 없으면 렌더 트리를 만들 수 없다.
3. DOM + CSSOM → 렌더 트리(Render Tree) 생성
- 브라우저는 DOM과 CSSOM을 결합하여, 렌더 트리(Render Tree)를 생성.
🌳 렌더 트리(Render Tree)
렌더 트리는 "화면에 실제로 보여질 요소들"만을 모아둔 시각적 트리 구조📦 구성
- DOM + CSSOM이 결합되어 만들어짐.
display: none같은 요소는 렌더 트리에서 제외됨.- 각 노드는 콘텐츠 + 계산된 스타일 정보를 가지고 있음.
🎯 목적
- 이 트리를 기반으로 브라우저는 화면에 무엇을, 어디에, 어떻게 보여줄지 결정함.
- 이 트리는 실제로 화면에 표시될 요소들만 포함하고, 예를 들어
<head>나display: none인 요소는 제외됨. - 각 요소는 계산된 스타일(Calculated Style)을 포함하고 있음.
4. Layout (Reflow)
- 렌더 트리의 각 요소에 대해 정확한 위치와 크기를 계산.
- 요소가 어디에 어떻게 배치될지 브라우저가 결정함.
- 이 과정은 Reflow(리플로우)라고도 하며, 페이지 구조에 영향을 주는 DOM 변경 시 다시 발생함.
🔄 Reflow (Layout)
Reflow는 렌더 트리를 기반으로 각 요소의 위치와 크기를 계산하는 단계주로 아래와 같은 상황에서 발생
- DOM 구조 변경 (ex. 요소 추가/삭제)
- 스타일 변경 (ex.
width,font-size,padding)- 브라우저 창 크기 변경 (resize)
⚠️ Reflow는 하위 요소들까지 전부 다시 계산해야 하므로, 잦은 발생은 성능 저하의 원인이 될 수 있음!
5. Paint
🎨 Repaint (Paint)
요소의 위치는 그대로인데, 시각적인 속성만 바뀔 때 일어나는 과정 (예: 색상, 그림자, 배경 이미지 등)
color,background,visibility같은 시각적 스타일만 변경될 때 발생하며, Reflow 없이 Repaint만 발생하는 경우도 있음! (딘. display: none은 제외)💥 정리: Reflow vs Repaint
구분 Reflow (Layout) Repaint (Paint) 무엇? 위치, 크기 재계산 시각적 속성 다시 그림 언제? DOM 구조, 박스 모델 속성 변경 색상, 배경 등 시각 요소 변경 영향 범위 부모-자식 전파 가능 (비쌈) 영향 적음 (덜 비쌈)
속성 변경 Reflow? Repaint? 비고 color,background-color❌ ✅ 색상만 변경 visibility❌ ✅ 공간은 유지 display✅ ✅ 공간 제거 width,height,padding,margin✅ ✅ 레이아웃 변경 opacity,box-shadow,border-color❌ ✅ 시각적 요소만 변경
- 각 요소에 대해 색상, 텍스트, 그림자, 이미지 등 시각적 표현을 그림.
- 실제로 픽셀 단위로 화면에 무엇을 어떻게 그릴지 결정하는 단계.
6. Composite
- 여러 레이어(예: 배경, 텍스트, 애니메이션 등)를 GPU를 통해 합성(Composite)하여 최종적으로 사용자 화면에 출력함.
- 이 과정에서 하드웨어 가속이 활용됨.
HTML → DOM
CSS → CSSOM
DOM + CSSOM → Render Tree
→ Layout → Paint → Composite → 화면 출력
큐트걸