웹 브라우저 요청 흐름

Network

by Wanderer Kim 2022. 7. 10. 14:28

728x90

이번 글에서는 웹 브라우저 요청흐름을 정리 하고자 합니다.

사용자가 웹 브라우저에 접속하여 URL 입력
브라우저가 URL 파싱
- 브라우저에서 어떤 프로토콜, URL, 포트로 요쳥할 것인지 해석 및 분석
- 명식적으로 포트를 선언하지 않았다면, HTTP는 80, HTTPS는 443의 디폴트 값으로 요청
URL에서 도메인을 IP 주소로 변환
- 브라우저에서 자신의 로컬 hosts파일과 부라우저 캐시에 해당 도메인의 존재 여부 확인
- 존재하지 않다면 DNS 서버에 요청하여 해당 도메인을 IP로 변환함
HTTP 메시지 전송
- 웹 브라우저가 HTTP 요청 메시지를 생성
- SOCKET 라이브러리를 통해 목적지 서버와 TCP/IP 연결을 함(3-way-handshake)
  - 클라이언트에서 서버에 연결 요청(SYN), 이 때 클라이언는 ClOSED, 서버는 LISTEN 상태
  - 서버가 SYN 을 받으면 ACK 데이터와 함께 클라이언트쪽에서도 포트를 열어달라는 SYN 을 전송
    - ACK + SYN
    - 서버는 어츰에 LISTEN 상태에서 요청을 받고, ACK + SYN 이수엔 SYN_RCV 상태가 됨
  - 클라이언트에서 서버로부터 ACK + SYN 을 받으면, 포트를 열고 이에 대한 응답으로 서버에 ACK 를 전송
    - 클라이언트는 ESTABLISHED 상태가 됨
  - ACK 데이터를 받은 서버 역시 ESTABLISHED 상태가 되면서, 클라이언트와 서버는 연결이 됨
- TCP/IP에 의해 TCP/IP 패킷 생성
  - TCP/IP 패킷에는 출발지/복적지 IP/PORT 및 HTTP 요청 데이터 포함
- LAN 드라이버 및 LAN 장비에 의해 대상 서버로 패킷 전송

클라이언트로부터 요청 메시지를 받은 서버는 클라이언트로 응답 메시지 전송

서버로부터 응답 데이터를 받은 클라이언트에 이애 렌더링을 통해 사용자에세 웹 화면 표출
- 서버에서 응답한 데이터는 HTML, CSS, Javascript 등으로 이루어져 있다
- 이를 브라우저가 해석하여 화면에 그려준다
  - 구문 분석 및 파싱 → 렌더링 → 돔트리 구성 → 렌더트리 구성 → 렌더트리 배치 → 렌더트리 그리기
  - (https://d2.naver.com/helloworld/59361)