브라우저 렌더링 파이프라인

주소창에 URL을 치고 Enter를 누른 뒤, HTML 텍스트가 어떻게 화면의 픽셀로 바뀌는지 — Parse → Style → Layout → Paint → Composite 5단계를 단계별로 살펴봅니다.

1. 파이프라인 한눈에 보기

아래 단계를 클릭하거나 ▶ 단계 실행 버튼으로 하나씩 진행해 보세요. 각 단계에서 브라우저가 실제로 무슨 일을 하는지 설명이 나옵니다.

📄PARSE HTML → DOM

🎨STYLE CSS → CSSOM

🌳RENDER TREE DOM + CSSOM

📐LAYOUT 위치·크기 계산

🖌️PAINT 픽셀 채우기

🧩COMPOSITE 레이어 합성

단계를 클릭해서 자세한 설명을 확인하세요.

2. DOM + CSSOM = Render Tree

브라우저는 HTML을 읽어 DOM 트리를, CSS를 읽어 CSSOM 트리를 만듭니다. 이 둘을 합쳐 실제로 화면에 그려질 노드만 모은 것이 Render Tree입니다. display:none 인 요소는 Render Tree에서 빠지고, visibility:hidden 은 자리는 차지하므로 남습니다.

<!-- HTML -->
<body>
  <h1>제목</h1>
  <p>본문</p>
  <footer>비밀</footer>
</body>

/* CSS */
h1     { color: navy; }
p      { font-size: 16px; }
footer { display: none; }

DOM 트리

body

├─ h1 "제목"

├─ p "본문"

└─ footer "비밀"

CSSOM 트리

body { font: 기본 }

├─ h1 { color: navy }

├─ p { font-size: 16px }

└─ footer { display: none }

Render Tree

body

├─ h1 "제목" navy

└─ p "본문" 16px

footer (display:none → 제외)

왜 CSS는 "렌더링 차단 리소스"일까? CSSOM이 완성되기 전에는 Render Tree를 만들 수 없어서 브라우저는 화면을 그리지 못하고 기다립니다. 그래서 <head> 안의 큰 CSS 파일은 첫 화면을 늦춥니다. (이 사이트의 base.html 도 Font Awesome을 media="print" 트릭으로 비동기 로드해서 이 차단을 피합니다.)

3. Layout · Paint · Composite — 무엇이 다시 계산될까

화면이 이미 그려진 뒤 JS로 스타일을 바꾸면, 바꾼 속성에 따라 브라우저가 되돌아가는 단계가 다릅니다. 아래 버튼으로 박스의 스타일을 바꿔 보면서, 어떤 단계가 다시 도는지 카운터로 확인해 보세요.

Layout(Reflow): 0 Paint(Repaint): 0 Composite only: 0

바꾼 속성	다시 도는 단계	비용
`width`, `top`, `font-size`, DOM 추가/삭제	Layout → Paint → Composite	비쌈 (형제·자식 위치 재계산)
`background`, `color`, `box-shadow`, `visibility`	Paint → Composite	중간
`transform`, `opacity` (GPU 레이어)	Composite 만	쌈 (GPU가 처리, 60fps 애니메이션에 유리)

실전 팁: 움직이는 애니메이션은 left/top 대신 transform: translate() 를, 페이드는 opacity 를 쓰세요. Layout·Paint를 건너뛰고 Composite만 돌아서 훨씬 부드럽습니다.

4. JavaScript는 왜 파싱을 멈출까

<script> 를 만나면 브라우저는 DOM 파싱을 멈추고 스크립트를 내려받아 실행합니다. 스크립트가 document.write 로 DOM을 바꿀 수도 있기 때문입니다. 그래서 <head> 안의 일반 스크립트는 첫 화면을 크게 늦춥니다.

선언	다운로드	실행 시점	순서 보장
`<script>`	파싱 멈춤	즉시 (파싱 차단)	O
`<script defer>`	병렬	파싱 끝난 뒤, DOMContentLoaded 직전	O
`<script async>`	병렬	다운로드 되는 즉시 (파싱 중이라도)	X

<!-- 권장: 본문을 막지 않고, DOM 완성 후 순서대로 실행 -->
<head>
  <script src="/static/app.js" defer></script>
</head>

5. 꼭 기억할 용어

Critical Rendering Path — 첫 픽셀이 화면에 뜨기까지 거치는 최소 경로. 이걸 짧게 만드는 게 웹 성능 최적화의 핵심.
Reflow(Layout) — 요소의 크기·위치를 다시 계산. 한 요소가 바뀌면 주변까지 연쇄적으로 재계산될 수 있어 비쌉니다.
Repaint(Paint) — 위치는 그대로지만 색·그림자 등 겉모습만 다시 칠하기.
Layout Thrashing — 반복문 안에서 스타일을 쓰고 곧바로 offsetWidth 같은 값을 읽어 강제 동기 Reflow를 여러 번 일으키는 안티패턴.
Compositor Thread — 메인 스레드와 별개로 스크롤·transform/opacity 애니메이션을 GPU로 처리하는 스레드.

관련 학습: 이벤트 루프 · 메모리 계층 구조 · DNS 이름 해석