이전 글
한 줄 정리
HTML 파싱이란 HTML 코드를 브라우저에서 사용할 수 있는 구조로 변환하는 과정을 의미한다.
HTML 파싱(HTML Parsing) 이란?
HTML 파싱(Parsing)이란 구문 분석이라고도 불리며, HTML 코드를 토큰(token)으로 분해하고, 이것으로 이루어진 파스 트리(parse tree)를 생성하는 과정이다.
즉 브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환하는 것을 의미한다.
파싱 과정
과정에 대한 간략한 설명
- Bytes → Characters
16진수화된 데이터를 HTML 마크업으로 변환 - Characters → Token
HTML 마크업을 의미를 가진 각각의 Token으로 변환(예 : html 시작 토큰, head 시작 토큰, 문자 토큰 등) - Tokens → Nodes
각 Token들에 관계성을 부여하기 위해 Node로 변경 - Nodes → DOM
관계성을 가진Node들로 DOM 형성
HTMl 파싱 알고리즘의 더 자세한 설명은 다음 문서를 확인하면 된다.
HTML Standard
html.spec.whatwg.org
토큰(token)
HTML 파싱에서 토큰이란 의미를 가지는 최소 단위를 뜻한다.
HTML 토큰화
HTML 토큰화란 HTML 마크업을 통해 HTML 토큰을 생성하는 것을 의미한다.
토큰화 알고리즘
그림 3은 html 문서에 대한 토큰화를 진행하는 과정이다.
<html> 태그로부터 토큰 발행이 시작되며, html 문서 내 각 태그들의 토큰화를 거친 후 </html> 태그를 마지막으로 파일 종료 토큰이 생성하여 토큰화가 종료된다.
| 상태 | 설명 | |
| 초기 | 자료 상태 | |
| < | 태그 열림 상태 | |
| a-z | 태그 이름 상태 | 시작 태그 토큰 생성 |
| / | 태그 이름 상태 | 종료 태그 토큰 생성 |
| > | 자료 상태 | 토큰 발행 |
표 1) 토큰화에 대한 태그의 상태와 설명
노드(Node)
토큰은 의미를 지니는 최소 단위들이다. 이러한 토큰들은 의미만 지닐 뿐 관계성을 가지고 있지 않다.
(예: 시작 태그 토큰은 해당 태그가 시작된다는 의미만 지닐 뿐, 태그 내에 다른 태그들이 있다는 것은 알려주지 않는다.)
따라서 각 태그에 대한 관계(트리구조)를 형성하기 위해 토큰을 노드로 변환하는 과정을 거친다.
트리 구축 알고리즘
트리 구축 단계의 입력값은 토큰화를 통해 생성된 토큰이다.
다음 Hello world 코드를 통해 토큰들이 트리를 구축하는 과정을 살펴보겠다.
<html>
<body>
Hello world
</body>
</html>
- 초기 모드
html 토큰을 받는다. - html 이전
html 토큰이 처리되어 HTMLHtmlElement 요소를 생성하고 문서 객체의 최상단에 추가된다. - head 이전
body 토큰을 받는다. 이때 head 토큰이 없더라도 HTMLHeadElement 요소가 생성되어 트리에 추가된다. - head 내부
- head 다음
body 토큰이 처리되어 HTMLBodyElement 요소가 생성되어 추가된다. - body 내부
"Hello world" 문자열 토큰을 받는다. - body 종료 토큰
body 종료 토큰을 받고, body 다음 상태가 된다. - html 종료 토큰
html 종료 토큰을 받고, body 다음 다음 상태가 된다. - 파일 종료 토큰
파일 종료 토큰을 받으면 파싱을 종료한다. - complete
파싱이 종료가 되면, 브라우저는 문서와 상호작용이 가능하게 된다.
또한 "load" 이벤트가 발생하며, 문서 파싱 이후 실행되어야하는 스크립트의 파싱이 시작된다.
트리 구축에 대하여 더 자세한 설명은 바로 아래 첨부된 링크를 통해 확인할 수 있다.
HTML Standard
The attribute name, followed by zero or more ASCII whitespace, followed by a single U+003D EQUALS SIGN character, followed by zero or more ASCII whitespace, followed by the attribute value, which, in addition to the requirements given above for attribute v
html.spec.whatwg.org
DOM(The Document Object Model)
DOM은 문서 객체 모델로, HTMl 문서를 브라우저가 이해할 수 있는 구조로 구성된 프로그램 인터페이스이다.
DOM은 HTML 문서를 노드의 계층 구조 트리로 구조화된 표현(structured representation)을 제공한다. 또한 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 문서 구조, 스타일, 내용 등을 변경할 수 있게 한다.
참고자료
'Front-end > Internet' 카테고리의 다른 글
| 호스팅(Hosting)이란? (0) | 2021.12.15 |
|---|---|
| 웹 브라우저에 대해서 (3) (0) | 2021.12.13 |
| 웹 브라우저에 대해서 (1) (0) | 2021.12.10 |
| 인터넷은 어떻게 작동하는 것일까? (패킷) (0) | 2021.12.09 |
| 인터넷은 어떻게 작동하는 것일까? (네트워크) (0) | 2021.12.09 |
댓글