브라우저와 그 작동원리

Geisha 2024. 9. 29. 08:09

브라우저는 무엇인가

브라우저는 웹 페이지를 보여주는 웹 페이지를 표시하는 클라이언트 소프트웨어예요. 사용자가 입력한 URL을 통해 인터넷에 연결하고, HTTP/HTTPS 프로토콜을 사용해 서버와 통신해요. 웹 서버에 요청을 보내 데이터를 받아와 화면에 보여주는 역할을 해요.

URL 입력과 파싱:
- 사용자가 URL을 입력하면, 브라우저는 이를 파싱(parsing)하여 프로토콜, 도메인, 경로 등의 요소로 분리해요.
- 예: https://example.com/page?query=value
  - 프로토콜: https
  - 도메인: example.com
  - 경로: /page
  - 쿼리: ?query=value
DNS 조회:
- 브라우저는 도메인 이름을 IP 주소로 변환하기 위해 DNS 서버에 쿼리를 보내요. 이때 캐시를 활용하여 빠르게 조회하는데, 브라우저 캐시, 운영 체제 캐시, 라우터 캐시, ISP DNS 서버 등의 계층에서 확인해요.
- 결과적으로 example.com에 해당하는 IP 주소를 찾게 돼요.
TCP 연결 설정 (3-way 핸드쉐이크):
- 브라우저는 웹 서버와 데이터를 주고받기 위해 TCP 연결을 설정해요. 이때 3-way 핸드쉐이크 과정을 거쳐요:
  1. SYN: 브라우저(클라이언트)가 서버에 연결 요청을 보내요. 여기에는 클라이언트의 시퀀스 번호가 포함돼요.
  2. SYN-ACK: 서버는 이 요청을 수락하고 응답으로 클라이언트의 시퀀스 번호 + 1과 서버의 시퀀스 번호를 함께 보내요.
  3. ACK: 클라이언트는 이 응답을 확인하고 서버의 시퀀스 번호 + 1을 포함한 확인 응답을 서버에 보내 연결을 확립해요.
- 이 과정을 통해 클라이언트와 서버는 서로의 연결 상태를 확인하고, 데이터 전송을 위한 안정적인 연결이 만들어져요.
- 만약 HTTPS 연결이라면, 이 후에 SSL/TLS 핸드쉐이크가 추가로 진행되어 보안 연결이 설정돼요.
HTTP 요청:
- TCP 연결이 완료되면, 브라우저는 웹 서버에 HTTP 요청을 보내요. 이 요청은 웹 페이지의 HTML, CSS, JavaScript 등을 요청하는 것으로, GET, POST 등의 메서드를 사용해요.
- 요청 헤더에는 브라우저 정보, 지원하는 파일 형식, 세션 정보 등 다양한 정보가 포함돼요.
서버 응답:
- 서버는 브라우저의 요청에 따라 응답을 보내는데, 이 응답에는 HTML, CSS, JavaScript, 이미지 등의 웹 페이지 리소스가 포함돼요.
- 응답 헤더에는 상태 코드(200 OK, 404 Not Found 등), 콘텐츠 유형(Content-Type) 등이 포함돼요.
렌더링 엔진 작동:
- 브라우저의 렌더링 엔진은 HTML을 파싱하여 DOM(Document Object Model) 트리를 만들어요.
- 동시에 CSS 파서를 통해 CSSOM(CSS Object Model) 트리를 만들고, JavaScript 엔진은 스크립트를 실행해요.
- 이 과정에서 브라우저는 DOM과 CSSOM을 결합하여 완전한 구조를 생성해요.
렌더 트리 생성과 레이아웃:
- DOM과 CSSOM을 결합해 화면에 표시될 요소들만 포함하는 렌더 트리를 생성해요.
- 이 렌더 트리를 기반으로 각 요소의 위치와 크기를 계산하는 레이아웃(layout) 과정이 진행돼요. 이때 요소의 크기, 위치, 화면상의 배치 등이 결정돼요.
페인팅(Painting):
- 렌더 트리에 따라 화면에 요소를 그려요. 이 과정에서는 글자, 색상, 이미지 등이 실제 화면에 표시돼요.

이 모든 과정은 브라우저가 최적화를 통해 최대한 빠르게 처리되며, 비동기 방식으로 이루어지는 경우도 많아요. 예를 들어, HTML을 파싱하는 중에 CSS 파일이나 JavaScript 파일을 다운로드하면서 동시에 처리하는 식으로 웹 페이지의 로딩 속도를 개선해요.

브라우저는 이 과정을 통해 웹 사이트를 보여주기 때문에 우리가 쉽게 인터넷을 이용할 수 있는 거예요.