브라우저 동작 과정

 

 

예시 Google.com 브라우저 동작 과정

1. 사용자 입력

사용자가 웹 브라우저의 주소창에 google.com을 입력하고 Enter 키를 누릅니다.

이때 브라우저는 사용자가 요청한 주소를 기억하고, 그에 따른 작업을 시작합니다.

사용자가 입력한 문자열을 정리하여 URL을 파싱하고, 이 URL이 웹 페이지를 요청하는 것임을 인식합니다.

2. URL 해석

브라우저는 입력된 URL을 해석합니다.

URL의 기본 형식은 프로토콜://도메인입니다.

사용자가 google.com을 입력하면 브라우저는 자동으로 http:// 또는 https://를 추가합니다.

HTTPS는 HTTP의 보안 버전으로, 데이터를 암호화하여 안전하게 전송합니다.

브라우저는 보통 HTTPS를 기본적으로 사용하려고 합니다.

3. DNS 조회

브라우저는 google.com 도메인의 IP 주소를 찾기 위해 DNS(Domain Name System) 서버에 요청을 보냅니다.

DNS는 도메인 이름과 IP 주소 간의 매핑 정보를 저장하는 시스템입니다.

이 단계에서 DNS 서버는 다음과 같은 과정을 거칩니다:

• 재귀적 쿼리: 요청받은 DNS 서버는 루트 DNS 서버로부터 시작하여 TLD(Top-Level Domain) DNS 서버를 거쳐 최종적으로 권한 있는 DNS 서버에 접근합니다. 이 과정을 통해 도메인 이름이 IP 주소로 변환됩니다.
• DNS 캐시: 만약 DNS 캐시에 google.com의 IP 주소가 저장되어 있다면, 브라우저는 바로 그 주소를 사용하여 네트워크 요청을 최소화하고 속도를 향상시킵니다.

4. TCP 연결

브라우저가 IP 주소를 얻으면, HTTP 프로토콜을 사용하여 웹 서버와의 TCP 연결을 수립합니다.

TCP(Transmission Control Protocol)는 신뢰성 있는 데이터 전송을 보장하는 프로토콜입니다.

• 3-way Handshake: 브라우저는 서버의 IP 주소와 포트(일반적으로 80 또는 443)를 통해 연결 요청을 보냅니다. 서버가 요청을 수락하면, 클라이언트(브라우저)와 서버 간에 3-way handshake가 이루어져 연결이 성립됩니다.
  1. SYN: 브라우저가 서버에 연결 요청을 보냅니다.
  2. SYN-ACK: 서버가 요청을 수락하고 응답합니다.
  3. ACK: 브라우저가 서버에 응답을 확인하여 연결이 완료됩니다.

5. HTTP 요청 전송

TCP 연결이 성립되면, 브라우저는 HTTP 요청을 생성하여 웹 서버로 전송합니다. 

• 요청 메서드: GET, POST, PUT, DELETE 등의 HTTP 메서드 중 하나를 사용하여 요청의 종류를 정의합니다. GET 메서드는 서버에서 리소스를 요청할 때 사용됩니다.
• 요청 URL: 요청하려는 리소스의 경로입니다.
• HTTP 버전: 사용 중인 HTTP 프로토콜의 버전(예: HTTP/1.1, HTTP/2).
• 요청 헤더: 클라이언트의 정보 및 요청에 대한 추가적인 메타데이터를 포함합니다. 예를 들어, User-Agent는 브라우저 및 운영 체제 정보를 제공하고, Accept는 클라이언트가 수용할 수 있는 콘텐츠 타입을 정의합니다.

이 요청은 TCP 연결을 통해 웹 서버로 전송됩니다.

6. 서버 처리

웹 서버는 브라우저의 요청을 수신한 후, 해당 URL에 대한 리소스를 찾습니다.

요청한 리소스가 존재하면, 서버는 이를 처리하여 HTTP 응답을 생성합니다. 

• 상태 코드: 요청의 결과를 나타냅니다. 예를 들어, 200 OK는 요청이 성공했음을, 404 Not Found는 요청한 리소스가 없음을 나타냅니다.
• 응답 헤더: 서버가 클라이언트에게 제공하는 메타데이터를 포함합니다. 예를 들어, Content-Type은 응답 본문의 MIME 타입을 지정하고, Content-Length는 응답 본문의 길이를 나타냅니다.
• 응답 본문: 요청한 리소스의 실제 데이터(HTML, CSS, JavaScript 파일 등)가 포함됩니다.

