웹 브라우저 DOM 파서가 HTML을 분석하는 방식, Document를 재구성하는 방식에 대해 학습
DOM
HTML 문서의 계층적 구조를 표현하는 객체 모델
DOM 파서는 이러한 DOM 트리를 생성하는 핵심 구성 요소
브라우저가 HTML을 처리하는 과정
브라우저가 HTML 문서를 받아서 화면에 그리기까지의 과정을 Critical Rendering Path라고 한다.
1단계: 토큰화
HTML 문자열 -> 한 글자씩 읽기 -> 토큰으로 변환
예시:
<div>Hello</div>↓
토큰 1: <div> (시작 태그)
토큰 2: Hello (텍스트)
토큰 3: </div> (종료 태그)2단계: 파싱
토큰들 -> 문법 규칙 적용 -> DOM 트리 생성
예시:
div 노드
└── 텍스트 노드: "Hello"3단계: DOM 트리 완성
HTML 요소들 -> 계층적 객체 구조 -> DOM 트리DOM 파서의 주요 특징
- 스트리밍 방식
- 전체 HTML을 다 받기 전에 받은 부분부터 바로 파싱 시작
- 사용자가 더 빠르게 화면을 볼 수 있음
- 오류 허용
- HTML 문법 오류가 있어도 자동으로 교정해서 처리
- 태그가 안 닫혀있으면 브라우저가 자동으로 닫아줌
- 파싱 중단
<script>태그를 만나면 HTML 파싱을 일시 중단- 스크립트가 DOM을 수정할 수 있기 때문
컴파일러 이론과 연결
| 단계 | 역할 | 입력 | 출력 |
|---|---|---|---|
| 토크나이저 | HTML을 토큰으로 쪼개기 | HTML 문자열 | 토큰 배열 |
| 파서 | 토큰을 구조화 | 토큰 배열 | DOM 트리 |
DOM 파서가 Document를 재구성하는 방식
Document?
웹 브라우저에서 HTML 문서 전체를 나타내는 객체
즉,<html>태그를 포함한 전체 웹페이지
모든 HTML 요소들은 이 Document 아래에 계층적으로 구성된다
1. 초기 Document 생성
브라우저가 HTML을 처음 받으면 아래와 같은 과정이 진행된다.
HTML 문자열 -> 토큰화 -> 파싱 -> DOM 트리 -> Document 객체 생성
2. 재구성이 필요한 상황
JS를 통해 DOM을 변경할 때 Document가 재구성된다.
e.g.) 요소 추가: document.createElement()
3. 재구성 과정
-
변경 감지
- 브라우저가 DOM 조작을 감지 (e.g. JS 코드에 의한 조작)
-
DOM 트리 업데이트
- 메모리에 있는 DOM 트리 구조를 새로운 내용으로 갱신
- 변경된 노드와 그 부모/자식 노드들의 관계 재정립
-
렌더 트리 재구성
- DOM 트리 + CSS 정보 -> 새로운 렌더 트리 생성
- 화면에 실제로 표시될 요소들의 구조 결정
-
레이아웃 계산 (리플로우)
- 각 요소의 크기와 위치를 다시 계산
- 변경된 요소가 다른 요소들에 미치는 영향 계산
-
화면 그리기 (리페인트)
- 계산된 정보를 바탕으로 실제 화면에 픽셀 그리기
Web FE Dev | Microsoft Student Ambassadors Alumni