[js] 브라우저 렌더링 과정(2) - HTML 파싱 및 DOM 생성

한 번 공부한 내용을 글로 주저리 적어본다.

 

브라우저가 주소창을 통해 서버에 데이터를 요청할 때 흔히 기본 도메인을 포함한 주소로 GET 요청을 보내면, 아무런 Path 나 query 문자열을 입력하지 않아도 서버는 브라우저에게 파일을 담아서 응답한다.

 

그 이유는 기본적으로 루트 경로로서 브라우저의 메인이 되는 HTML 파일이 기본값으로 설정되어 있기 때문이다. 보통 기본이 되는 HTML 파일을 index.html 로 정의하는데, 주소창 경로의 끝 부분에 index.html 이 보여야 하지만, 암시적으로 보이지 않도록 디폴트되어 있다.

 

따라서 브라우저는 도메인 주소로 GET 요청을 보내면 main이 되는 HTML 파일(index.html)을 받아 렌더링한다.

 

하지만, 응답을 받은 HTML 파일에는 CSS 파일과 JS , 이미지 파일 등이 같이 담겨오기도 하는데, 이는 HTML 파일 상에 <script src/> 나 <link ref /> , <img> 등의 태그를 통해 링크되어진 파일들의 주소를 참조하여 가져오기 때문이다.

 

본론으로 와서 브라우저의 요청에 의해 서버가 응답한 초창기의 HTML 은 흔히 DOM 트리라고 불리는 형태가 갖춰진 파일이 아니라 문자열로 이루어진 단순한 텍스트에 지나지 않는다.

 

즉, 컴퓨터가 이해하고 있는 2진수(바이트) 형태로 받게 되는데, 이는 향후 HTML 파일의 <head/> 태그 내에서 지정한 문자셋(charset)인 UTF-8 (혹은 기타 문자셋)에 따라 문자열 변환이 이루어진다(물론 이는 단순한 하나의 예일뿐이고, 문자열 변환을 위해 추가적인 정보들은 서버의 응답에 담겨 온다.).

 

다만, 문자열 변환이 이루어진 HTML은 말그대로 2진수 형태에서 그럴듯한 문자열의 형태를 취한 것일 뿐 아무런 의미를 가지지 못하는데, 이는 문법적으로 의미를 가지는 형태인 토큰 이라 불리는 것으로 분해가 이루어진다.

 

분해된 각각의 토큰들은 이후 객체로 변환되어  DOM 트리를 구성하는 node 가 되고, 중첩관계(<div> <p> text </p></div>)를 가지는 HTML 요소들의 관계가 루트-부모-자식-형제 등으로 구분되어 반영된 구조화되고 계층화된 트리 구조를 형성하게 되는데, 이를 흔히  DOM 트리라고 한다.

 

즉, DOM 이라고 명칭하는 문서객체모델은 브라우저가 서버에 데이터를 요청하고, 응답받은 바이트 형태를 브라우저가 이해할 수 있는 문자로 변환하는 과정에서 탄생한 작품이라 할 수 있다. 

 

앞서 과정을 요약하면

- 브라우저가 서버에게 화면 렌더링에 필요한 데이터를 요청(request)하면, 

- 서버는 브라우저에게 2진수 형식의 바이트를 응답(response)에 담아서 보내고,

- 브라우저는 서버가 보낸 응답에 담겨져 있던 charset 등(ex. uft-8 등)의 정보를 바탕으로 문자열 변환을 실시하며

- 문자열로 변환된 HTML 문서를 문법적 의미를 가지는 토큰 단위로 분해 하는데, 분해된  토큰들은 향후 DOM 트리를 구성하는 node가 되며, 최종적으로 각 노드 간의 중첩관계가 반영된 DOM 트리를 생성한다.