Antigravity Agent
63 lines
7.6 KiB
Markdown
63 lines
7.6 KiB
Markdown
---
|
|
category: Unified
|
|
tags: [auto-consolidated, technical-documentation]
|
|
title: [[DOM (Document Object Model)|DOM (Document Object Model]]
|
|
last_updated: 2026-05-02
|
|
---
|
|
|
|
# [[DOM (Document Object Model)|DOM (Document Object Model]]
|
|
|
|
## 📌 Brief Summary
|
|
[[DOM (Document Object Model)|DOM(Document Object Model]]은 브라우저가 수신한 HTML 문서 데이터를 파싱하여 생성하는 페이지 구조의 계층적 트리 표현입니다 [1-3]. 브라우저는 HTML 태그의 포함 관계를 바탕으로 부모 및 자식 노드의 트리를 형성하며, `<html>` 요소를 루트 노드로 갖습니다 [4, 5]. DOM은 페이지의 모든 콘텐츠 정보를 담고 있으며, 스타일 정보를 담은 CSSOM과 결합해 최종 화면 출력에 필요한 렌더 트리([[Render Tree|Render Tree]])를 형성하는 브라우저 렌더링 과정의 핵심 기반입니다 [6-8].
|
|
|
|
---
|
|
|
|
DOM(Document Object Model)은 브라우저가 HTML 마크업을 내부적으로 표현하기 위해 생성하는 계층적인 트리 구조의 객체 모델입니다 [1, 2]. 브라우저가 HTML 데이터를 수신하면서 점진적으로 생성하며, 웹 페이지의 모든 콘텐츠와 요소 간의 구조적 관계를 담고 있습니다 [1, 3, 4]. 자바스크립트([[JavaScript|JavaScript]]) 내의 다양한 API를 통해 DOM에 접근하고 이를 동적으로 조작할 수 있습니다 [2].
|
|
|
|
## 📖 Core Content
|
|
* **DOM 트리의 점진적 구축 (Incremental Construction)**
|
|
브라우저는 네트워크를 통해 HTML 문서의 전체 데이터를 다 받기 전부터 점진적으로 DOM 트리를 구축할 수 있습니다 [1, 4]. 초기 14KB의 데이터 패킷이 수신되면 바이트를 문자로, 문자를 토큰(startTag 및 endTag 등)으로 변환한 뒤, 최종적으로 노드(Node)로 변환하여 트리를 조립합니다 [1, 4]. 이 점진적 생성 메커니즘 덕분에 네트워크 요청이 진행 중인 상태에서도 브라우저는 렌더링 준비를 시작할 수 있습니다 [9].
|
|
|
|
* **렌더링 파이프라인에서의 DOM과 CSSOM**
|
|
DOM은 문서의 '콘텐츠'를 표현하는 반면, CSSOM은 해당 콘텐츠의 '스타일'을 정의하는 독립적인 트리 구조입니다 [9, 10]. 이 두 모델은 브라우저에 의해 결합되어 화면에 시각적으로 출력되어야 하는 노드만을 포함하는 '렌더 트리(Render Tree)'로 합성됩니다 [6, 11, 12]. 이 과정에서 `<script>`, `<meta>` 또는 `display: none`이 적용된 요소처럼 시각적 영향을 주지 않는 DOM 노드는 렌더 트리에서 제외됩니다 [8, 11-13].
|
|
|
|
* **크기와 복잡성이 성능에 미치는 영향**
|
|
DOM 트리의 깊이와 생성된 노드의 개수는 웹 성능과 직결됩니다 [5, 9]. 노드의 수가 많아질수록 렌더 트리 합성, 레이아웃(Reflow), 페인트 단계에서 브라우저가 처리해야 할 계산의 양과 시간이 증가하여 애플리케이션의 성능이 저하될 수 있습니다 [5, 7, 9, 14]. 불필요한 래퍼를 줄이고 React Fragment 등을 사용하여 DOM 노드 수를 최소화하는 것이 성능 향상에 도움이 됩니다 [15].
|
|
|
|
* **DOM 조작의 비효율성과 최적화**
|
|
[[JavaScript|JavaScript]]를 사용해 DOM을 직접 조작하고 크기나 위치 등을 변경하면, 브라우저는 문서 전체의 레이아웃(Reflow)과 페인트(Repaint) 과정을 다시 실행해야 하므로 처리 비용이 매우 높습니다 [16-18]. 이를 최적화하기 위해서는 사용된 DOM 노드나 속성값을 캐싱하고, DOM의 읽기 및 쓰기 작업을 분리하여 레이아웃 스래싱(Layout Thrashing)을 방지해야 합니다 [16, 19, 20]. React와 같은 프레임워크는 실제 DOM을 직접 수정하는 비효율성을 피하고자 메모리 내에 가벼운 사본인 가상 DOM([[Virtual DOM|Virtual DOM]])을 생성하여 조작을 추상화합니다 [17, 21, 22].
|
|
|
|
---
|
|
|
|
- **DOM 생성 과정 (DOM Construction Process)**
|
|
브라우저는 서버로부터 HTML 문서를 수신하면 즉시 파싱(Parsing)을 시작합니다 [5]. 이 과정은 전체 문서가 도착하기를 기다리지 않고 점진적(incremental)으로 이루어집니다 [1]. 수신된 데이터(바이트)는 문자로 변환되고, 이후 토큰(tokens)으로 변환된 다음 최종적으로 노드(nodes)로 변환되어 계층적인 DOM 트리를 형성합니다 [1, 6]. 시작 태그(startTag)와 종료 태그(endTag) 사이에 다른 태그들이 포함되는 방식으로 노드 간의 계층 구조가 정의됩니다 [6].
|
|
|
|
- **트리 구조와 구성 (Tree Structure and Composition)**
|
|
DOM 트리는 문서의 콘텐츠를 묘사하며, `<html>` 요소가 트리 구조의 첫 번째 요소이자 루트(root) 노드가 됩니다 [4]. 다른 요소 안에 중첩된 요소들은 자식 노드(child nodes)가 되어 트리 내부에서 각 요소의 관계와 계층을 반영합니다 [4]. 생성된 DOM 트리는 이후 스타일 정보를 담고 있는 [[CSSOM(CSS Object Model)|CSSOM(CSS Object Model]]과 결합하여 화면에 그려질 요소를 결정하는 렌더 트리([[Render Tree|Render Tree]])를 구축하는 데 사용됩니다 [7, 8].
|
|
|
|
- **성능에 미치는 영향 (Performance Implications)**
|
|
DOM 트리의 깊이와 복잡성은 브라우저의 성능과 직결됩니다 [9]. DOM에 존재하는 노드의 수가 많아질수록 렌더 트리 생성, 레이아웃(Layout), 페인트(Paint)와 같은 중요 렌더링 경로([[Critical Rendering Path|Critical Rendering Path]])의 후속 작업에 소요되는 시간과 연산 부담이 커지게 됩니다 [3, 4, 9].
|
|
|
|
- **직접적인 DOM 조작의 한계 (Limitations of Direct DOM Manipulation)**
|
|
자바스크립트 등을 통해 DOM을 직접 변경하는 작업은 브라우저의 레이아웃(Reflow)과 페인트 단계를 지속적으로 트리거하기 때문에 본질적으로 속도가 느리고 비용이 많이 듭니다 [10]. 애플리케이션이 복잡해질 경우 여러 노드를 개별적으로 업데이트하면 중복 연산이 발생하며, 이는 React와 같은 프레임워크가 가상 DOM([[Virtual DOM|Virtual DOM]])을 도입하게 된 핵심 배경이 되었습니다 [10].
|
|
|
|
## ⚖️ Trade-offs & Caveats
|
|
No trade-offs available.
|
|
|
|
## 🔗 Knowledge Connections
|
|
- **Related Topics:** CSSOM (CSS Object Model), [[Render Tree|Render Tree]], Virtual DOM, [[Critical Rendering Path (CRP)|Critical Rendering Path (CRP]], Reflow (Layout), Repaint
|
|
- **Projects/Contexts:** 프론트엔드 성능 최적화(DOM 접근 최소화 및 렌더링 파이프라인 관리), React의 렌더링 엔진 구조 및 재조정([[Reconciliation|Reconciliation]]) 과정 이해 [6, 17, 23, 24].
|
|
- **Contradictions/Notes:** DOM 구축은 HTML을 파싱하면서 '점진적(incremental)'으로 이루어지지만, CSSOM 구축은 렌더링을 차단(render-[[Blocking|Blocking]])하며 점진적으로 처리되지 않는다는 구조적 차이가 있습니다 [1, 7, 9].
|
|
|
|
---
|
|
*Last updated: 2026-04-25*
|
|
|
|
---
|
|
|
|
- **Related Topics:** [[CSSOM(CSS Object Model)|CSSOM(CSS Object Model]], Critical Rendering Path(CRP), Render Tree, [[Virtual DOM|Virtual DOM]], Reflow / Repaint
|
|
- **Projects/Contexts:** 브라우저 렌더링 과정 ([[Browser|Browser]] Rendering Process), 프론트엔드 성능 최적화 및 React의 Virtual DOM 도입 배경 이해 [7, 10, 11]
|
|
- **Contradictions/Notes:** 소스 간의 모순된 정보는 없습니다. 참고로 DOM의 생성은 점진적(incremental)으로 진행되어 문서를 파싱하는 동안에도 화면을 그리기 시작할 수 있지만, [[CSSOM|CSSOM]]의 생성은 렌더링을 차단(render-[[Blocking|Blocking]])한다는 점에서 두 모델의 구축 방식에 차이가 있습니다 [3, 9].
|
|
|
|
---
|
|
*Last updated: 2026-04-25*
|