브라우저의 요청에 의해 서버가 응답한 HTML 문서는 문자열로 이루어진 순수한 텍스트이다. 순수한 텍스트인 HTML 문서를 브라우저에 시각적인 픽셀로 렌더링 하려면 HTML 문서를 브라우저가 이해할 수 있는 자료구조(객체)로 변환하여 메모리에 저장해야 한다.
브라우저의 렌더링 엔진은 다음과 같은 과정을 통해 응답받은 HTML 문서를 파싱하여 브라우저가 이해할 수 있는 자료구조인 DOM(Document Object Model)을 생성한다.
1. 브라우저가 요청한 HTML 파일을 읽어 메모리에 저장한 다음 메모리에 저장된 바이트를 인터넷을 경유하여 응답한다.
2. 브라우저는 서버가 응답한 HTML 문서를 바이트 형태로 받는다. 바이트 형태의 문서는 meta 태그의 charset 어트리뷰트에 의해 지정된 인코딩 방식을 기준으로 문자열로 변환된다. 인코딩 방식은 content-type: text/html; charset=utf-8과 같이 응답 헤더에 담겨 응답된다.
3. 문자열로 변환된 HTML 문서를 문법적 의미를 갖는 코드의 최소 단위인 토큰으로 분해한다.
4. 각 토큰을 객체로 변환하여 노드를 생성한다. 토큰의 내용에 따라 문서 노드, 요소 노드, 어트리뷰트 노드, 텍스트 노드가 구성된다. 노드는 DOM을 구성하는 기본 요소가 된다.
5. HTML 요소는 중첩 관계를 갖는데 이러한 HTML 요소 간의 부자 관계를 반영하여 모든 노드들을 트리 자료구조로 구성한다. 이 노드들로 구성된 트리 자료구조가 DOM 이다.
즉, DOM은 HTML 문서를 파싱한 결과물이다.
'기타 CS' 카테고리의 다른 글
| 기술 면접 준비 - SOLID(객체 지향 설계의 5대 원칙) (0) | 2023.02.27 |
|---|---|
| 기술 면접 준비 - Cookie 와 Session (0) | 2023.02.25 |
| 기술 면접 준비 - HTTP 1.1 과 HTTP 2.0 (0) | 2023.02.24 |
| 기술 면접 준비 - SOP(Same-Origin Policy) 그리고 CORS (Cross-Origin Resource Sharing) (0) | 2023.02.23 |
| 기술면접 준비 - SSR 그리고 CSR (0) | 2023.02.23 |
