## Critical Rendering Path HTML, CSS, JS 등을 받아서 화면에 픽셀로 출력하기 위한 전체 흐름. 크게 HTML/CSS 파싱, 렌더 트리 생성, 레이아웃, 페인트, 컴포지트의 5단계로 나뉜다. ## 1. HTML/CSS 파싱 HTML 문서를 파싱해서 DOM(Document Object Model) 트리를 만든다. 동시에 CSS를 파싱해서 CSSOM(CSS Obect Model) 트리를 만든다. ## 2. 렌더 트리 생성 DOM과 CSSOM을 결합해서 렌더 트리를 생성한다. 렌더 트리에는 실제 화면에 표시될 요소들만 포함되기 때문에 `display: none` 같은 요소들은 렌더 트리에서 제외된다. (`visibility: hidden` 의 경우에는 자리를 차지하고 있기 때문에 포함된다.) ## 3. 레이아웃/리플로우 각 요소들의 위치와 크기를 계산한다. 이 과정에서 뷰포트의 크기나 폰트 크기 등이 고려된다. **레이아웃**은 브라우저가 요소들의 위치와 크기를 계산하는 과정을 의미하고 **리플로우**는 이미 계산된 레이아웃이 DOM이나 스타일 변경으로 인해 다시 계산되는 과정을 의미한다. ## 4. 페인트 각 노드를 실제 픽셀로 그릴 준비를 한다. 색상이나 테두리, 그림자, 이미지 등이 이 단계에서 계산된다. ## 5. 컴포지트 레이어들을 GPU에서 합성해서 최종적으로 화면에 렌더링한다. transform, 애니메이션, z-index 등으로 여러 개의 레이어가 생길 수 있다. ## 관련 문서 - [[브라우저 렌더링 파이프라인과 Event Loop]]