2nd/10_Wiki/Topics/브라우저 렌더링 과정 (HTML → CSSOM → Render Tree).md

브라우저 렌더링 과정 (HTML → CSSOM → Render Tree)

📌 Brief Summary

브라우저 렌더링 과정, 또는 중요 렌더링 경로(Critical Rendering Path)는 브라우저가 HTML, CSS, JavaScript 코드를 화면의 픽셀로 변환하기 위해 거치는 일련의 단계입니다 [1, 2]. 브라우저는 HTML을 파싱하여 DOM 트리를 만들고 CSS를 파싱하여 CSSOM 트리를 생성한 후, 두 트리를 결합하여 화면에 표시될 요소만 포함된 Render Tree(렌더 트리)를 구축합니다 [2, 3]. 이후 각 요소의 정확한 크기와 위치를 계산하는 Layout(레이아웃) 단계를 거쳐, 최종적으로 화면에 픽셀을 그리는 Paint(페인트) 작업을 수행하게 됩니다 [3, 4]. 이 과정을 최적화하는 것은 초기 로딩 속도를 높이고 끊김 없는 상호작용을 제공하는 프론트엔드 성능 관리의 핵심입니다 [5, 6].

📖 Core Content

• DOM (Document Object Model) 구축 단계 브라우저는 서버로부터 HTML 데이터를 수신하면 점진적(incremental) 파싱을 시작하여 바이트를 문자, 토큰, 노드로 순차적으로 변환하고 최종적으로 DOM 트리 구조를 구축합니다 [1, 7, 8]. DOM 트리는 문서의 구조와 콘텐츠를 나타내며, 파싱 과정이 점진적으로 이루어지기 때문에 브라우저는 네트워크 요청이 진행되는 중에도 트리 생성을 시작할 수 있습니다 [7, 9].

• CSSOM(CSS Object Model) 구축 단계 DOM이 콘텐츠를 나타낸다면 CSSOM은 콘텐츠의 스타일과 규칙을 정의합니다 [9, 10]. DOM 구축과 달리 CSSOM 구축은 렌더링 차단(render-Blocking) 작업입니다 [9, 10]. 브라우저는 스타일이 지정되지 않은 날 것의 HTML이 화면에 노출되는 현상(FOUC)을 방지하기 위해, 모든 링크된 스타일시트를 다운로드하고 파싱할 때까지 렌더 트리 구성을 차단합니다 [9, 10]. CSS의 계단식(Cascade) 특성 때문에 후속 규칙이 이전 규칙을 덮어쓸 수 있어 이 과정은 점진적으로 화면에 렌더링할 수 없습니다 [11, 12].

• Render Tree (렌더 트리) 생성 DOM과 CSSOM 트리가 모두 준비되면 브라우저는 이 둘을 결합하여 렌더 트리를 만듭니다 [13, 14]. 렌더 트리는 화면에 렌더링하는 데 필요한 시각적 노드들만 포함하는 정제된 트리입니다 [3, 13]. <script>, <meta> 태그나 display: none 스타일이 적용된 노드는 시각적 레이아웃에 영향을 주지 않으므로 렌더 트리에서 완전히 제외됩니다 [3, 13-15]. 단, 공간을 차지하는 visibility: hidden 요소는 렌더 트리에 포함됩니다 [16, 17].

• Layout (레이아웃 또는 Reflow) 렌더 트리가 완성되면 브라우저는 뷰포트 크기와 박스 모델을 기반으로 화면에 표시될 각 요소의 정확한 기하학적 위치(x, y)와 크기(너비, 높이)를 계산합니다 [18-21]. 창 크기를 조절하거나 JavaScript로 요소의 크기 및 위치를 변경하는 작업은 트리 전체에 걸친 연쇄적인 재계산을 유발할 수 있으며, 이 비용이 많이 드는 계산 과정을 보통 'Reflow(리플로우)'라고 부릅니다 [18, 19, 22].

• Paint (페인트 또는 Repaint) 및 Compositing (합성) 레이아웃 계산이 완료되면 계산된 기하학적 구조와 스타일(색상, 그림자, 텍스트 등)을 실제 픽셀로 변환하여 그리는 Paint 단계로 넘어갑니다 [19, 23-25]. 시각적 속성만 변경되어 레이아웃 재계산 없이 화면을 다시 그리는 과정은 'Repaint(리페인트)'라고 합니다 [23, 26]. 마지막 단계인 합성(Compositing)에서는 렌더링 엔진이 개별 레이어를 단일 이미지로 결합하여 화면에 출력하며, 애니메이션 등 특정 작업은 GPU 연산을 활용하여 성능을 높일 수 있습니다 [19, 23, 27, 28].

• React 아키텍처와의 연관성 수동으로 DOM을 직접 조작하는 것은 본질적으로 느리며 이 과정에서 불필요한 Reflow와 Repaint를 빈번하게 유발하여 화면의 버벅거림(Jank)을 초래합니다 [23, 29, 30]. React와 같은 프레임워크는 이러한 브라우저 렌더링 엔진의 구조적 한계와 비효율성을 극복하기 위해 메모리 내에 가벼운 UI 복사본인 Virtual DOM을 도입하였으며, 변경 사항을 모아 효율적으로 실제 DOM을 업데이트함으로써 렌더링 최적화를 이룹니다 [5, 29].

🔗 Knowledge Connections

• Related Topics: Virtual DOM, Reflow 및 Repaint, Critical Rendering Path (CRP)
• Projects/Contexts: 프론트엔드 성능 최적화 전략, React 컴포넌트 기반 아키텍처
• Contradictions/Notes: 소스에 따르면 HTML의 DOM 파싱은 점진적(incremental)으로 이루어지는 반면, CSSOM 구성은 스타일 덮어쓰기 문제 때문에 완료될 때까지 브라우저 화면 출력을 막는 렌더링 차단(render-blocking) 특성을 가집니다 [7, 9-11].

---

Last updated: 2026-04-25