--- id: wiki-2026-0508-render-tree title: Render Tree category: 10_Wiki/Topics status: verified canonical_id: self aliases: [Browser-Render-Tree, Layout-Tree] duplicate_of: none source_trust_level: A confidence_score: 0.9 verification_status: applied tags: [browser, rendering, performance, web] raw_sources: [] last_reinforced: 2026-05-10 github_commit: pending tech_stack: language: javascript framework: web-platform --- # Render Tree ## 매 한 줄 > **"매 DOM × CSSOM = Render Tree"**. Browser는 매 parsed HTML (DOM) 과 매 styles (CSSOM) 을 매 merge — visible nodes만 매 골라 layout, paint, composite의 input 으로 사용. 2026 Chromium은 매 LayoutNG + RenderingNG로 매 진화. ## 매 핵심 ### 매 Pipeline (Critical Rendering Path) 1. **HTML → DOM** (tokenize + tree construct). 2. **CSS → CSSOM** (parse stylesheets, compute cascade). 3. **DOM + CSSOM → Render Tree** — 매 `display: none` 노드는 매 제외, `::before`/`::after` 매 포함. 4. **Layout (Reflow)** — geometry 계산. 5. **Paint** — pixel commands → layers. 6. **Composite** — GPU layer merge → screen. ### 매 Render Tree ≠ DOM - DOM 의 모든 노드 의 X. ``, `