◆ HTML 파서 : HTML 마크업을 파싱 트리로 변환.
■ 특징
- HTML 어휘 및 문법은 W3C 에 명세되어 있음. HTML 5까지 나왔다.
- HTML 정의를 위한 공식적인 형식으로 DTD(문서 형식 정의)가 있지만 문맥 자유 문법이 아니다.
△ 언어가 유연함
△ HTML 오류에 대한 브라우저의 관대함.
△ 변경에 의한 재파싱. 스크립트의 document.write는 토큰을 추가할 수 있기 때문에, 입력 과정에서 파싱이 수정될 수 있따.
■ DOM : Document Object Model : 문서 객체 모델
DOM은 마크업과 1:1의 관계를 맺는다. 예시)
![[브라우저] HTML 파서 - 마크업 → 파싱트리(문맥 자유 문법x) - undefined - ◆ HTML 파서 : HTML 마크업을 파싱 트리로 변환. - ■ DOM : Document Object Model : 문서 객체 모델](https://blog.kakaocdn.net/dn/bFZgA3/btr0IvTERvk/EtGPMf8sIVpbCkscU9bp5K/img.png "[브라우저] HTML 파서 - 마크업 → 파싱트리(문맥 자유 문법x) - undefined - ◆ HTML 파서 : HTML 마크업을 파싱 트리로 변환. - ■ DOM : Document Object Model : 문서 객체 모델")
DOM은 W3C에 의해 명세가 정해져 있다.(https://www.w3.org/DOM/DOMTR)
* HTML 정의 : https://www.w3.org/TR/2003/REC-DOM-Level-2-HTML-20030109/idl-definitions.html
■ 파싱 알고리즘 : 토큰화 + 트리 구축
- 토큰화 : 입력값을 토큰으로 파싱. HTML의 토큰은 시작태그, 종료태그, 속성이름, 속성 값이 있다.
![[브라우저] HTML 파서 - 마크업 → 파싱트리(문맥 자유 문법x) - undefined - ◆ HTML 파서 : HTML 마크업을 파싱 트리로 변환. - ■ 파싱 알고리즘 : 토큰화 + 트리 구축](https://blog.kakaocdn.net/dn/lOE1F/btr0NJKopBO/d04PkMKe4cn0X1BlH7XKpk/img.png "[브라우저] HTML 파서 - 마크업 → 파싱트리(문맥 자유 문법x) - undefined - ◆ HTML 파서 : HTML 마크업을 파싱 트리로 변환. - ■ 파싱 알고리즘 : 토큰화 + 트리 구축")
- 토큰화 알고리즘 : 상태 기계(State Machine)
각 상태는 하나 이상의 연속된 문자를 입력 받아서 이 문자에 따라 다음 상태를 갱신한다. 같은 문자를 읽어도 현재의 상태에 따라 결과가 다르게 나온다.
예시)
<html>
<body>
Hello world
</body>
</html>상태는 크게 네 가지 있다.
1. 자료 상태 : '<' 문자를 만나면 태그 열림 상태로 변한다. 이후 바로 a-z문자를 만나면 '시작 태그 토큰' 생성하고, 태그 이름 상태로 변한다....
- 문자를 바로 만나게 된다면 'a-z'를 소비하면서 문자 토큰을 발행한다.
2. 태그 열림 상태 : 'a-z'를 만나면 태그 토큰을 생성, '/'을 만나면 종료 태그 토큰을 생성한다.
3. 태그 이름 상태 : 'a-z'를 만나면 태그 토큰을 완성하고, '>'을 만나면 현재 토큰(종료 태그 or 시작 태그)을 생성한다.
4. 종료 태그 열림 상태 : 종료 태그 토큰을 처리한다.
![[브라우저] HTML 파서 - 마크업 → 파싱트리(문맥 자유 문법x) - undefined - ◆ HTML 파서 : HTML 마크업을 파싱 트리로 변환. - - 토큰화 알고리즘 : 상태 기계(State Machine)](https://blog.kakaocdn.net/dn/9izVQ/btr0OaH2Ku5/IwEUA9bf6tWykKbKAb2iUK/img.png "[브라우저] HTML 파서 - 마크업 → 파싱트리(문맥 자유 문법x) - undefined - ◆ HTML 파서 : HTML 마크업을 파싱 트리로 변환. - - 토큰화 알고리즘 : 상태 기계(State Machine)")
- 트리 구축 알고리즘 : 앞서 처리한 토큰을 input으로 받아 트리 구축
트리 구축이 진행되는 동안 문서 최상단에서는 DOM 트리가 수정되고 요소가 추가된다. 토큰화 알고리즘에 의해 발행된 각 노드는 트리 생성자에 의해 처리된다. DOM 트리에 요소를 추가하지 않는다면, 스택(임시 버퍼 저장소)에 추가된다. 이 스택은 규칙을 따르지 않는 태그를 처리한다.
<html>
<body>
Hello world
</body>
</html>1. 초기 모드
2. HTML 이전 → html 토큰 받고 HTMLHtmlElement요소 생성하고 DOM 최상단에 추가.
3. head 이전 → head 토큰 없더라도 묵시적으로 HTMLHeadElement 생성 및 트리에 추가
4. head 안쪽 모드 → 내용 무 → head 다음 모드(=body 이전모드) → body 토큰 처리( HTMLBodyElement 생성 및 추가)
5. body 안쪽 모드 → 문자 토큰(Hello World).→ 본문 노드 추가되면서 해당 노드에 문자들이 추가됨.
6. body 종료 토큰 → body 다음 모드 → html 종료 토큰 → body 다음 다음 모드..(?) → 마지막 파일 토큰
7. 파싱 종료
■ 파싱 끝난 이후 동작
이제 브라우저는 문서(DOM)과 상호작용할 수 있고, 파싱 이후 실행돼야하는 지연 모드(defer옵션) 스크립트를 파싱하기 시작한다. 문서 상태는 '완료'가 되며, '로드'이벤트 발생~
■ 브라우저의 오류 처리
브라우저가 모든 오류 구문을 교정하기 떄문에 '유효하지 않은 구문'이라는 오류는 본 적이 없을 것이다.
파서가 처리해야하는 오류들
1. 어떤 태그 안쪽에 추가하려는 태그가 금지된 것일 때, 허용된 태그를 닫고 금지된 태그는 외부에 추가.
2. 파서가 직접 요소를 추가해선 안된다. 문서 제작자가 뒤늦게 요소를 추가할 수 있고, 생략가능한 경우도 있따..?(HTML, HEAD, BODY, TBODY, TR, TD, LI 태그)
3. 인라인 요소 안쪽에 블록 요소가 있는 경우 부모 블록 요소를 만날 때까지 모든 인라인 태그를 닫는다.
4. 이런 방법이 도움이 되지 않으면, 태그를 추가하거나 무시할 수 있는 상태가 될 때까지 요소를 닫는다.
* 인라인 요소, 블록 요소.
- 인라인 : 줄바꿈 X, 텍스트와 인라인 요소 포함O, 블록 요소 X, 블록 요소 내부에 포함돼야함.
- 블록 : 줄바꿈 O, 내부에 텍스트, 인라인 요소 포함 가능, 다른 블록요소 포함 가능(예외도 존재함)
△ 브라우저가 처리하는 오류의 종류
(WebKit의 경우)
</br> → <br> : </br>을 <br>로 바꿔서 처리
- 어긋낫 표 : 표 안에 다른 표가 th 또는 td 셀 내부에 있지 않은 경우, 표의 중첩을 분해해서 동일 레벨이 되도록 처리.
- 중접된 폼 요소 : 폼안에 다른 폼을 넣은 경우 내부의 form은 무시된다.
- 태그 중첩이 너무 깊을 때 : 최대 20개의 중첩만 허용하고, 나머지는 무시
- 잘못 닫힌 html 또는 body 태그 : 알아서 처리해줌. body 태그는 닫지 않고, 종료를 위해 end()를 호출한다고 한다.
* 잘못된 정보가 있으면 댓글 부탁드립니다. 수정하도록 할게요.
'브라우저' 카테고리의 다른 글
| [브라우저] 배치(Layout), Paint(feat 더티비트) (0) | 2023.02.27 |
|---|---|
| [브라우저] CSS 파싱(문맥 자유 문법 O); (0) | 2023.02.27 |
| [브라우저] 파싱이란?(Parsing이란?) - 파싱의 과정(어휘 분석, 구문 분석) (0) | 2023.02.26 |
| [브라우저] 브라우저의 동작 원리 (2) | 2023.02.26 |
| [브라우저] 브라우저의 구조 (0) | 2023.02.23 |
댓글