1 - URL 처리
사용자가 브라우저에 google.com 을 압력합니다.
브라우저는 입력된 주소를 URL 형식으로 정규화합니다.
-자동으로 http:// https:// 추가하기
-:80, :443 포트가 있으면 생략하기
-특수문자 있는 경우 퍼센트 인코딩으로 변환하기
-모두 소문자로 변환하기
2 - DNS 조회
브라우저는 google.com 의 실제 IP 주소를 알아내기 위해 DNS (Domain name system) 를 조회합니다.
일단은 브라우저 캐시, OS 캐시, 라우터 캐시, DNS 서버 캐시가 있으면 거기에 있는 IP 를 가져옵니다.
캐시에서 해당하는 IP 가 없으면, 설정된 DNS 서버에 요청을 보내 google.com 의 IP 주소가 뭔지 알아내서 가져옵니다.
3 - TCP 연결
DNS 조회를 통하여 얻어낸 IP 주소로 TCP 소켓 연결을 시작합니다.
-클라이언트가 IP 주소로 SYN 패킷을 보냅니다. 연결 요청을 의미합니다.
-서버는 클라이언트에게 SYN-ACK 패킷을 보냅니다. 요청을 수락하는 의미입니다.
-클라이언트는 서버로 ACK 패킷을 보냅니다. 연결을 완료했다는 의미입니다.
4 - HTTP / HTTPS 요청
연결은 완료되었고, 이제 클라이언트와 서버의 데이터 교환이 시작됩니다.
1) http 요청
http://google.com 을 입력하면, 브라우저는 http 프로토콜을 사용하여 웹 서버에 요청을 보냅니다.
-헤더 필드에는 사용자 에이전트, 컨텐츠 유형 등의 정보가 있습니다.
-쿠키, 캐시 제어 등의 옵션 정보를 포함할 수 있습니다.
2) https 요청
https://google.com 을 입력하면, 추가로 SSL/TLS 을 통하여 암호화/복호화가 포함된 통신을 제공합니다.
5 - 서버 응답 및 데이터 수신
서버는 클라이언트의 요청을 받은 뒤 응답합니다.
-http 상태 코드가 포함되어 있습니다.
-웹 페이지 데이터 (html, css, javascript)가 포함되어 있습니다.
-쿠키, 캐시 설정 옵션도 포함되어 있습니다.
6 - 웹페이지 랜더링
브라우저는 웹페이지 랜더링을 시작합니다.
우선적으로 html 파싱 후 dom 트리를 생성합니다.
그 후에는 css 를 파싱하여 cssom 트리를 생성합니다.
dom 트리와 cssom 트리를 결합하여 랜더 트리를 생성합니다.
레이아웃 단계로 각 요소가 위치과 크기를 계산합니다.
페인팅 단계로 계산된 결과를 바탕으로 화면을 그립니다.
(자바스크립트의 실행시점은 랜더링 프로세스 중 여러 지점에서 일어날 수 있습니다.)
