웹페이지 응답 및 렌더링 과정

1. 리다이렉트 확인

• 요청한 URL이 다른 URL로 이동해야 하는 경우(ex. /home → /index.html) 서버 또는 클라이언트는 리다이렉트를 수행합니다.
• 상태 코드 예시:
  • 301: 영구 이동
  • 302: 임시 이동

2. 캐시 확인 (Cache Validation)

종류	설명
브라우저 캐시 (Private Cache)	각 사용자 브라우저에 저장되는 캐시 (예: HTML, JS, CSS, 이미지 등)
공유 캐시 (Shared Cache)	프록시 서버, CDN 등에 저장되는 응답 캐시. 여러 사용자 간 공유 가능

 

캐시 판단 절차

• 브라우저는 요청 전에 해당 리소스가 캐싱 가능한지 판단
• 조건부 요청 헤더(If-Modified-Since, ETag)를 통해 유효성 검사
  • 유효하면: 304 Not Modified → 저장된 캐시 재사용
  • 유효하지 않으면: 서버에 재요청하여 새 리소스를 받음

3. DNS 조회

• URL의 도메인 이름(FQDN)을 IP 주소로 변환
• 이 과정에는 다음 컴포넌트들이 관여:
  • 리졸버(Resolver): 브라우저 → OS → 로컬 DNS → 루트 DNS 등 단계적으로 요청
  • 네임서버(Name Server): 도메인에 대한 IP를 실제로 반환

 

예: www.example.com → 93.184.216.34

 

 

4. IP 라우팅 및 ARP

• DNS로 받은 IP 주소를 기반으로 패킷을 전달할 경로 계산
• 최종 목적지까지 가는 최적 경로(Route)를 선택
• 이더넷 수준에서 MAC 주소 조회(ARP)를 통해 실제 목적지 식별

5. TCP 연결 설정 (3-Way Handshake)

• 클라이언트(브라우저)는 서버와 TCP 연결을 설정 (전송 계층)
  1. SYN (클라이언트 → 서버)
  2. SYN-ACK (서버 → 클라이언트)
  3. ACK (클라이언트 → 서버)
• HTTPS일 경우 TLS/SSL 핸드셰이크가 이어짐
  • 인증서 확인, 암호화 키 교환 등 진행

6. HTTP 요청 전송

• 연결이 완료되면, 클라이언트는 서버로 HTTP 요청 전송
  • 예: GET /index.html HTTP/1.1
  • 요청 헤더에는 쿠키, 브라우저 정보(User-Agent), 인증 정보 등이 포함될 수 있음

7. 서버 응답 수신

• 서버는 요청을 처리한 후 HTTP 응답을 반환
  • 상태 코드 (200 OK, 404 Not Found, 500 Internal Server Error 등)
  • 응답 본문: HTML, JSON, 이미지, 파일 등
  • 응답 헤더: 캐시 정책, 쿠키 설정, 보안 정보 등 포함

8. 콘텐츠 다운로드

• 응답 본문에 포함된 컨텐츠를 브라우저가 다운로드
• HTML 외에 참조된 추가 리소스(JS, CSS, 이미지 등)도 병렬적으로 요청 및 수신

9. 브라우저 렌더링

HTML 문서가 모두 수신되면, 브라우저는 화면 그리기 과정을 시작

 

 

단계	설명
DOM 트리 생성	HTML을 파싱하여 노드 기반의 구조 트리 생성
CSSOM 트리 생성	CSS를 파싱하여 스타일 트리 구성
렌더 트리 생성	DOM + CSSOM을 병합, 시각적 요소만 포함
Layout (Reflow)	각 요소의 위치, 크기 결정
Paint (Repaint)	실제 픽셀로 요소 표현
Composite	GPU를 통해 각 레이어를 병합 후 화면 출력

 

1. 브라우저 요청 시작
   ↓
2. 리다이렉트 확인
   ↓
3. 캐시 확인 (304 or 재요청)
   ↓
4. DNS → IP 변환
   ↓
5. 라우팅 + ARP → 서버 도달
   ↓
6. TCP / TLS 연결 설정
   ↓
7. HTTP 요청 전송
   ↓
8. 서버 응답 및 콘텐츠 다운로드
   ↓
9. 브라우저 렌더링 (DOM, CSSOM, 렌더트리, Layout, Paint, Composite)