--- id: wiki-2026-0508-브라우저-렌더링-파이프라인-critical-renderin title: 브라우저 렌더링 파이프라인(Critical Rendering Path) category: 10_Wiki/Topics status: verified canonical_id: self aliases: [Critical Rendering Path, CRP, 렌더링 파이프라인] duplicate_of: none source_trust_level: A confidence_score: 0.95 verification_status: applied tags: [frontend, browser, rendering, performance, web-vitals] raw_sources: [] last_reinforced: 2026-05-10 github_commit: pending tech_stack: language: javascript framework: browser --- # 브라우저 렌더링 파이프라인(Critical Rendering Path) ## 매 한 줄 > **"매 HTML/CSS/JS 의 화면 픽셀로 도달하는 순차적 stage chain"**. 매 Parse → Style → Layout → Paint → Composite 의 5단계 — 매 stage 의 cost 의 understand 의 LCP/INP/CLS 의 optimize 의 critical path. ## 매 핵심 ### 매 5 stages 1. **Parse**: HTML → DOM, CSS → CSSOM (parallel, but CSS blocks render). 2. **Style**: DOM + CSSOM → Render Tree (visible nodes only — `display:none` excluded). 3. **Layout (Reflow)**: geometry 계산 — x/y/width/height. 4. **Paint**: pixel 채우기 — color, image, shadow, text. 5. **Composite**: layer 합성 — GPU 의 transform/opacity 의 처리. ### 매 blocking resources - **CSS**: render-blocking — CSSOM 의 완성 의 wait. - **JS (sync)**: parser-blocking — DOM 의 build 의 pause. - **JS (`async`)**: 매 download parallel, execute when ready (parser pause). - **JS (`defer`)**: 매 download parallel, execute after DOMContentLoaded. ### 매 layer-promote triggers - `transform: translateZ(0)` / `will-change: transform`. - `position: fixed` (modern Chromium). - `