주소창에 google.com을 치면 발생하는 일

# 22.11.07. 렌더링 과정 update

 

요약

1. 입력된 URI를 기반으로 HTTP Request Message를 작성한다.

2. DNS 서버에서 DNS를 조회하여 IP주소를 받아온다.

3. 해당 IP주소의 서버와 클라이언트는 TCP Connection을 생성한다.

4. 서버에서는 HTTP Request에 대한 Response를 전송한다.

5. 브라우저는 Response를 토대로 렌더링을 진행하여 결과물을 화면에 나타낸다.

6. 요청이 종료되면 클라이언트와 서버의 Connection을 종료한다.

 

이렇게 가볍게 마무리지을 수도 있지만, 기왕 알아보는 김에 조금 더 알아보자.

 

 

입력된 URI를 기반으로 HTTP Request Message를 작성한다.

우선 URL과 URI부터 구분해보자. URI는 Uniform Resource Identifier의 줄임말로 리소스의 식별자(ID)를 의미하고, URL은 Uniform Resource Locator의 줄임말로 말 그대로 리소스의 위치를 가리킨다. 즉, URL은 서버에서 제공하는 리소스(문서, 이미지, 비디오, 오디오 등)에 접근하기 위해서 필요하고, URI는 리소스 중에서도 특정 리소스(ex. 제목이 proxy인 문서)를 식별하는 데에 사용된다.

 

예를 들어, 책상 서랍의 첫 번째 칸에  노트 4권이 있고, 파란색 노트가 가장 위에 있다고 가정해보자. 노트를 리소스라고 지칭하면, 리소스는 책상 서랍의 첫 번째 칸에 있다. 다시 말해서, 노트의 URL은 '책상 서랍의 첫 번째 칸'이다. 이 때, 파란색 노트를 식별하는 URI는 '책상 서랍의 첫 번째 칸 안에 있는 노트들 중에서 제일 위에 있는 노트'가 된다. 

 

URL은 프로토콜과 호스트 그리고 자원의 위치(path, parameter, fragment)로 구성되어 있고, 호스트는 다시 도메인과 포트번호로 나뉘는데 http는 443, https는 80포트를 기본값으로 사용하고 있다. path는 리소스의 경로를 나타내는데 주로 리소스를 구분하기 위해 사용되고, query parameter는 리소스를 정렬 또는 필터링 할 때 주로 사용된다.

 

 

사용자가 포트번호를 생략하더라도 브라우저는 기본적으로 https 프로토콜에 맞추어 80포트로 HTTP Request Message를 작성하기 때문에, 사용자가 주소창에  google.com을 입력하면 브라우저가 작성한 HTTP Request Message는 google.com:80을 origin으로 한다.

 

 

DNS 서버에서 도메인을 조회하여 IP주소를 받아온다.

도메인은 google, naver, daum처럼 임의로 지정가능한 도메인 네임과 .com이나 .kr처럼 도메인 네임 뒤에 붙는 최상위 도메인(TLD, Top-Level Domain) 그리고 www.~, mail.~, map.~처럼 도메인 네임 앞에 붙는 차상위 도메인(SLD, Second-Level Domain)으로 구성되어 있다.

 

사용자가 google.com을 입력하면 클라이언트는 우선 브라우저 내에서 도메인을 캐시하고 있는지 확인한다.(이 때 확인하는 역할을 하는 것이 DNS Resolver다.) 만약 브라우저 내에 DNS가 캐시되어 있지 않다면 운영체제(OS)에서 도메인을 캐시하고 있는지 확인한다. 여기서도 찾지 못할 때는 OS에서 Local DNS 서버라고 불리는 기지국(ISP) DNS 서버에 질의한다. Local DNS 서버에도 없을 때는 Root DNS 서버, TLD DNS 서버 등을 차례대로 거치며 조회를 시도한다. (브라우저 캐시 ➡ OS 캐시 ➡ ISP 캐시(Local DNS Server) ➡ Root DNS ➡ TLD DNS ➡ ...)

 

 

해당 IP주소의 서버와 클라이언트는 TCP Connection을 생성한다.

DNS조회가 완료되면 클라이언트는 운영체제(OS)에 HTTP Request Message 송신을 의뢰하고 OS는 서버와 TCP Connection을 생성한다. Connection을 생성할 때는 3-way handshake를, 종료할 때는 4-way handshake 과정을 거친다.

 

• 3-way handshake

1. 클라이언트가 서버에 연결을 요청하는 SYN 패킷(연결 요청 플래그)을 전송한다.

