사용자가 웹사이트에 접속하면, 서버는 먼저 HTML 파일을 브라우저로 전달합니다. 하지만 이 HTML이 곧바로 화면에 보이는 건 아니에요. 브라우저는 이 HTML을 바탕으로 여러 과정을 거쳐 화면을 렌더링하게 됩니다.
1. HTML 파싱 (DOM 트리 생성)
HTML 파일을 위에서 아래로 파싱하면서 태그들을 노드로 변환 → DOM 트리 생성
🔍 브라우저는 HTML을 파싱하면서 JS 파일을 언제, 어떻게 요청할까?
브라우저는 HTML을 파싱하던 중
<script src="...">태그를 만나면, 해당 JS 파일을 요청하고 다운로드합니다.
이후 JavaScript가 실행되면, 이미 만들어진 DOM을 조작하거나 변경하여 화면에 실제 내용을 렌더링합니다.
2. CSS 파싱 (CSSOM 트리 생성)
브라우저는 HTML을 파싱하면서 <link rel="stylesheet" href="..."> 태그를 만나면, 즉시 해당 CSS 파일을 요청하고 다운로드하며, HTML 파싱도 병렬로 계속 진행됩니다.
🔍 DOM 트리를 다 만든 후에 CSS를 파싱하나요?
❌ 아니요. DOM과 CSSOM은 동시에 병렬로 만들어집니다.
✅ 정확한 동작 흐름
- 브라우저가 HTML을 위에서 아래로 파싱하며 DOM 트리 생성 시작
- 파싱 도중
<link rel="stylesheet">또는<style>태그를 만나면
→ CSS 파일을 요청하고, CSSOM 생성도 병렬로 시작- 즉, DOM 트리 생성과 CSS 파싱은 동시에 진행됨
- DOM + CSSOM이 모두 완성되어야 → 렌더 트리(Render Tree)를 생성할 수 있음
3. 렌더 트리(Render Tree) 생성
DOM 트리 + CSSOM 트리를 합쳐서 보이는 요소만 골라 렌더 트리 생성합니다.
(예: display: none은 제외)
4. 레이아웃 (Reflow) - 레이아웃을 다시 계산하는 과정
Reflow는 브라우저가 렌더 트리를 기반으로 각 요소의 위치와 크기를 계산해 레이아웃을 배치하는 과정입니다. DOM이나 스타일이 변경되면 발생하며, 비용이 많이 드는 작업이기 때문에 성능에 영향을 줄 수 있습니다.
5. 페인트(Repaint) - 계산 결과를 화면에 다시 그리는 과정
repaint는 요소의 모양이나 스타일이 변경될 때 발생합니다. 요소의 레이아웃은 그대로이고, 색상이나 배경 등의 스타일만 변경되는 경우를 말합니다.
💡transform, opacity는 리플로우, 리페인트 생략 (GPU가 관여할 수 있는 속성)
6. Composite
여러 레이어를 합성(Composite)해 화면에 최종 표시합니다.
💡 JavaScript나 CSS가 변경되면 어떤 일이 일어나나요?
- JavaScript가 DOM을 수정하면 →
DOM 트리가 변경되고, 이를 바탕으로 렌더 트리가 다시 생성됩니다.- CSS를 변경하면 →
CSSOM이 변경되고, 기존 DOM과 조합해 렌더 트리가 다시 만들어집니다.-> 이후 렌더 트리 변화에 따라 리플로우(Reflow) 또는 리페인트(Paint)가 발생하게 됩니다.
출처
