브라우저의 동작 원리(2) - HTML 파서

HTML 파서

HTML 마크업 -> 파싱 트리

HTML 문법 정의

by W3C, 명세로 정의됨

Context Free Language가 아님

HTML 정의를 위한 공식적 형식으로 DTD(문서 형식 정의)가 있지만 이것은 CFG가 아님

HTML이 XML과 유사하기 때문 + HTML은 너그럽다. 암묵적으로 태그 생략 가능

DOM(Document Object Model)

파싱 트리는 DOM요소와 속성 노드의 트리로서 출력 트리가 된다. 트리의 최상위 객체: 문서

e.g.

DOM은 W3C에 의해 명세가 정해져 있다. 문서를 다루기 위한 일반적인 명세. HTML요소를 설명하기도 한다.

트리가 DOM 노드를 포함한다 == DOM 접점의 하나를 실행하는 요소 구성

파싱 알고리즘

일반적인 상향식/하향식 파싱이 안되는 이유:

1. 언어가 너그러움
2. HTML 오류에 대한 브라우저의 관용
3. 변경에 의한 재파싱. 스크립트 태그는 토큰을 추가할 수 있기 때문에 실제로는 입력 과정에서 파싱이 수정된다.

HTML 파싱 알고리즘

• 토큰화토큰 인지, 트리 생성자로 넘기고 다음 문자를 확인함. 입력의 마지막까지 이를 반복
• : 어휘 분석. 입력 값 -> 토큰 파싱. (토큰 = 시작 태그, 종료 태그, 속성 이름, 속성 값)
• 트리 구축

토큰화 알고리즘

알고리즘의 결과물 = HTML토큰

알고리즘을 상태 기계라고 볼 수 있다. 각 상태는 하나 이상의 연속된 문자를 입력 받아, 이 문자에 따라 다음 상태를 갱신.

결과에 영향 주는 요소 = 현재의 토큰화 상태 + 트리 구축 상태

1. 초기 상태 : "자료 상태"
2. < 문자 만나면 "태그 열림 상태"
3. a~z문자 만나면 "시작 태그 토큰" 생성, 상태는 "태그 이름 상태"로 변함. 각 문자에는 새로운 토큰 이름이 붙음(html토큰 생성)
4. '>'문자에 도달하면 현재 토큰 발행. 상태는 "자료 상태"로 돌아옴

트리 구축 알고리즘

• 파서 생성되면 문서 객체 생성

• 트리 구축 진행되는 동안 문서 최상단에서 DOM트리 수정, 요소 추가

• 토큰화로 발행된 각 노드는 트리 생성자에 의해 처리됨. 각 토큰을 위한 DOM요소의 명세는 정의되어있다. DOM 트리에 요소를 추가하는 게 아니라면 열린 요소는 스택에 추가된다. 스택은 부정확한 중첩과 종료되지 않은 태그를 교정한다.
• 알고리즘 = 상태기계. 상태 = "삽입 모드"

파싱이 끝난 후

브라우저는 문서와 상호작용 가능. 문서 파싱 이후 실행되어야 하는 "지연" 모드 스크립트 파싱 시작

문서 상태 "완료", "로드" 이벤트 발생

브라우저 오류 처리

1. 어떤 태그의 안쪽에 추가하려는 태그가 금지된 것일 때 허용된 태그를 먼저 닫고, 금지된 태그는 외부에 추가
2. 파서가 직접 요소 추가 X
3. 인라인 요소 안에 블록 요소가 있는 경우 부모 블록 요소를 만날 때까지 모든 인라인 태그를 닫는다
4. 태그를 추가하거나 무시할 수 있는 상태가 될 때까지 요소를 닫는다

 

 

 

출처:https://d2.naver.com/helloworld/59361 (이스라엘 개발자 탈리 가르시엘(Tali Garsiel)이 html5rocks.com에 게시한 "How Browsers Work: Behind the scenes of modern web browsers"의 번역본)