브라우저가 웹 사이트를 렌더링하는 과정을 네트워크 관점에서 설명할 수 있나요?

주소창에 URL을 입력하고 화면이 그려지기까지, 네트워크 관점에서 어떤 일이 일어나는지 단계별로 정리합니다.

1. URL 파싱과 DNS 조회

브라우저가 URL을 분석하고, 도메인 이름을 IP 주소로 바꾸기 위해 DNS 조회를 합니다. (캐시 → 리졸버 → 권한 서버 순)

2. TCP 연결과 TLS 핸드셰이크

IP로 TCP 연결(3-way handshake) 을 맺습니다. HTTPS면 이어서 TLS 핸드셰이크로 인증서를 검증하고 암호화 키를 교환합니다.

3. HTTP 요청·응답

브라우저가 HTTP 요청을 보내고 서버가 HTML 문서로 응답합니다. 이때 캐시 헤더·압축(Gzip/Brotli) 등이 적용됩니다.

4. HTML 파싱과 추가 자원 요청

HTML을 파싱해 DOM을 만들다가 <link>·<script>·<img>를 만나면 CSS·JS·이미지·폰트를 추가로 요청합니다.

• CSS는 CSSOM을 만들며, 렌더 차단 자원입니다.
• <script>(동기)는 파싱을 멈추므로 async/defer로 완화합니다.

5. 렌더링

DOM + CSSOM → 렌더 트리 → 레이아웃(위치·크기 계산) → 페인트 → 합성(composite) 순으로 화면에 그립니다.

네트워크 최적화 포인트

• DNS·연결 비용 → dns-prefetch, preconnect
• 왕복 횟수·동시성 → HTTP/2 멀티플렉싱, HTTP/3
• 중요한 자원 우선 → preload, 중요 CSS 인라인
• 캐싱·CDN 으로 반복 요청 최소화

핵심은 “DNS → TCP → TLS → HTTP 요청 → 자원 로딩 → 렌더링”의 흐름과, 각 단계에서 왕복·차단을 줄이는 것입니다.