[Network] Browser 통신 과정

1. 브라우저

브라우저는 사용자가 선택한 자원을 서버에 요청하고 이를 부라우저에 표시하는 역할을 한다. 자원은 보통 HTML 문서지만, PDF나 다른 형태일 수도 있다. 자원의 주소는 URI (Uniform Resource Identifier)에 의해 정해진다.
브라우저는 웹 표준화 기구인 W3C에서 정한 HTML과 CSS 명세에 따라 HTML 파일을 해석하여 표시한다.

브라우저의 기본 구조

- 사용자 인터페이스: 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등 요청한 페이지를 보여주는 창을 제외한 나머지 부분
- 브라우저 엔진: 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어
- 렌더링 엔진: 요청한 콘텐츠를 표시. HTML을 요청 시, HTML과 CSS를 파싱하여 화면에 표시
- 통신: HTTP 요청과 같은 네트워크 호출에 사용. 플랫폼 독립적이며 각 플랫폼의 하부에서 실행된다.
- UI 백엔드: 콤보 박스와 창 같은 기본 장치를 그린다. 플랫폼에서 명시하지 않은 일반적인 인터페이스로서, OS 사용자 인터페이스 체계를 사용한다.
- 자바스크립트 해석기: 자바스크립트 코드를 해석하고 실행
- 자료 저장소: 자료를 저장하는 계층이다. 쿠키 저장과 같이 모든 종류의 자원을 하드 디스크에 저장할 필요가 있다.

2. 웹 브라우저 통신 과정

Chrome 브라우저의 주소창에 특정 URL을 입력시켰을 때 발생하는 일

1) URI 요청

    - google.com을 브라우저의 주소창에 입력하면 http 또는https를 붙여서 http://google.com 으로 재설정한다.
2) IP 주소 조회: DNS를 통해 IP 주소를 조회한다. 이때 UDP를 사용하여 빠르게 통신하도록 한다.

    - 브라우저의 주소 조회

    - 컴퓨터의 hosts라는 파일 조회

    - Local Network의local DNS cache 조회

    - ISP의DNS 서버조회

    - Root Name Server 조회

    - Top-level DNS server를찾아가IP 주소조회
3) TCP 3way handshake

    - 클라이언트와 구글 서버 사이에서 TCP-3way handshake를 통해 TCP 연결이 ESTABLISHED 된다.
4) SSL handshake

    - 클라이언트가 서버로 SSL-encrypted connection을 요청하고, 서버는 클라이언트로 SSL certificate (인증서)를보낸다.
5) Public Key  확인

    - 클라이언트는 CA의 public key를 이용하여 certificate를 해독하여 서버의 public key를 획득하며, 해당 서버가 믿을 수 있는 실제 서버임을 확인한다.
6) Secret Key 생성

    - 클라이언트는 public key를 이용하여 임시 secret key를 만들어 서버로 보낸다.

    - 서버는 서버가 가진 private key를 이용해 secret key를 해석한다.

    - 양쪽은 그 secret key를 이용해 secret key의 기간이 만료될 때까지 encryption과 decryption을 하며패킷을 주고받는다.
7) request

    - 클라이언트는 서버로 HTTP GET 메소드를 통한 요청을 보낸다.

    - HTTP 커맨드들은 SSL/TLS 암호화와 독립적으로 사용된다.
8) response

    - 서버는 status code와 함께 google.com의 html 내용의 payload를 보낸다.
9) 클라이언트는 html에서 참조하는 모든 자원에 대해 GET 요청을 보내는 프로세스를 반복한다.
10) Rendering

    - 서버가 모든 리소스를 제공하면 브라우저가 페이지를 그리게 된다.

    - HTML, CSS, JS의 구문 분석과 렌더링이 이루어진다.

    - 렌더링은 DOM tree를 구성하고 렌더트리 구성, 렌더트리 레이아웃 배치, 렌더트리 그리기로 이루어진다.