# [[크리티컬 렌더링 패스 (Critical Rendering Path)|크리티컬 렌더링 패스 (Critical Rendering Path]] ## 📌 Brief Summary 크리티컬 렌더링 패스(Critical Rendering Path, CRP)는 브라우저가 HTML, CSS, [[JavaScript|JavaScript]] 코드를 수신하여 화면의 픽셀로 변환하기 위해 거치는 일련의 단계를 의미합니다 [1, 2]. 브라우저는 DOM과 [[CSSOM|CSSOM]]을 생성하고, 이를 결합하여 렌더 트리를 구축한 뒤, 요소의 크기와 위치를 계산하는 레이아웃(Layout) 단계와 화면에 그리는 페인트(Paint) 단계를 수행합니다 [2, 3]. 이 경로를 최적화하는 것은 초기 렌더링 시간(Time to First Render)을 단축하고 사용자 상호작용의 유창함을 보장하기 위한 프론트엔드 성능 엔지니어링의 핵심 목표입니다 [1, 4]. ## 📖 Core Content **주요 진행 단계 (Sequential Progression of Steps)** * **DOM 트리 생성 (DOM Construction)**: 브라우저가 HTML 바이트를 파싱하여 점진적(incremental)으로 DOM 트리를 구축합니다 [5, 6]. 노드의 수가 많을수록 이후 단계에서 소요되는 시간이 길어집니다 [1, 7]. * **CSSOM 트리 생성 (CSSOM Construction)**: CSS 규칙을 파싱하여 스타일 정보를 담은 CSSOM 트리를 생성합니다 [7, 8]. DOM과 달리 CSSOM 생성은 점진적이지 않으며, 브라우저는 모든 CSS를 처리할 때까지 페이지 렌더링을 차단(Render-[[Blocking|Blocking]])합니다 [7, 9]. * **렌더 트리 합성 ([[Render Tree|Render Tree]] Synthesis)**: DOM과 CSSOM이 준비되면, 시각적으로 화면에 표시되어야 하는 노드와 그에 해당하는 계산된 스타일만 포함하는 렌더 트리를 구축합니다. `