브라우저가 주소 표시줄을 통해 서버에 데이터를 요청할 때 기본 도메인이 포함된 주소로 GET 요청을 보내는 것이 일반적이며, 경로나 쿼리 문자열을 입력하지 않아도 서버는 브라우저에 파일로 응답합니다.
그 이유는 기본적으로 메인 브라우저인 HTML 파일이 루트 경로로 설정되어 있기 때문입니다.
따라서 브라우저가 도메인 주소로 GET 요청을 보내면 기본 HTML 파일을 받아 렌더링합니다.
단, 반응형 HTML 파일에는 HTML 파일을 통해 업로드되는 CSS 파일, JS 파일, 이미지 파일도 포함되어 있습니다.
,또는![]()
등의 태그는 주소를 인용하여 가져오기 때문입니다.
참고로 HTML 파싱 전에 css와 이미지 파일을 인터넷에서 다운받으세요. 즉, 읽은 후 구문 분석합니다.
하지만 스크립트라면 HTML 파싱 도중 필연적으로 마주치게 되므로 마주치면 HTML 파싱을 도중에 멈추고 스크립트부터 파싱을 시작한다.
그러나 스크립트 태그에 async 또는 defer 속성이 지정된 경우 HTML이 비동기적으로 구문 분석된 후 스크립트가 구문 분석됩니다.
|
좀 더 가까이에서 초기 서버가 브라우저 요청에 응답한 HTML은 DOM 트리 형식이라는 파일이 아니라 문자열로 구성된 단순한 텍스트였습니다.
즉, 컴퓨터가 이해할 수 있는 이진수(바이트)의 형태로 수신되어 UTF-8(또는 기타 문자 집합)에 따라 문자열로 변환됩니다.
태그에 지정된 charset이 있는 HTML 파일의 미래(물론 이것은 문자열 변환에 대한 서버의 응답에 추가 정보를 포함하는 간단한 예일 뿐입니다.
).
그러나 문자열로 변환된 HTML은 말 그대로 의미가 없는 바이너리 형태의 그럴듯한 문자열 형태일 뿐이며, 이때 문법적 의미의 부가적인 형태인 토큰이라는 것으로 분해된다.
그런 다음 분해된 각 토큰을 객체로 변환하고 DOM 트리를 구성하는 노드가 됩니다.
HTML 요소는 중첩 관계(
) 관계는 루트-부모-하위 수준, 형제 수준 등으로 구분되고 반영되는 구조화되고 계층적인 트리 구조를 형성하며, 이를 종종 DOM 트리라고 합니다.
즉, DOM이라는 문서 객체 모델은 브라우저가 서버에 데이터를 요청하고 수신한 바이트코드를 브라우저가 이해할 수 있는 문자로 변환하는 과정에서 생성되는 작업이라고 할 수 있습니다.
이전 프로세스 요약
브라우저가 서버에서 렌더링에 필요한 데이터를 요청하면
서버는 응답으로 브라우저에 이진 바이트 수를 보냅니다.
브라우저는 서버에서 보낸 응답에 포함된 문자 집합 및 기타 정보에 따라 문자열 변환을 수행합니다.
문자열로 변환된 HTML 문서는 문법적 의미를 가진 토큰 단위로 분해되며, 이러한 토큰은 향후 DOM 트리를 구성하는 노드가 되고 최종적으로 각 노드 간의 중첩 관계를 반영하는 DOM 트리를 형성합니다.