개요
사용자가 URL을 입력하여 엔터를 눌렀을 때 브라우저가 페이지를 로드하는 과정에 대해서 공부하고 글로 남기려고 한다.
브라우저 동작 원리
1. URL 파싱 및 DNS 조회
- URL 파싱
- 브라우저는 사용자가 입력한 URL을 파싱 하여 프로토콜, 호스트명, 경로, 쿼리 문자열 등으로 나눈다.
- 예: `https://www.example.com/path?query=123`
- DNS 조회
- 브라우저는 URL의 호스트명을 IP 주소로 변환하기 위해 DNS 서버에 요청을 보낸다.
- 예: 'http://www.example.com → 93.184.216.34'
* 파싱(Parsing): 특정 형식으로 구성된 데이터를 분석하고 그 의미를 이해하는 과정
* DNS(Domain Name System): 도메인 이름을 IP 주소로 변환하여 주는 시스템
2. TCP 연결
- TCP 연결
- 브라우저는 서버와 TCP 연결을 설정한다.
- 이 과정은 3-way 핸드셰이크(Three-way Handshake)를 통해 이루어진다.
- TCP 연결이 설정되면, 브라우저와 서버 간의 안정적인 데이터 전송이 가능하다.
3-way 핸드셰이크는 TCP/IP 프로토콜을 이용해서 통신을 하는 응용프로그램이 데이터를 전송하기 전에 먼저 정확한 전송을 보장하기 위해 상대방 컴퓨터와 사전에 세션을 수립하는 과정을 의미한다.
데이터를 정확하게 전송하기 위해 하는 절차라고 이해하면 된다.
Client > Server: TCP SYN
Server > Client: TCP SYN ACK
Client > Server: TCP ACK
TCP와 SYN, ACK 등의 신호 등은 '네트워크' 분야이다.
3. HTTP 요청 및 응답
- HTTP 요청
- 브라우저는 HTTP 또는 HTTPS 프로토콜을 사용하여 서버에 요청을 보낸다.
- 예: GET /path?query=123 HTTP/1.1와 함께 헤더 정보가 포함된 요청을 보냅니다.
- 서버 처리 및 응답
- 서버는 요청을 처리하고, 결과를 HTTP 응답으로 반환한다.
- 응답에는 상태 코드(예: 200, 404 등), 헤더 본문(HTML, CSS, JavaScript 등)이 포함된다.
4. 브라우저 렌더링
- HTML 파싱 및 DOM 트리 구성
- 브라우저는 응답으로 받은 HTML을 파싱하여 DOM(Document Object Model) 트리를 만든다.
Virtual Dom이란?
Virtual Dom(Virtual Document Object Model)Virtual Dom은 자바스크립트 객체로 메모리에 가상으로 존재하는 DOM 트리의 일종이다.실제 DOM의 경량화된 복사본이며, DOM 조작의 효율성을 높이기 위해 사용된다.이
jundev717.tistory.com
- CSS 파싱 및 CSSOM 트리 구성
- 브라우저는 HTML에 포함된 CSS를 파싱하여 CSSOM(CSS Object Model) 트리를 만든다.
- 자바스크립트 실행
- 브라우저는 HTML과 CSS를 파싱하는 동안 만나는 자바스크립트 코드를 실행한다.
- 자바스크립트는 DOM 및 CSSOM 트리에 접근하여 조작할 수 있다.
- 렌더 트리 생성
- 브라우저는 DOM 트리와 CSSOM 트리를 결합하여 렌더 트리를 생성한다.
- 렌더 트리는 실제로 부라우저 화면에 그려질 요소들을 포함한다.
- 레이아웃 계산
- 브라우저는 렌더 트리의 각 요소의 레이아웃을 계산하여 위치와 크기를 결정한다.
- 페인팅
- 브라우저는 계산된 레이아웃을 기반으로 픽셀을 화면에 그린다.
5. 추가 리소스 로드
- 추가 리소스 로드
- HTML 문서에 포함된 추가 리소스(이미지, 비디오, 추가 CSS 및 자바스크립트 파일 등)를 비동기적으로 로드한다.
- 브라우저는 이러한 리소스를 로드하고 렌더 트리를 업데이트하여 최종적으로 화면에 표시한다.
간단한 예
다음은 URL 입력부터 페이지 로드 완료까지의 과정을 간단히 요약한 예이다.
- DNS 조회: 도메인 이름을 IP 주소로 변환
- TCP 연결: 서버와 연결 설정
- HTTP 요청: 서버에 페이지 요청
- 응답 처리: 서버에서 HTML, CSS, 자바스크립트 파일을 받아 파싱
- 렌더링: DOM 트리와 CSSOM 트리를 결합해 화면에 페이지 표시
- 추가 리소스 로드: 이미지 등 추가 파일을 비동기적으로 로드하여 페이지에 추가