웹 기초

[내일 배움 캠프, 웹 기초] 웹 브라우저 작동 원리

kimyongjun0129 2025. 3. 28. 15:04

※ 웹 기초를 복습하기 전에 전체적인 작동원리를 파악하고 공부하는 것이 도움이 될거같아 정리해보았다.

 

 

1. URL 입력과 네트워크 요청

사용자가 웹 브라우저 주소창에 https://example.com과 같은 URL을 입력하면 브라우저는 이를 해석하여 다음 단계를 진행한다.

(1) URL 해석

  • URL을 프로토콜(Scheme), 도메인, 경로, 쿼리 문자열 등으로 분해한다.

(2) DNS 조회

  • 브라우저는 도메인(example.com)을 실제 IP 주소로 변환하기 위해 DNS 서버에 쿼리를 보낸다.
  • 응답을 받아 도메인이 호스팅된 웹 서버의 IP 주소를 얻는다.

(3) TCP 연결

  • 브라우저는 웹 서버와 TCP 3-way handshake(SYN, SYN-ACK, ACK)를 수행하여 연결을 확립한다.

(4) HTTPS 보안 연결 (TLS Handshake)

  • HTTPS를 사용할 경우 TLS(SSL) 암호화 세션을 설정하여 보안 연결을 수립한다.
  • 서버의 인증서를 확인하고 세션 키를 교환한다.

(5) HTTP 요청 전송

  • TCP/TLS 연결이 완료되면 브라우저는 HTTP 요청(예: GET /page HTTP/1.1)을 서버로 보낸다.
  • 요청 헤더에는 브라우저 정보, 쿠키, 캐시 정보 등이 포함될 수 있다.

 

 

 

 

 

 

2. 서버 응답 및 데이터 수신

(1) HTTP 응답

  • 웹 서버는 요청을 처리하고 HTTP 응답을 반환한다.
  • 응답은 다음과 같이 구성된다.
    • 상태 코드 (예: 200 OK, 404 Not Found, 500 Internal Server Error)
    • 헤더 (콘텐츠 유형, 길이, 캐시 정보 등)
    • 본문 (HTML, CSS, JavaScript, JSON 등)

(2) 브라우저의 데이터 수신

  • 브라우저는 응답을 받으면서 데이터를 스트리밍하여 처리할 수도 있다.
  • Content-Encoding: gzip 같은 압축된 데이터라면 이를 해제한다.

 

 

 

 

 

 

3. HTML 파싱과 DOM 생성

(1) HTML 토큰화

  • HTML 문서를 파싱하여 토큰(Token) 으로 변환한다.
  • 예제: <html> → StartTag(html)

(2) DOM(Document Object Model) 트리 생성

  • HTML 요소를 계층 구조로 정리하여 DOM 트리를 만든다.

(3) CSS 파싱 및 스타일 계산

  • <link> 또는 <style> 태그에서 CSS를 로드하고 파싱하여 CSSOM(CSS Object Model) 트리를 구축한다.
  • 브라우저는 CSS 규칙을 계산하여 최종 스타일을 결정한다.

(4) JavaScript 실행

  • <script> 태그가 있으면 JavaScript 엔진(예: V8, SpiderMonkey)이 실행한다.
  • JavaScript는 DOM을 조작할 수 있다.
  • 비동기 요청(AJAX, Fetch API 등)을 처리하기도 한다.

 

 

 

 

 

 

4. 렌더링 및 화면 출력

(1) 렌더 트리 생성

  • DOM과 CSSOM을 결합하여 렌더 트리(Render Tree) 를 만든다.
  • display: none; 같은 보이지 않는 요소는 렌더 트리에 포함되지 않는다.

(2) 레이아웃 (Layout, Reflow)

  • 각 요소의 위치와 크기를 계산하여 레이아웃 트리를 구성한다.
  • 뷰포트 크기에 따라 상대적인 위치를 조정한다.

(3) 페인팅 (Painting)

  • 브라우저는 레이아웃 정보를 바탕으로 픽셀을 칠하는 작업을 수행한다.

(4) 합성 (Compositing)

  • 여러 레이어로 분할하여 GPU 가속을 사용할 수도 있다.
  • 페이지가 부드럽게 스크롤되도록 최적화한다.

 

 

 

 

 

 

5. 상호작용 및 업데이트

  • 사용자가 클릭, 입력 등을 하면 이벤트 루프(Event Loop) 가 이를 처리한다.
  • JavaScript가 실행되면 필요에 따라 DOM을 변경하고 리렌더링(Repaint, Reflow) 을 발생시킬 수 있다.

 

 

 

 

 

 

6. 캐싱과 최적화

(1) 브라우저 캐시

  • CSS, JavaScript, 이미지 등을 저장하여 성능을 향상시킨다.
  • Cache-Control, ETag 등의 헤더로 캐시 정책을 결정한다.

(2) 프리로드 & 프리페치

  • 브라우저는 예측 로딩을 수행하여 성능을 향상시킨다.
    • 프리로드(preload): 필요한 리소스를 미리 로드
    • 프리페치(prefetch): 다음에 방문할 가능성이 높은 리소스를 미리 가져오기



 

 

 

 

7. 출처

https://developer.mozilla.org/ko/docs/Web/Performance/Guides/How_browsers_work