웹브라우저에 www.naver.com을 치면 생기는 일

과정

1. 도메인 주소에 맞는 IP주소를 알아낸다.
   1. DNS record에 대한 캐시를 찾는다.
      1. 브라우저 캐시에서 찾는다.
      2. OS에서 시스템 콜을 통해 찾는다.
      3. 라우터에 요청하여 찾는다.
      4. ISP에 요청하여 찾는다.
   2. IP를 못 찾은 경우, PC는 Local DNS에 요청한다.
      1. Local DNS가 IP주소를 모르는 경우, Root DNS에 요청한다.
      2. Root DNS가 IP주소를 모르는 경우, Local DNS는 'com' 도메인을 관리하는 DNS에 요청한다.
      3. 'com' 도메인을 관리하는 DNS가 IP주소를 모르는 경우, Local DNS에게 'naver.com' 도메인을 관리하는 DNS를 알려주고, Local DNS는 이 DNS에 요청한다.
      4. Local DNS는 IP주소를 찾은뒤 캐시하고 PC에 전달한다.
2. TCP 연결을 시작한다.
   1. 3-way handshake 과정을 통해 연결을 수립한다.
3. 네이버 서버는 GET http://www.naver.com HTTP/1.1 요청에 대한 결과를 응답한다.
4. 웹브라우저는 그 결과를 바탕으로 화면에 결과를 표시한다.
   1. HTML을 파싱하여 DOM(Document Object Model) Tree를 만든다.
      1. 원시 바이트를 지정된 인코딩에 따라 개별 문자(character)로 변환한다.
      2. HTML 표준에 따라 문자열을 토큰화한다.
      3. 각 토큰을 객체로 변환한다.
      4. 객체를 바탕으로 DOM을 생성한다.
   2. CSS를 파싱하여 CSSOM(CSS Object Model) Tree를 만든다.
      1. (HTML과 같은 방식) CSS 원시 바이트를 바탕으로 CSSOM을 만든다.
   3. DOM과 CSSOM을 바탕으로 Render Tree를 만든다.
      1. 실제로 화면에 표시되지 않는 객체(script, meta 태그 등 또는 CSS에 의해 숨겨지는 것들)는 Render Tree에 포함하지 않는다.
   4. View-port에 따라 레이아웃을 각 노드의 정확한 위치 및 크기를 계산한다.
   5. 각 노드를 화면에 그린다.

 

위 설명에서 가장 부족한 것

1. 라우터란? ISP란?
2. DNS 캐시 과정
3. TCP 연결을 시작하기 위한 과정
4. HTTPS 및 HTTP 버전에 대한 내용
5. 웹브라우저에서 화면에 결과를 표시하는 더 자세한 과정
6. HTTP 요청에 대한 캐시가 있을 때의 처리 과정

 

참고

D2에 브라우저 동작에 대해 굉장히 자세하게 정리한 글이 있다.

https://d2.naver.com/helloworld/59361