웹페이지가 로드되는 과정

하루는 면접을 보는 와중에 면접관이 다음과 같은 질문을 했었다.
"웹페이지가 보여지는 과정에 대해서 설명해주세요."
이 질문에 대해서 정확하게 대답하지 못했기에 이번 포스트를 작성해본다.

핵심 키워드 : 도메인네임, DNS서버, HTTP, TCP, IP주소

과정

1. 사용자가 브라우저에 주소를 입력한다.

   • 만약 브라우저 캐시에 저장된 데이터를 요청한다면 굳이 서버에 접속하지 않고 캐시에서 데이터를 사용

2. 웹 브라우저는 DNS서버에서 해당 도메인네임의 IP주소를 받아온다.

3. 웹 브라우저는 DNS서버로부터 받아온 IP주소를 통해서 데이터를 주고받아야 하는데 완전한 데이터의 전송을 보장하기 위해서 직접 데이터를 보내기 이전에 세션을 수립하는 TCP 3way-handshake를 진행한다.(socket을 엶)

4. 3을 통해서 전송보장이 되었기 때문에 웹 브라우저는 서버에게 데이터 요청을 하기 위해서 http request를 보낸다.

5. 서버는 요청에 대한 응답을 하기 위해서 http response를 보낸다.

6. 웹 브라우저는 서버로 부터 받은 데이터를 가지고 html/css를 해석한다.(parsing)

   • 웹 브라우저의 렌더링 엔진은 기본적으로 HTML을 파싱하면서 DOM Tree를 생성한다.
   • HTML 파싱 도중에 style태그나, script 태그를 만나게 되면 진행중이던 HTML 파싱을 중단하고 style태그를 CSS를 파싱 후 만나면 CSSOM Tree를, script태그를 만나면 JS를 파싱 후 Abstract Syntax Tree를 만든다. 태그가 끝이나면 다시 중단된 HTML 파싱을 진행한다.
   • DOM Tree와 CSSOM Tree를 통해서 Render Tree를 생성한다.(Construction)
   • 위에서 생성된 Render Tree를 통해 웹 브라우저의 렌더링 엔진은 Render tree의 노드들을 화면에 그린다. (Composition)

7. 화면을 사용자에게 보여준다.