nugawiki

./categories/server

URL 입력 시 네트워크·렌더링 과정

업데이트 2026-07-21 조회수

URL 입력 → 화면 출력 흐름

1. 네트워크 (데이터 수신)

  1. DNS 캐시 확인 → 없으면 Local DNS에 Recursive Query (.comgoogle.com)
  2. 얻은 IP로 TCP 3-way handshake (SYN → SYN+ACK → ACK)
  3. HTTP(S) 요청 → Web Server(정적) / WAS(동적) / DB
  4. 응답 + Status (1xx~5xx) 수신 → 필요 시 4-way 종료 (FIN/ACK, TIME_WAIT)
# DNS / 연결 점검 예
nslookup www.google.com
dig www.google.com
curl -vI https://www.google.com

2. Critical Rendering Path

단계내용
DOMHTML 바이트→문자→토큰→노드→트리
CSSOMCSS 동일 파싱
Render TreeDOM+CSSOM (표시 노드만)
Layout위치·크기
Paint픽셀 그리기
Compositetransform/opacity 등 레이어 합성
  • Reflow: 레이아웃 재계산 → 보통 Repaint 동반
  • Repaint만: background-color, visibility
  • 최적화: Reflow/Repaint 최소화

./comments