sodol-dotcom

  2. 1. HTML 문서 읽기
  3. 2. HTML 파싱(Parsing)
  4. 3. DOM(Document Object Model) 생성
  5. 4. 렌더링
  6. 단계별 요약
  7. 예제
  8. DOM 구조

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

Fundamentals/Browser Mechanics

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

sod0l 2024. 9. 9. 23:11

1. HTML 문서 읽기

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

2. HTML 파싱(Parsing)

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

3. DOM(Document Object Model) 생성

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

4. 렌더링

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

단계별 요약

  1. HTML 요청 및 수신: 브라우저가 웹 서버에서 HTML 문서를 요청하고 받아온다.
  2. 파싱: 브라우저가 HTML 문서를 읽어 토큰화하고, 구문 트리를 생성한다.
  3. DOM 생성: 구문 트리를 바탕으로 브라우저가 DOM을 생성하여 HTML 문서의 구조를 객체 형태로 표현한다.
  4. 렌더링: 브라우저가 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가 페이지의 내용을 조작하고 상호작용할 수 있는 방법을 제공한다.

'Fundamentals > Browser Mechanics' 카테고리의 다른 글

Reflow & Repaint  (0) 2024.10.02
브라우저의 렌더링 과정(Critical Rendering Path)  (2) 2024.10.02
JavaScript와 HTML의 상호작용 그리고 DOM  (0) 2024.09.09
'Fundamentals/Browser Mechanics' Related Articles more