www.naver.com을 주소창에 치면 어떻게 될까요?

대기열, 캐싱, DNS, ARP, 초기연결을 거쳐 컨텐츠를 다운받게 되고 이후 브라우저렌더링 과정을 거쳐 네이버라는 화면이 나타나게 됩니다. 또한 이러한 과정이 비캡슐화, 캡슐화과정을 거쳐서 이뤄지게 됩니다.

 

대기열

브라우저는 주소창에 입력에 대한 요청을 대기열에 넣습니다. 이 때 HTTP/1.0과 HTTP/1.1의 경우 오리진당 6개의 병렬적인 TCP연결만을 허용하며 HTTP/2의 경우 스크림 등을 통해 HTTP1.x 헤드라인 차단 등을 해결합니다.

 

그 다음 캐싱이 일어납니다.

 

캐싱

요청된 결과값을 저장하고 그 값을 다시 요청하면 다시 제공하는 기술입니다. 공유 프록시 캐시와 브라우저 개시로 나눠집니다.

브라우저 캐시: 쿠기, 로컬스토리지

공유 프록시 캐시: 프록시 서버가 캐싱을 하는 것을 말합니다. 예를 들어 Node.js로 서버를 구축한다면 앞단의 프록시 서버로 nginx서버를 둬서 이 서버를 캐싱 서버로도 사용할 수 있는 것입니다.

 

캐싱을 하였는데 이전에 요청한 것이 아니라면 DNS 조회를 하게 됩니다.

DNS 조회

브라우저가 요청의 IP주소를 확인하는 단계

DNS는 도메인 이름과 IP주소를 매핑해주는 서버입니다. 예를 들어 www.naver.com에 DNS 쿼리가 오면 그에 맞는 IP주소를 매핑해줍니다.

그 IP주소를 찾아갑니다.

이렇게 찾은 IP를 통해 ARP를 통해 물리적인 서버 주소를 찾게 되고 초기 연결을하고 콘텐츠를 다운로드 합니다.

초기 연결

TCP3way-handshake 및 ssl연결등을 통해 연결을 설정합니다. 이 후 요청을 보낸 후 해당 요청에대한 서버로부터 응답을 받습니다.

 

콘텐츠 다운로드

브라우저는 서버로부터의 응답을 수신합니다.

콘텐츠 다운로드가 끝나면 브라우저 렌더링을 시작합니다.

DOM 트리 구축

div, span등 각각의 요소는 하나하나의 노드로 설정되어 트리 형태로 저장되는데 이를 DOM트리라고 합니다.

 

렌더트리와 렌더레이어 생성

html에서 만들어진 DOM트리 내부의 노드와 CSS에서 만들어진 CSSOM이 결합되어 렌더객체와 렌더레이어가 생성됩니다.

 

렌더레이어를 대상으로 Layout 설정

좌표는 position: absolute와 position: realtive같은 것으로 포지션을 잡습니다. 

 

렌더레이어를 대상으로 칠하기

픽셀마다 점을 찍듯 칠합니다. 이를 레스트화라고 합니다.

 

레이어 합치기 및 표기

각각의 레이어로부터 비트맵이 생성되고 GPU에 텍스처로 업로드 됩니다. 그 다음 텍스터들은 서로 합쳐져 하나의 이미지로 렌더링되며 화면으로 출력합니다.