--- id: wiki-2026-0508-크리티컬-렌더링-패스-critical-rendering-p title: 크리티컬 렌더링 패스 (Critical Rendering Path) category: 10_Wiki/Topics status: needs_review canonical_id: self aliases: [] duplicate_of: none source_trust_level: A confidence_score: 0.92 tags: [uncategorized] raw_sources: [] last_reinforced: 2026-05-08 github_commit: pending inferred_by: Claude Opus 4.7 (auto-normalize 2026-05-08) tech_stack: language: unspecified framework: unspecified --- # [[크리티컬 렌더링 패스 ([[Critical Rendering Path]])]] ## 📌 한 줄 통찰 (The Karpathy Summary) 크리티컬 렌더링 패스(Critical Rendering Path, CRP)는 브라우저가 HTML, CSS, [[JavaScript]] 코드를 수신하여 화면의 픽셀로 변환하기 위해 거치는 일련의 단계를 의미합니다 [1, 2]. 브라우저는 DOM과 [[CSSOM]]을 생성하고, 이를 결합하여 렌더 트리를 구축한 뒤, 요소의 크기와 위치를 계산하는 레이아웃(Layout) 단계와 화면에 그리는 페인트(Paint) 단계를 수행합니다 [2, 3]. 이 경로를 최적화하는 것은 초기 렌더링 시간(Time to First Render)을 단축하고 사용자 상호작용의 유창함을 보장하기 위한 프론트엔드 성능 엔지니어링의 핵심 목표입니다 [1, 4]. ## 📖 구조화된 지식 (Synthesized 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]])합니다 [7, 9]. * **렌더 트리 합성 ([[Render Tree]] Synthesis)**: DOM과 CSSOM이 준비되면, 시각적으로 화면에 표시되어야 하는 노드와 그에 해당하는 계산된 스타일만 포함하는 렌더 트리를 구축합니다. `