🦎 [딥다이브 스터디] 1st- 38.브라우저 렌더링과정2

1. 브라우저의 주소창에 url을 입력하고 엔터키를 눌렀을 때 일어나는 일에 대해서 설명해보시오.

브라우저의 주소창에 url 을 입력하고 엔터를 누르면, 해당 주소의 서버로 자원요청이 전송된다. 루트 요청에는 명확한 리소스 요청 내용이 없지만 일반적으로 index.html 을 응답한다. (만약 data.json과 같은 다른 정적파일을 요청할 경우, 서버는 폴더 경로 내의 정적 파일을 응답한다.) 브라우저가 요청한 내용과, 서버가 응답한 내용은 개발자도구의 network 패널에서 확인할 수 있다.

정적 파일만 요청할 수 있는것은 아니다. js 를 통해 동적으로 서버에 정/동적 데이터 요청이 가능하다. (ajax 와 rest API 참고)

2. Index.html 파일이 서버로부터 응답되었다고 가정하자.이 때 html 문서를 파싱하여 DOM을 생성하는 과정에 대해서 아래의 키워드를 사용하여 설명해보시오.

(노드, 문자, 바이트 , 토큰, DOM)

브라우저 렌더링은 응답받은 html 문서를 파싱하여 DOM 을 형성하는 것이다.
가장먼저 1,0으로 되어있는 바이트 문자를 문자로 변환한다. 이때 html meta tag 의 charset 속성을 기반으로 문자화한다. (가장 대표적인 예는 UTF-8) 이후 object 형태의 토큰으로 변환되는데, 토큰은 태그의 가장 작은 단위이다.이후 노드로 변환을 거쳐 Tree 구조 형태의 DOMTree 를 형성한다.

3. 자바스크립트 파싱에 의한 DOM 생성이 중단되는 경우,어떤 문제가 발생할 수 있는가?

브라우저는 동기적으로 html, css, js 를 파싱하고 실행하는데, js 코드에서 dom or cssom 트리가 생성되기 이전에 dom api를 사용해 이를 변경하려고 시도하는 경우, 변경 요소가 존재하지 않아 reference err 가 발생한다.그렇기에 js 로직을 처리하는