7. HTTP 응답 수신

브라우저는 서버로부터 응답을 수신합니다. 이때 상태 코드를 확인하여 요청이 성공했는지 여부를 판단합니다.

요청이 성공한 경우, 브라우저는 응답 본문을 처리하고 다음 단계로 진행합니다.

8. HTML 파싱

브라우저는 수신한 HTML 문서를 파싱하기 시작합니다. 이 단계에서 HTML 요소를 분석하여 DOM(Document Object Model)을 생성합니다. DOM은 HTML 문서의 구조화된 표현으로, 브라우저가 페이지를 렌더링하기 위해 필요한 정보입니다. 

• HTML 태그 분석: 브라우저는 HTML 태그를 식별하고, 각 태그의 속성과 내용을 추출합니다.
• 노드 생성: 각 HTML 요소는 DOM 노드로 변환됩니다. 노드는 요소, 속성, 텍스트 노드 등으로 구성됩니다.

9. CSSOM 생성

HTML 문서에 포함된 스타일 시트(CSS 파일 또는 <style> 태그)를 찾고, 이를 파싱하여 CSSOM(CSS Object Model)을 생성합니다. CSSOM은 스타일 규칙을 적용하기 위해 필요한 정보입니다.

• CSS 규칙 분석: CSS 파일에서 선택자와 속성을 분석하여 스타일 규칙을 생성합니다.
• 우선순위 계산: CSS의 우선순위 규칙에 따라 어떤 스타일이 적용될지를 결정합니다.

10. 렌더 트리 생성

브라우저는 DOM과 CSSOM을 결합하여 렌더 트리를 생성합니다.

렌더 트리는 화면에 표시될 요소와 그 스타일을 포함합니다. 

• 렌더 트리 노드 생성: 각 DOM 노드에서 CSS 스타일이 적용된 요소를 기반으로 렌더 트리 노드를 생성합니다.
• 숨겨진 요소 처리: display: none으로 설정된 요소는 렌더 트리에 포함되지 않으며, 브라우저는 이를 생략합니다.

11. 레이아웃 계산

렌더 트리가 생성되면, 브라우저는 각 요소의 크기와 위치를 계산합니다.

이 과정을 "레이아웃" 또는 "리플로우"라고 합니다.

• 크기 계산: 각 요소의 너비, 높이, 마진, 패딩을 계산하여 크기를 결정합니다.
• 위치 결정: 요소의 위치를 결정하여 화면에 어떻게 배치될지를 설정합니다.

12. 페인팅

레이아웃이 완료되면, 브라우저는 각 요소를 화면에 그리는 작업인 "페인팅"을 수행합니다. 

• 픽셀 렌더링: 브라우저는 각 렌더 트리 노드를 픽셀로 변환하여 화면에 표시합니다. 각 요소의 색상, 텍스트, 이미지 등이 화면에 나타납니다.
• 계층적 그리기: 요소들이 계층적으로 쌓이면서 그려지며, Z-축을 기준으로 앞뒤 관계가 설정됩니다.

13. 합성

브라우저는 여러 레이어로 나누어진 요소들을 조합하여 최종 화면을 구성합니다. 이 과정은 GPU(그래픽 처리 장치)를 통해 수행되어 성능을 향상시킵니다. 

• 비디오 및 애니메이션: GPU를 사용하여 비디오, 애니메이션, 변환 등이 부드럽게 표시됩니다.
• 레이어 조합: 여러 레이어를 합성하여 최종 이미지로 변환하고 화면에 표시합니다.

14. 사용자 상호작용

페이지가 완전히 로드되면, 사용자는 페이지와 상호작용할 수 있습니다. 

• 이벤트 리스너: 사용자 입력(클릭, 키보드 입력 등)을 처리하기 위한 이벤트 리스너를 설정합니다.
• AJAX 요청: 필요 시 JavaScript를 통해 동적으로 콘텐츠를 업데이트하기 위해 AJAX 요청을 보낼 수 있습니다. 이 과정은 비동기적으로 이루어져 페이지가 새로 고침 없이 업데이트됩니다.