2. 요청을 받은 서버는 클라이언트의 연결을 수락한다는 의미로 ACK와 SYN 패킷을 클라이언트에게 전송한다.

3. 클라이언트는 서버에게 확인했다는 의미로 ACK 패킷(응답 플래그)을 서버에게 전달하면 Connection 생성이 완료된다.

 

• 4-way handshake

1. 클라이언트가 연결을 종료하겠다는 FIN 패킷(연결 종료 플래그)을 서버에 전송한다.

2. 서버는 클라이언트에게 확인했다는 의미로 ACK 패킷을 전송한다.

3. 서버는 통신이 완료되었고 연결을 종료했다는 의미로 FIN 패킷을 클라이언트에게 전송한다.

4. 클라이언트는 확인했다는 의미로 ACK 패킷을 전송한다.

 

 

서버에서는 HTTP Request에 대한 Response를 전송한다.

 

클라이언트는 Response를 토대로 렌더링을 진행하여 화면에 결과물을 그린다.

1.브라우저는 서버에서 전송한 HTML 문서를 토대로 필요한 script 파일과 CSS 파일 등의 리소스를 요청한다.

HTML을 파싱하는 도중에 script 파일이나 CSS 파일을 요청하게 되면 브라우저는 HTML의 파싱을 중단하고 script 파일과 CSS 파일을 우선적으로 다운로드하는데, 이렇게 HTML의 파싱을 지연시키는 리소스를 블록 리소스라고 부른다. 블록 리소스는 Paint 단계를 지연시키기 때문에, 로딩이 늦어진다는 측면에서 성능 개선의 여지가 존재한다. 이 때 렌더링 경로를 최적화하거나 script의 defer 속성을 이용하여 블록 리소스의 생성을 방지할 수 있다.

 

* defer와 async

defer와 async 속성 모두 HTML의 파싱과 script의 다운로드를 병렬로 진행하지만 실행 시점이 다르다. 단어 뜻 그대로 defer는 script의 실행 시점을 지연시켜서 HTML의 파싱이 종료된 이후에 script를 실행하는 반면에 async는 HTML의 파싱 종료 여부와 관계없이 script의 다운로드가 종료된 직후에 script를 실행한다. 이로 인해 async는 렌더링 경로와 무관하게 script가 다운로드되는 순서에 따라 실행이 되고, script가 실행될 때 HTML의 파싱이 지연된다.

 

2. 브라우저는 HTML 문서와 script 파일 그리고 CSS 파일을 DOM tree와 CSSOM tree로 변환하고 이를 토대로 Render tree를 구성한다. 

DOM은 script가 HTML(document)과 CSS를 CRUD할 수 있도록 브라우저가 생성하는 Object Model이다. 이러한 DOM과 CSSOM을 트리 구조로 표현한 것이 DOM tree와 CSSOM tree다. 그 후 DOM tree와 CSSOM tree에서 최종적으로 표기될 내용만 병합하여 Render tree를 구성한다. 

 

3. Render tree를 기반으로 Layout, Paint, Composite 과정을 거쳐 실제 화면을 그린다.

Layout 단계에서 각 노드의 위치와 크기를 계산하면 Paint 단계에서는 각 노드를 화면 상의 실제 픽셀로 변환한다. Paint 단계를 거치며 픽셀로 변환된 결과들은 여러 개의 레이어로 나뉘는데, Composite 단계에서 해당 레이어를 합성하여 실제 화면에 나타낸다.

 

4. 노드의 위치나 크기 등 Layout이 업데이트되면 Reflow과정을 거치며 Layout을 새로 계산하지만, 그렇지 않은 경우에는 Repaint 과정만 거치며 화면을 업데이트 한다.

렌더링 과정 (클라이언트는 Response로부터 HTML 문서와 Script파일을 파싱하고)

 

 

참고

김맥스 블로그 | 브라우저 주소창에 URL을 치면 일어나는 일들

DNS - 여러분이 google.com을 칠 때 - 웹 부트캠퍼 개발자를 위한 컴퓨터 과학

[ 네트워크 쉽게 이해하기 22편 ] TCP 3 Way-Handshake & 4 Way-Handshake

네트워크의 흐름 2단계

웹 브라우저에 URL을 입력하면 어떤 일이 생기나요? | Amazon Web Services

DNS에 대한 설명(디테일 하게....)

HTML script async Attribute

HTML script defer Attribute

[TCP] 4-way Handshake란? / 와이어샤크, tcpdump 확인

[OS/ Network] 브라우저에 URL 입력시 동작과정 계층 관점으로 살펴보기