브라우저의 렌더링 과정 - 브라우저에 URL을 입력하면 일어나는 일
8/9/2024
웹사이트에 접속하는 것은 일상적인 작업이지만, 그 이면에는 복잡한 과정들이 숨어 있습니다. 이 글에서는 브라우저에 http://www.naver.com을 입력하고 엔터를 눌렀을 때, 네트워크 요청이 이루어지고 브라우저가 웹 페이지를 렌더링하는 전체 과정을 설명하겠습니다.
네트워크 요청 과정
1. 로컬 DNS 캐시 확인
브라우저는 먼저 로컬 DNS 캐시에서 http://www.naver.com의 IP 주소를 찾습니다. 여기에는 브라우저 캐시, 운영 체제(OS) 캐시, 그리고 라우터 캐시가 포함됩니다. 만약 캐시에 IP 주소가 있다면, 이를 사용하여 바로 연결을 시도합니다.
2. ISP의 DNS 서버 요청
로컬 캐시에 IP 주소가 없다면, 브라우저는 인터넷 서비스 제공자(ISP)의 DNS 서버에 요청을 보냅니다. 이 DNS 서버는 일반적으로 사용자가 설정한 네트워크 설정에서 자동으로 제공됩니다.
3. 권한 있는 DNS 서버로의 쿼리
ISP의 DNS 서버에도 해당 IP 주소가 없다면, 권한 있는 DNS 서버에 쿼리를 보내어 IP 주소를 찾습니다. 이 DNS 서버는 http://www.naver.com의 도메인 정보를 관리하는 서버입니다.
4. IP 주소 반환
DNS 서버가 http://www.naver.com의 IP 주소를 찾으면, 이를 브라우저에 반환합니다. 이제 브라우저는 해당 IP 주소에 대해 TCP 연결을 시작할 준비가 됩니다.
5. TCP 3-way 핸드셰이크
브라우저는 서버와의 연결을 설정하기 위해 TCP 3-way 핸드셰이크를 수행합니다. 이 과정에서 브라우저는 서버에 SYN 패킷을 보내고, 서버는 SYN-ACK 패킷으로 응답합니다. 마지막으로 브라우저는 ACK 패킷을 보내어 연결을 완료합니다.
6. HTTP 요청
TCP 연결이 설정되면, 브라우저는 HTTP 요청을 서버에 보냅니다. 이 요청은 일반적으로 GET 요청으로, 브라우저가 http://www.naver.com의 HTML 문서를 요청하는 것입니다.
7. 서버 응답
서버는 요청을 처리한 후, HTTP 응답을 반환합니다. 이 응답에는 상태 코드(예: 200 OK), 헤더, HTML 문서 또는 다른 리소스가 포함됩니다.
8. HTML 문서 로드 및 파싱
브라우저는 서버로부터 받은 HTML 문서를 로드하고, 이를 파싱하여 렌더링을 시작합니다.
브라우저 렌더링 과정
1. HTML 파싱 및 DOM 트리 생성
브라우저는 HTML 문서를 파싱하여 DOM(Document Object Model) 트리를 생성합니다. DOM 트리는 HTML 문서의 구조를 계층적으로 표현한 것으로, 웹 페이지의 요소들을 나타냅니다.
2. CSS 파싱 및 CSSOM 트리 생성
HTML 문서를 파싱하는 도중 <style> 태그나 <link> 태그를 만나면, 브라우저는 CSS 파일을 로드하고 파싱하여 CSSOM(CSS Object Model)을 생성합니다. CSSOM은 CSS 스타일 규칙을 표현하는 트리 구조입니다.
외부 CSS 파일은 <link rel="stylesheet"> 태그를 통해 로드되며, 브라우저는 이를 비동기적으로 로드하지만, CSS 파일이 완전히 로드되고 파싱될 때까지 렌더링을 차단합니다.
3. JavaScript 파싱 및 실행
브라우저가 <script> 태그를 만나면, 자바스크립트를 파싱하고 실행합니다. 이 과정에서 DOM이나 CSSOM이 변경될 수 있습니다. JavaScript는 기본적으로 HTML 파싱을 중단하지만, async 또는 defer 속성이 있는 스크립트는 비동기적으로 로드되고 실행됩니다.
async스크립트는 로드가 완료되는 즉시 실행됩니다.defer스크립트는 HTML 파싱이 완료된 후 실행됩니다.
4. 렌더 트리 생성
브라우저는 DOM과 CSSOM을 결합하여 렌더 트리(Render Tree)를 생성합니다. 렌더 트리는 화면에 표시될 모든 요소의 스타일과 레이아웃 정보를 포함합니다.
5. 렌더 트리와 실제 DOM의 차이
렌더 트리는 화면에 표시되는 요소만 포함하며, display: none과 같은 스타일을 가진 요소는 렌더 트리에 포함되지 않습니다. 반면, DOM 트리는 HTML 문서의 모든 요소를 포함합니다.
6. 레이아웃(Reflow)
렌더 트리를 기반으로 각 요소의 위치와 크기를 계산하여 레이아웃을 배치합니다. 이 과정은 "레이아웃" 또는 "리플로우"라고 불립니다.
7. 페인팅(Repaint)
레이아웃이 완료된 후, 각 요소에 색상, 이미지, 경계선 등을 그리는 페인팅 작업을 수행합니다. 이 작업은 "페인팅" 또는 "리페인트"라고 불립니다.
8. 화면 표시
페인팅이 완료되면, 브라우저는 화면에 최종적인 웹 페이지를 표시합니다.