브라우저에 www.google.com을 치면 일어나는 일?

ip 주소 가져오기

브라우저 확인

• 브라우저가 제대로 된 URL인지 확인.
  • 크롬을 예시로 들자면 제대로 된 URL이 아닐경우 지정된 검색엔진을 통해 검색을 수행하게 된다.
• 제대로 된 URL 이라면 브라우저에 주소가 캐시되어 있는지 확인.
• 없다면 OS에 요청.

OS 확인

• OS에 주소가 캐시되어 있는지 확인.
• 없다면 Router DNS Server에 직접 조회를 진행하게 된다.
  • 네트워크 설정에 따라 지정된 DNS 재귀 확인자의 주소에 DNS 요청을 보낸다.

DNS 조회

DNS 재귀 확인자

DNS 조회의 첫 번째 중단점이며, 최초 요청을 한 클라이언트 처리를 담당하는 컴퓨터이다.

• 재귀 확인자는 Root Server에게 TLD Server의 주소를 받아온다.
  • TLD : 최상위 도메인(Top-level domain)은 인터넷에서 도메인 네임의 가장 마지막 부분을 말한다. (.com, .kr, ...)
• TLD Server에 접근하여 도메인 이름 서버(google.com) 주소를 받아온다.
• 이어서, DNS를 요청한 요청자의 주소로 받아온 주소를 응답해준다.
• 만약 각 서버에서 주소를 캐싱을 해 두었다면 캐싱된 주소를 받환하게 된다.
  

HTTP 요청

• 브라우저는 받아온 주소에 요청을 보낸다.
  • HTTP/1.1 요청을 보낸 후 구글은 일반적으로 HTTPS로 연결을 변경하기 위해 302 Found와 함께 사용자를 리다이렉트 시킨다.
  • 참고 : [Network] HTTP 1.0 vs HTTP 1.1 & HTTP/1.1 VS HTTP/2
• 만약 일반적인 HTTP 연결일 경우에는 TCP 3 Way-Handshake 방식으로 연결을 하게 된다.
  • 참고 : [Network] TCP 3-way handshaking과 4-way handshaking

HTTPS 연결

• 브라우저가 HTTPS 연결을 하기 위해 TLS 연결이 만들어져야 한다.
  • TLS(Transport Layer Security) : 암호화 보안 프로토콜: TLS
• TLS 연결은 TLS handshake 과정을 통해 이루어진다.
  • 이 과정에서 사용할 암호화 알고리즘, TLS 버전 등이 전송된다.
  • 서버와 통신에서 어떤 버전, 암호화 알고리즘을 사용할 지 결정한다.
• 참고 : HTTPS를 위한 SSL/TLS 핸드 셰이크 작동원리

요청과 응답

요청 예시

GET / HTTP/1.1
Host: www.google.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:89.0) Gecko/20100101 Firefox/89.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Accept-Language: ko-KR,ko;q=0.8,en-GB;q=0.6,en-US;q=0.4,en;q=0.2
Accept-Encoding: gzip, deflate, br
Connection: keep-alive
Upgrade-Insecure-Requests: 1
Cache-Control: max-age=0
TE: Trailers

응답 예시

HTTP/2 200 OK
date: Tue, 27 Apr 2021 02:03:56 GMT
expires: -1
cache-control: private, max-age=0
content-type: text/html; charset=UTF-8
strict-transport-security: max-age=31536000
content-encoding: br
server: gws
content-length: 33633
x-xss-protection: 0
x-frame-options: SAMEORIGIN
alt-svc: h3-29=":443"; ma=2592000,h3-T051=":443"; ma=2592000,h3-Q050=":443"; ma=2592000,h3-Q046=":443"; ma=2592000,h3-Q043=":443"; ma=2592000,quic=":443"; ma=2592000; v="46,43"

• 참고 : HTTP 메시지

브라우저 렌더링

1. DOM(Document Object Model), CSSOM(CSS Object Model) 생성
   • HTML, CSS를 서버로부터 받아 Object Model로 만든다.
2. Render Tree 생성
   • DOM과 CSSOM을 이용해 Render Tree를 생성한다.
   • 실제 화면에 표현되는 노드들로만 구성되며 스타일 정보가 설정되어 있다.
   • display: none 같은 경우는 화면에 어떤 공간도 차지하지 않아 제외된다.
3. Layout
   • Viewport 내에 각 노드들의 위치와 크기를 계산한다.
   • 이때 %, vh, vw와 같이 상대적인 위치, 크기 속성은 pixel 단위로 변환된다.
4. Paint
   • 요소들을 실제 화면에 그리게 된다.
   • Render Tree를 이용해 실제 픽셀 값을 채워넣게 된다.

• 참고 : 브라우저 렌더링 과정 - Reflow Repaint, 그리고 성능 최적화

연결 종료

내용 참고
: DNS란 무엇입니까?
: 브라우저에 google.com을 치면 무슨 일이 일어날까? (아니, 진짜로) - 네트워크편