웹 페이지 로드 과정 | Google.com 을 입력하면 일어나는 일 - Overview

 

W3C, Navigation Timing Level 2

 

1. 유저가 사용자 인터페이스에 google.com 이라는 URL을 입력한다.

• 모든 웹사이트 URL은 특정한 IP 주소와 연결되어있다.
• IP 주소는 DNS에 저장되어 있다.
• DNS의 주된 목적은 인간 친화적인 탐색을 위한 것이다.

2. 브라우저는 입력된 google.com에 해당하는 IP를 찾기위해 DNS 기록에 대한 캐시를 검사한다.

• 캐시는 네트워크 트래픽을 규제하고데이터 전송 시간을 향상시키기 위해 필수적이다.
• 순서: 
  1. 먼저 브라우저 캐시를 검사한다. - 브라우저는 유저가 방문했던 DNS 기록을 일정시간동안 유지한다.
  2. OS 캐시를 검사한다. 브라우저 캐시에 찾고있는 IP가 없으면, 브라우저는 OS에 system call을 날려서 기록을 검사한다. (OS 또한 DNS 기록에 대한 캐시를 유지한다.)
  3. 라우터 캐시를 검사한다. 유저의 컴퓨터 안에 캐시가 없다면, 브라우저는 라우터와 통신해서 DNS 기록에 대한 캐시를 가져온다.
  4. ISP의 캐시를 검사한다. ISP 또한 고유의 DNS 서버를 운영한다. 

 

3. (캐시에 없으면,) ISP의 DNS 서버는 IP 주소를 찾기 위해 DNS 쿼리를 시작한다.

1. 해당하는 IP 주소를 찾기 위해 인터넷 상의 다수의 다른 DNS 서버들을 검색한다.
2. 이 방식은 해당하는 IP 주소를 찾을 때까지, 또는 찾을 수 없다는 에러 응답을 받을 때까지 recursive search로 이루어진다.
3. 다른 DNS서버는 name servers라고 불린다. 왜냐하면 도메인 이름의 형식에 따라 검색을 하기 때문이다.

• (. -> .com -> google.com 순서로 이루어진다.)
• (이 요청은 데이터 패킷을 이용해서 보내진다. 이 패킷은 다수의 네트워킹 장비를 통한다. 네트워킹 장비는 올바른 DNS 서버로 가기위한 가장 빠른 길을 찾기 위해 라우팅 테이블을 이용한다.)

 

4. 브라우저는 정보전송을 위해 서버와의 TCP 연결을 시작한다.

• 이 연결은 TCP/IP three-way handshake 방식으로 이루어진다. 
  1. 클라이언트는 서버에게 새로운 연결을 위해 열려있는지 확인하는 SYN(Synchronize) 패킷을 보낸다.
  2. 서버가 열려있는 포트가 있고 새로운 연결을 시작할 수 있으면 SYN/ACK 패킷을 사용해 ACK(Acknowledgement) 를 응답한다. (SYN 에 ACK 를 더한것)
  3. 클라이언트는 SYN/ACK 패킷을 받고 다시 ACK 패킷을 보내 연결을 완성한다.

5. 브라우저는 웹서버에  HTTP 요청을 보낸다.

• Accept, User-Agent, Accept-Encoding, Connection, 등의 요청을 함께 보낸다.

6. 서버는 요청을 대응한다.

• 서버는 Request handler 에게 요청을 전달한다. (Request handler는 Node, Ruby, Spring, PHP 같은 도구)
• request handler는 헤더와 쿠키 가 담긴 요청을 확인하고 필요시 서버상 정보를 업데이트한다. 
• 그리고 JSON 과 같은 특정 포맷으로 응답을 조립한다.

7. 서버는 HTTP 응답을 보낸다.

• Status Coontent-Encoding, Cache-Control, cookies 등의 정보와 함께 응답한다.
• HTTP와 HTTPS 사이의 주된 차이점은 보안에 있다.
• HTTPS는 TLS(Transfer Layer Security) 또는 SSL(Secure Sockets Layer)을 사용하여 HTTP 요청과 응답을 암호화한다.
  • TLS는 public key, private key를 사용하고, public 키는 클라이언트 기기에 서버의 SSL 인증서를 사용해 공유된다.
  • 클라이언트가 서버와의 연결할 때, 두 기기는 두 개의 키를 사용해 새로운 키(session keys)를 만들어내고, 이 이상의 통신은 암호화 되어 이루어진다. 

8. 브라우저는 응답을 받고 HTML, CSS, JS 를 파싱한다.

• 렌더러 프로세스가 웹 콘텐츠를 처리한다.
• 먼저 HTML을 먼저 다운받고, HTML 파일을 위에서 아래로 읽어가면서 CSS, JS 및 외부 리소스를 다운로드 받는다. 
• JS 파일을 다운로드 할 때는 HTML 렌더링을 멈춘다.

9. DOM, CSSOM 변환

• HTML --> DOM (Document Object Model)
  • 파싱하는 작업은 HTML 표준에 따라 정의된다
• CSS --> CSSOM (CSS Object Model)

10. 렌더 트리 구축

• DOM, CSSOM 을 결합하여 화면에 실제로 그려낼 내용을 작성한다. 즉, 어떤 엘리먼트에 어떤 스타일을 적용할 것인지 정해진다.

11. 렌더 트리 배치 (Layout, 또는 Reflow)

• 각 요소의 크리와 위치를 계산한다.
• 레이아웃 트리 생성 (DOM 트리 구조와 유사할 수있지만 페이지에 표시되는 내용과 관련된 정보만 포함)
• display: none 은 레이아웃 트리 일부가 아님 / visibility: hidden 은 레이아웃 트리 포함됨

 

12. 렌더 트리 그리기 (Paint, 또는 Repaint)

• 요소를 실제로 픽셀로 변환하여 그린다. (Paint, Rasterize)
• 레이아웃 트리를 탐색하여 페인트 레코드를 만든다.
• 픽셀로 그려진 여러 레이어를 합성한다. (Composition)

 

---

References

Inside look at modern web browser (part 3) - https://developer.chrome.com/blog/inside-browser-part3

 

W3C, 2024, Navigation Timing Level 2

https://www.w3.org/TR/navigation-timing-2/#processing-model

 

What happens when you type a URL in the browser and press enter?

https://medium.com/@maneesa/what-happens-when-you-type-an-url-in-the-browser-and-press-enter-bb0aa2449c1a

Why is HTTP not secure? | HTTP vs. HTTPS - https://www.cloudflare.com/learning/ssl/why-is-http-not-secure/