본 내용은 NAVER D2의 '브라우저는 어떻게 동작하는가? (by Tali Garsiel)'의 내용을 복습하며 작성했습니다.
https://d2.naver.com/helloworld/59361
트리 구축 알고리즘
파서가 생성되면 문서 객체가 생성된다. 트리 구축이 진행되는 동안 문서 최상단에는 DOM 트리가 수정되고 요소가 추가된다. 토큰화에 의해 발행된 각 노드는 트리 생성자에 의해 처리된다. 각 토큰을 위한 DOM 요소의 명세는 정의되어 있다. DOM 트리에 요소를 추가하는 것이 아니라면 열린 요소는 스택(임시 버퍼 저장소)에 추가된다. 이 스택은 부정확한 중첩과 종료되지 않은 태그를 교정한다. 알고리즘은 상태 기계라고 설명할 수 있고 상태는 '삽입 모드'라고 부른다.
입력 예제 트리 생성 과정
<html>
<body>
Hello world
</body>
</html>
트리 구축 단계의 입력 값은 토큰화 단계에서 만들어지는 일련의 토큰이다. 받은 html 토큰은 'html 이전' 모드가 되고 토큰은 이 모드에서 처리된다. 이것은 HTMLHtmlElement 요소를 생성하고 문서 객체의 최상단에 추가된다.
상태는 'head 이전' 모드로 바뀌었고 'body' 토큰을 받았다. 'head' 토큰이 없더라도 HTMLHeadElement는 묵시적으로 생성되어 트리에 추가될 것이다.
곧이어 'head 안쪽' 모드로 이동했고 다음은 'head 다음' 모드로 간다. body 토큰이 처리 되었고 HTMLBodyElement가 생성되어 추가됐으며 'body 안쪽' 모드가 되었다.
'Hello world' 문자열의 문자 토큰을 받았다. 첫 번째 토큰이 생성되고 '본문' 노드가 추가되면서 다른 문자들이 그 노드에 추가될 것이다.
body 종료 토큰을 받으면 'body 다음' 모드가 된다. html 종료 태그를 만나면 'body 다음 다음' 모드로 바뀐다. 마지막 파일 토큰을 받으면 파싱을 종료한다.
파싱이 끝난 이후의 동작
브라우저는 문서와 상호작용할 수 있게 되고 문서 파싱 이후에 실행되어야 하는 '지연'모드 스크립트를 파싱하기 시작한다. 문서 상태는 '완료'가 되고 '로드' 이벤트가 발생한다.
'Frontend > Essential' 카테고리의 다른 글
| 브라우저는 어떻게 동작하는가 (part. 05) (0) | 2020.08.19 |
|---|---|
| 브라우저는 어떻게 동작하는가 (part. 04) (0) | 2020.08.19 |
| 브라우저는 어떻게 동작하는가 (part. 03) (0) | 2020.08.18 |
| 브라우저는 어떻게 동작하는가 (part. 02) (0) | 2020.08.18 |
| 브라우저는 어떻게 동작하는가 (part. 01) (0) | 2020.08.18 |
