브라우저에서 말하는 렌더링이란 뭘까? 웹 페이지는 HTML, CSS, JS의 조합으로 구성이 된다. 이들은 결국 어떠한 시각적인 파일이 아닌 해석이 필요한 코드들이기 때문에, 이를 해석하여 사용자의 화면에 '시각화'해주는 엔진이 필요하다. 이 역할을 하는 것이 결국 브라우저의 렌더링 엔진이며, 예시로 크롬과 엣지의 Blink, 사파리의 WebKit, 파이어폭스의 Gecko 엔진이 있다. '해석'의 결과는 다음과 같다.
- HTML → DOM: 문서 구조를 객체 트리로 변환
- CSS → CSSOM: 스타일 규칙을 객체 트리로 변환
- DOM + CSSOM → Render Tree: 화면에 표시될 요소 결정
- Layout & Paint: 각 요소의 크기, 위치, 색상 등을 계산해 픽셀로 출력
화면 구성 과정: HTML → DOM → CSS → CSSOM → Render Tree → Layout → Paint → Compositing → 화면 출력
HTML -> DOM
<body>
<h1>Hello</h1>
<p>World</p>
</body>Document
└─ html
└─ body
├─ h1 ("Hello")
└─ p ("World")
CSS -> CSSOM
h1 { color: red; }
p { font-size: 14px; }h1 → { color: red }
p → { font-size: 14px }
Render Tree
DOM, CSSOM을 합친, 화면에 표시될 요소만 포함한 트리
- display: none과 같은 속성의 요소는 표함되지 않음.
- visibility: hidden / opacity: 0 은 트리에 포함되고 레이아웃도 계산되지만, 최종 표시가 없거나(투명) 페인트 결과가 보이지 않을 수 있음
- 노드별 스타일 정보 포함
Render Tree
└─ body
├─ h1 (color: red)
└─ p (font-size: 14px)
Layout
Render Tree를 기반으로 각 요소의 위치, 크기 계산
브라우저의 뷰포트 크기, 폰트 크기, margin/padding 등 모든 스타일 반영
Paint
Layout에서 계산된 위치와 크기에 Render Tree의 스타일 속성을 반영
각 노드의 스타일을 그리기 명령 형태로 만듦
아직 픽셀 데이터가 만들어지지 않음
Rasterization
기록된 그리기 명령을 실제 픽셀 단위 비트맵으로 변환
레이어를 작은 타일 단위로 나눠 픽셀 채움
Compositing
복잡한 페이지는 여러 레이어로 나누어 관리 (z-index, transform 등 활용)
여러 합성 레이어를 GPU에서 결합하여 최종 프레임 출력