렌더 트리는 DOM과 CSSOM을 결합하여 화면에 실제로 표시될 요소만 담은 트리 구조입니다.
렌더 트리(Render Tree)
렌더 트리(Render Tree) 는 DOM과 CSSOM을 합쳐서, 화면에 실제로 그려질 요소만 모아놓은 트리다.
DOM은 문서의 구조를, CSSOM은 각 요소의 스타일 정보를 담고 있다. 하지만 브라우저가 화면을 그리려면 이 둘을 하나로 합친 결과물이 필요하다.
그게 바로 렌더 트리다.
설계도와 시방서, 그 다음은?
비유하자면 DOM을 건물의 설계도, CSSOM을 인테리어 시방서다.
설계도를 보면 방이 몇 개인지, 어디에 벽이 있는지 알 수 있다. 시방서를 보면 벽 색깔이 무엇인지, 바닥재가 무엇인지 알 수 있다.
하지만 실제로 건물을 지으려면, 이 두 문서를 합쳐서 "이 벽은 여기에 세우고, 색은 흰색으로 칠한다" 는 하나의 작업 지시서가 필요하다.
그리고 그 과정에서 실제로 시공하지 않는 것들은 빠진다.
설계도에 메모로 적어둔 참고사항이나, 지하에 숨겨질 배관 같은 것들은 작업 지시서에 포함되지 않는다.
렌더 트리가 바로 그 작업 지시서다.
DOM의 모든 노드가 포함되는 것이 아니라, 화면에 실제로 보이는 요소만 골라서 스타일 정보와 합친 결과물이다.
렌더 트리의 구성
브라우저는 렌더 트리를 만들 때 다음 과정을 거친다.
- DOM 트리의 최상위 노드(
document)부터 순회한다. - 각 노드에 대응하는 CSSOM 규칙을 찾아 스타일을 적용한다.
- 화면에 표시되지 않는 노드는 제외한다.
제외되는 노드
모든 DOM 노드가 렌더 트리에 포함되는 것은 아니다.
<head>,<meta>,<script>같은 비시각적 요소는 제외된다.display: none이 적용된 요소도 제외된다. 화면에 표시되지 않을 뿐만 아니라, 공간 자체를 차지하지 않기 때문이다.
display: none vs visibility: hidden
자주 혼동되는 두 속성을 정리한다.
| 속성 | 렌더 트리 포함 | 화면 표시 | 공간 차지 |
|---|---|---|---|
| 일반 요소 | O | O | O |
display: none | X | X | X |
visibility: hidden | O | X | O |
opacity: 0 | O | X | O |
display: none은 렌더 트리에서 완전히 빠진다. 존재하지 않는 것처럼 취급된다.
반면 visibility: hidden과 opacity: 0은 렌더 트리에 포함된다. 보이지 않을 뿐, 자리는 차지한다.
(다만 opacity: 0은 여전히 클릭되거나 이벤트도 살아있는 경우가 많아서 사용 시 주의)
렌더 트리가 다시 만들어질 때
렌더 트리는 한 번 만들어지면 끝이 아니다. DOM이나 CSSOM이 변경되면 렌더 트리도 다시 구성되어야 한다.
이때 두 가지 개념이 등장한다.
Reflow(리플로우)
요소의 크기나 위치가 변경되면 발생한다. 렌더 트리를 다시 구성하고, 레이아웃을 다시 계산해야 하기 때문에 비용이 크다.
Reflow를 발생시키는 대표적인 경우:
- 요소의
width,height,margin,padding변경 - DOM 노드 추가·삭제
- 브라우저 창 크기 변경
font-size변경
Repaint(리페인트)
요소의 시각적 속성만 변경되면 발생한다. 레이아웃은 그대로이고, 다시 그리기만 하면 되기 때문에 Reflow보다 비용이 적다.
Repaint만 발생하는 대표적인 경우:
color,background-color변경visibility변경box-shadow,border-radius변경
비용 비교
| 구분 | 트리거 | 비용 | 예시 |
|---|---|---|---|
| Reflow | 크기·위치·구조 변경 | 높음 | width, height, DOM 추가 |
| Repaint | 시각적 속성 변경 | 중간 | color, background |
| Composite만 | transform, opacity | 낮음 | translateX, opacity 애니메이션 |
transform과opacity는 Reflow와 Repaint를 건너뛰고 Composite 단계만 실행되기 때문에, 애니메이션에 가장 효율적인 속성이다.
참고. 브라우저 렌더링 과정
면접에서 "브라우저 렌더링 과정을 설명해주세요"라는 질문이 자주 나온다. 렌더 트리는 이 과정의 한 단계에 해당한다. 전체 흐름을 간단히 정리한다.
1. Construction(구성)
브라우저가 리소스를 받아 트리를 만드는 단계다.
- HTML 파싱 → DOM 트리 생성
- CSS 파싱 → CSSOM 트리 생성
- DOM + CSSOM → 렌더 트리 생성
2. Layout(레이아웃)
렌더 트리의 각 노드에 대해 화면에서의 정확한 위치와 크기를 계산한다.
뷰포트 크기를 기준으로, 각 요소의 박스 모델(margin, border, padding, content)을 확정하는 단계다.
3. Paint(페인트)
계산된 레이아웃을 바탕으로 실제 픽셀을 채운다. 텍스트, 색상, 이미지, 그림자 등 시각적 요소를 레이어별로 그린다.
4. Composite(합성)
Paint 단계에서 그린 여러 레이어를 GPU에서 합성하여 최종 화면을 완성한다.
전체 흐름 요약
HTML → DOM ─┐
├→ 렌더 트리 → Layout → Paint → Composite → 화면
CSS → CSSOM ┘브라우저의 렌더링 과정은 크게 4단계로 나눌 수 있습니다. 먼저 HTML과 CSS를 파싱해 DOM과 CSSOM을 만들고, 이 둘을 합쳐 렌더 트리를 만듭니다. 그리고 렌더 트리를 기반으로 레이아웃과 페인트를 진행하여 화면에 그립니다. 마지막으로 여러 레이어를 합쳐 최종 화면을 완성합니다.