1.
웹 브라우저가 URL을 해석하고
문법에 맞지 않으면 기본 검색엔진으로 검색합니다.
문법에 맞으면 URL의 호스트 부분을 인코딩합니다.
2.
3.
a.
브라우저 / 로컬 캐시를 확인해서 도메인에 해당하는 IP가 있는지 확인합니다.
b.
없으면 OS에게 DNS 서버에 요청하라고 지시합니다.
c.
DNS 서버는 해당 도메인에 해당하는 IP를 돌려줍니다.
4.
5.
6.
세션이 유지되는 동안 서버에게 요청하고 응답하는 과정을 반복한다.
a.
응답 상태코드에 따라 다르게 처리한다.
b.
응답을 디코딩(Decoding)하고 캐싱 가능하다면 캐싱한다.
7.
웹브라우저는 응답받은 HTML/CSS/JS 및 이미지, 폰트 등의 리소스를 사용하여 렌더링한다.
8.
서버와의 세션이 종료되면 4-way handshake로 연결을 종료한다.
URL 입력 - 5
1.
DNS 확인
2.
HTTP 3-way-handshake 과정으로 TCP/IP 연결
3.
브라우저가 요청 전송 : HTTP 서버를 사용해 요청 전송. GET 메소드.
4.
서버는 HTML 파일 응답 : 처리 결과 데이터를 브라우저로 반환
5.
브라우저 렌더링 : JS / CSS, 이미지 및 정적 리소스, HTML 페이지를 얻기 위한 과정.
a.
HTML 파싱 : DOM
b.
CSS 파싱 : CSSOM
c.
스크립트 태그를 만나면, async인지 defer인지 확인 후 전자는 다운로드 먼저 병렬 JS로 실행하고 후자의 경우 JS 실행이 완료될 때까지 블로킹 상태를 유지.
HTTP/2 프로토콜의 경우 다운로드합니다.
d.
CSSOM 트리와 DOM 트리 구조 생성 후 Render 트리를 만듭니다.
e.
레이아웃 : 페이지 요소의 레이아웃이나 스타일을 결정합니다.
f.
GPU 드로잉 : 페이지를 픽셀로 렌더링하여 내용이 화면에 표시됩니다.
