브라우저에서 HTML의 맥락에서 토큰은 마크업 언어의 가장 작은 개별 단위를 의미합니다. 브라우저는 HTML 문서를 구문 분석할 때 콘텐츠를 토큰으로 분류하고, 이 토큰은 DOM(문서 객체 모델) 트리를 구성하는 데 사용됩니다.
HTML 구문 분석에는 네 가지 주요 유형의 토큰이 있습니다:
시작 태그: HTML 요소의 시작을 나타냅니다. 여기에는 태그 이름과 요소와 관련된 모든 속성이 포함됩니다.
끝 태그: HTML 요소의 종료를 나타냅니다. 태그 이름 앞에 슬래시(/)가 오는 태그 이름으로 구성됩니다.
코멘트: 문서의 HTML 주석을 나타냅니다. <!--로 시작하고 -->로 끝납니다.
문자: HTML 요소 내의 일반 텍스트 또는 콘텐츠를 나타냅니다.
브라우저는 HTML 문서를 수신하면 "토큰화(Tokenization)" 또는 "렉싱(Lexing)"이라는 프로세스를 거칩니다. 이 과정에서 문자의 입력 스트림을 이러한 개별 토큰으로 분해하여 토큰 스트림(최소단위 +의미 단위로 합성하는 단계로 추론됨)을 생성합니다. 다음 단계는 파싱으로, 브라우저는 이 토큰 스트림을 사용하여 HTML 문서의 구조와 콘텐츠를 나타내는 DOM 트리를 구성합니다. 그런 다음 이 DOM 트리는 브라우저의 디스플레이에 웹 페이지를 렌더링하는 데 사용됩니다.
토큰 스트림
토크나이저(Tokenizer), 렉서(Lexer)
토크나이저란 어떤 구문에서 의미있는 요소들을 토큰으로 쪼개는 역할을 하고 렉서는 토큰의 의미를 분석하는 역할을 한다.
Tokenizer, Lexer 의 역할을 합하여 Lexical anlyze라고 한다. Lexical Analyze란 의미 있는 조각을 검출하여 토큰을 생성하는 것을 말한다.
예를들어, Lexical analysis is the first step of compiler"라는 문장에서 'L', 'e', 'x', 'i', 'c', 'a', 'l'을 따로 놓으면 어떠한 의미도 없지만, "Lexical"이라는 하나의 조각으로 보면 의미를 갖게 된다.
이렇게 토큰 단위로 키워드나 속성을 정의한 이후에 parser에게 넘겨준다.
다만 위의 자료는 Machine Learning 에쓰는 파싱임을 언급함
토큰화 알고리즘
HTML 토큰을 순서대로 구성하는 단계는 다음과 같습니다:
<html>
<body>
Hello world
</body>
</html>상태 값 순서
데이터 상태 -> 태그 열기 상태 -> 태그 토큰 시작 -> 태그 이름 상태 -> (다시) 데이터 상태
1. 초기 상태:"데이터 상태"
- 입력 처리를 시작하는 HTML 파서의 초기 상태입니다.
2. "<" 문자 발생:"태그 열기 상태"
- 구문 분석기가 '<' 문자를 발견하면 상태가 "태그 열기 상태"로 변경됩니다.
3. a-z 문자 사용:"태그 토큰 시작"
- 구문 분석기가 a-z 문자를 소비(확인,분석)하면 "태그 토큰 시작"을 생성하고 "태그 이름 상태"로 변경됩니다.
4. ">"까지 문자를 소비: "태그 이름 상태"
- 구문 분석기는' >' 문자가 소비(확인, 분석)될 때까지 이 상태를 유지합니다.
- 발견되는 각 문자는 새 토큰 이름에 추가됩니다. 이 경우 생성된 토큰은 HTML 토큰입니다.
5. 토큰 방출: "데이터 상태"
- '>' 문자에 도달하면 현재 토큰이 방출되고 상태가 "데이터 상태"로 다시 변경됩니다.
- 이 경우 html 토큰이 방출됩니다.
여기까지 <html>이라는 문법 파싱과 토큰화가 완료된 상태
6. "<body>" 처리하기: <body> 태그도 유사하게 처리되며 html 태그와 본문 태그가 모두 방출됩니다.
Hello world 문자를 만났을 때
7. 문자 토큰 방출: "데이터 상태"
- "Hello world"의 문자를 소비(확인,분석)하면 <body>의 <에 도달할 때까지 각 문자에 대한 문자 토큰을 생성하고 방출합니다.
8. 엔드 태그 토큰 생성: "태그 이름 상태"
- '/' 문자로 인해 엔드 태그 토큰이 생성되고 상태가 "태그 이름 상태"로 변경됩니다.
9. ">"까지 문자를 소비합니다: "데이터 상태"
- 구문 분석기가 '>' 문자에 도달할 때까지 이 상태를 유지합니다.
- 발견되는 문자는 최종 태그 토큰을 생성합니다.
10. 토큰 방출: "데이터 상태"
- '>' 문자에 도달하면 엔드 태그 토큰이 방출되고 상태는 "데이터 상태"로 돌아갑니다.
이 경우 </body> 태그 토큰이 방출됩니다.
11. "</html>" 처리하기: </html> 입력은 </body>와 유사하게 처리됩니다.
출처
https://web.dev/howbrowserswork/
Chat GPT
'나의 FE피봇이야기 > Dev_Knowledge' 카테고리의 다른 글
| [Lecture]Network 2강, Internet Structure. (0) | 2023.08.15 |
|---|---|
| [Lecture]Network 1강 (0) | 2023.08.14 |
| [Front-End] 브라우저 엔진과 렌더링 엔진의 차이는 뭘까? (0) | 2023.07.22 |
| [Front-End]Compiler (0) | 2023.07.16 |
| [Front-End]Parsing 이란 (0) | 2023.07.13 |
