잘 정리되어 있는 MDN의 글을 짧막하게 정리해 보았습니다.
개요
웹 페이지를 개발하는 입장에서 브라우저의 동작은 꽤나 당연한 것일지도 모릅니다. 당연하게 여겼던 것들을 자세히 살펴보면 생각보다 더 많은 과정들이 있는 것을 볼 수 있습니다. 사용자가 URL을 입력하고 웹 페이지를 이용하게 되기까지의 과정을 살펴보고자 합니다.
웹 페이지 로딩 과정
웹 페이지를 로딩해오기 위해서는 아래 이미지와 같은 12단계의 과정을 거쳐야합니다.
각 단계별로 설명을 해보면 다음과 같습니다.
-
URL 입력:
- 사용자가 브라우저의 주소창에 특정 URL을 입력합니다.
-
DNS 조회:
- 브라우저는 입력된 URL에서 도메인 부분을 추출합니다.
- 브라우저는 DNS 서버에 도메인 이름에 해당하는 IP 주소를 요청합니다.
- DNS 서버는 도메인 이름을 IP 주소로 변환하여 브라우저에 응답합니다.
-
TCP 연결 설정:
- 브라우저는 웹 서버의 IP 주소와 포트 번호를 사용하여 TCP 연결을 설정합니다.
- 웹 서버와 브라우저 간에 3-way handshake 과정을 거쳐 연결이 설정됩니다.
-
HTTPS 핸드셰이크 (HTTPS 사용 시):
- HTTPS를 사용하는 경우, 브라우저와 웹 서버 간에 TLS handshake가 수행됩니다.
- 이 과정에서 암호화 알고리즘, 인증서 확인 등이 이루어집니다.
-
HTML 문서 요청 및 응답:
- 브라우저는 웹 서버에 HTML 문서를 요청합니다.
- 웹 서버는 요청받은 HTML 문서를 브라우저에 전송합니다.
-
HTML 문서 파싱 및 DOM 트리 구축:
- 브라우저는 수신한 HTML 문서를 파싱하여 DOM (Document Object Model) 트리를 구축합니다.
- 이미지/스타일/스크립트(async/defer)의 경우 Preload scanner에서 처리하여 HTML 파싱을 막지 않습니다.
- 브라우저가 DOM 트리를 만드는 프로세스는 메인 쓰레드를 차지합니다.
-
CSS 파싱 및 CSSOM 트리 구축:
- HTML 문서에 포함된 CSS 파일을 가져와 파싱하고, CSSOM (CSS Object Model) 트리를 구축합니다.
-
렌더 트리 생성:
- 브라우저는 DOM 트리와 CSSOM 트리를 결합하여 렌더 트리를 생성합니다.
-
레이아웃 계산:
- 브라우저는 렌더 트리를 기반으로 각 요소의 크기와 위치를 계산합니다.
-
페인팅:
- 브라우저는 계산된 레이아웃 정보를 바탕으로 화면에 요소를 그려냅니다.
-
리소스 로딩 및 실행:
- HTML 문서에 포함된 추가 리소스(이미지, 스크립트, 스타일시트 등)를 병렬로 로딩합니다.
- 자바스크립트 코드는 파싱 및 실행됩니다.
-
페이지 렌더링 완료:
- 모든 리소스 로딩과 렌더링이 완료되면 사용자가 페이지를 이용할 수 있게 됩니다.
마무리
간략하게 글을 쓰면서 평소에 생각하지 않던 네트워크 계층을 보며 기존에 배웠던 사실을 한번 더 상기 시킬 수 있는 시간이었던 것 같습니다. 실제로 용어는 들어봤지만 생소했던 것들은 한번 더 찾아보면서 공부할 수 있는 시간이었고 사용한다고 다 아는 내용이 아닌 것에 한번 더 경각심을 느끼며 이만 글을 줄입니다.
부록
3-way handshake
https://developer.mozilla.org/ko/docs/Glossary/TCP_handshake
TLS handshake
https://www.cloudflare.com/ko-kr/learning/ssl/what-happens-in-a-tls-handshake/
https://www.cloudflare.com/ko-kr/learning/ssl/how-does-ssl-work/
https://www.cloudflare.com/ko-kr/learning/ssl/what-is-https/
Preload scanner
https://web.dev/articles/preload-scanner?hl=ko
https://html.spec.whatwg.org/multipage/parsing.html#speculative-html-parsing
