브라우저는 어떻게 HTML을 파싱하고 페이지를 구성하나요 (critical rendering path)?

Question

Accepted Answer

**Critical rendering path**는 브라우저가 HTML, CSS, JS를 픽셀로 바꾸기 위해 거치는 단계의 순서입니다. 이를 이해하면 무엇이 렌더링을 막는지, 어떻게 페이지를 더 빨리 그리게 하는지 알 수 있습니다. ## 단계들 ```text 1. HTML 파싱 → DOM 트리 (문서 구조) 2. CSS 파싱 → CSSOM 트리 (스타일 규칙) 3. DOM + CSSOM → 렌더 트리 (보이는 노드 + 그 스타일) 4. Layout (reflow) → 각 노드의 기하 정보 계산 (위치/크기) 5. Paint → 픽셀 채우기 (색상, 텍스트, 이미지) 6. Composite → 레이어를 화면에 합성 ``` ## 무엇이 렌더링을 막는가 **CSS는 렌더링을 차단합니다.** 브라우저는 CSSOM이 준비될 때까지 그리지 않습니다(스타일 없는 콘텐츠의 깜빡임을 피하기 위해). 따라서 크거나 느린 CSS는 첫 페인트를 지연시킵니다. 핵심 CSS를 작게 유지하고 가능하면 인라인하십시오. **동기 스크립트는 파서를 차단합니다.** 일반 ` ``` 더 나쁜 것은, CSSOM이 필요한 동기 스크립트(예: 계산된 스타일을 읽음)는 CSS도 기다린다는 점입니다. 그래서 CSS 파일이 간접적으로 스크립트를 막고, 그 스크립트가 파서를 막을 수 있습니다. ## 어떻게 최적화하는가 - CSS를 ``에 두십시오(일찍 로드). 핵심 CSS를 인라인하십시오. - 스크립트에 `defer`(또는 `type="module"`)를 추가하거나 `` 앞에 배치하십시오. - CSS/JS를 최소화하고 압축하십시오. 사용하지 않는 규칙을 제거하십시오. - 핵심 폰트/자산에 `preload`를, 핵심 origin에 `preconnect`를 사용하십시오. - layout thrashing(JS에서 layout을 반복적으로 읽고 쓰기)을 피하십시오. 추가 reflow를 강제합니다. ## 왜 중요한가 Critical rendering path는 First Contentful Paint, Largest Contentful Paint 같은 지표를 결정합니다. CSS가 렌더링을 막고 동기 JS가 파싱을 막는다는 것을 알면, `defer`/`async`, 인라인 핵심 CSS, 리소스 힌트가 왜 페이지를 빠르게 하는지 정확히 알 수 있습니다. 이들은 이 경로를 단축하거나 차단을 풀어줍니다.