렌더 트리

DOM + CSSOM을 합쳐서 실제 화면에 그릴 요소만 담은 트리입니다.

생성 과정

[DOM 트리]          [CSSOM]
    │                  │
    └───────┬──────────┘
            ▼
      [렌더 트리]
            │
            ▼
        화면 출력

특징: 보이는 것만 포함

<html>
  <head>
    <title>제목</title>
  </head>
  <body>
    <div>보이는 텍스트</div>
    <p style="display: none;">숨겨진 텍스트</p>
  </body>
</html>

DOM 트리 (전부 포함)

[html]
├─ [head]
│   └─ [title]
└─ [body]
    ├─ [div]
    └─ [p]

렌더 트리 (보이는 것만)

[html]
└─ [body]
    └─ [div] ── "보이는 텍스트"

X head 제외 (화면에 안 보임)
X p 제외 (display: none)

렌더 트리에서 제외되는 것

주의: visibility: hidden은 포함됨 (공간 차지)

display: none     → 렌더 트리 제외 X
visibility: hidden → 렌더 트리 포함 (안 보이지만 공간 차지)

전체 렌더링 과정

HTML 파싱 ──▶ DOM 트리
                      ├──▶ 렌더 트리 ──▶ Layout ──▶ Paint ──▶ 화면
CSS 파싱 ───▶ CSSOM ──┘