Fundamentals/Browser Mechanics

브라우저에서 어떻게 DOM으로 변환되는지

sod0l 2024. 9. 9. 23:11

1. HTML 문서 읽기

HTML 문서 요청: 사용자가 웹 페이지를 열면, 브라우저가 웹 서버에 HTML 문서를 요청한다. 웹 서버는 이 요청에 응답하여 HTML 문서를 브라우저로 보낸다.
HTML 문서 수신: 브라우저는 HTML 문서의 내용을 네트워크를 통해 받아온다.

2. HTML 파싱(Parsing)

파싱(Parsing)*은 HTML 문서의 텍스트를 브라우저가 이해할 수 있는 구조로 변환하는 과정이다. 이 과정은 다음과 같이 진행된다:

문서 파서(Document Parser): 브라우저가 HTML 문서를 문자 단위로 읽어들이며, 문서 파서가 이를 분석한다. 문서 파서는 HTML 태그와 내용을 이해하고 구조를 형성한다.
토큰화(Tokenization): HTML 문서의 텍스트가 토큰(Token)이라고 불리는 작은 단위로 나뉜다. 각 토큰은 HTML 태그(예: <div>), 속성(예: id="example"), 텍스트 콘텐츠(예: Hello World) 등을 포함한다.
구문 트리 생성(Syntax Tree): 파서가 토큰들을 기반으로 구문 트리(Syntax Tree)를 생성한다. 구문 트리는 HTML 문서의 구조를 나타내는 트리 형태의 데이터 구조다.

3. DOM(Document Object Model) 생성

DOM 생성: 구문 트리를 바탕으로 브라우저가 DOM(Document Object Model)을 생성한다. DOM은 HTML 문서의 구조를 객체 형태로 표현한 것이다. 각 HTML 태그는 DOM의 노드(Node)로 변환된다.
- 노드(Node): DOM에서 각 HTML 태그, 속성, 텍스트는 노드로 표현된다. 예를 들어, <div> 태그는 div 노드로, id="example"은 속성 노드로, 텍스트는 텍스트 노드로 표현된다.
트리 구조: DOM은 트리 구조로, 각 노드는 부모 노드와 자식 노드를 가지며, 이 관계를 통해 HTML 문서의 계층 구조를 반영한다. 예를 들어, <body> 태그는 <div> 태그를 자식으로 가질 수 있다.

4. 렌더링

렌더 트리(Render Tree): DOM이 생성되면, 브라우저가 렌더 트리(Render Tree)를 생성한다. 렌더 트리는 화면에 실제로 표시될 요소들만 포함된 트리다. 스타일 정보(CSS 등)를 포함하여 각 요소의 위치와 크기 등을 결정한다.
화면 그리기(Painting): 렌더 트리를 바탕으로 브라우저가 화면에 실제로 요소를 그린다. 이 과정에서 요소의 색상, 위치, 크기 등을 계산하여 사용자의 화면에 표시한다.

단계별 요약

HTML 요청 및 수신: 브라우저가 웹 서버에서 HTML 문서를 요청하고 받아온다.
파싱: 브라우저가 HTML 문서를 읽어 토큰화하고, 구문 트리를 생성한다.
DOM 생성: 구문 트리를 바탕으로 브라우저가 DOM을 생성하여 HTML 문서의 구조를 객체 형태로 표현한다.
렌더링: 브라우저가 DOM을 바탕으로 렌더 트리를 생성하고, 화면에 요소를 그린다.

예제

아래는 간단한 HTML 문서와 그 DOM 구조를 예시로 설명한다.

HTML 문서

html
코드 복사
<!DOCTYPE html>
<html>
<head>
    <title>Sample Page</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is a sample paragraph.</p>
</body>
</html>

DOM 구조

html (루트 노드)
- head
  - title: "Sample Page"
- body
  - h1: "Hello, World!"
  - p: "This is a sample paragraph."

이렇게 브라우저는 HTML 문서를 파싱하여 DOM 트리를 생성하고, 이를 바탕으로 웹 페이지를 화면에 렌더링한다. DOM은 JavaScript가 페이지의 내용을 조작하고 상호작용할 수 있는 방법을 제공한다.