웹 브라우저 동작 원리: URL 입력부터 화면 표시까지
1. URL 입력과 파싱
사용자가 브라우저에 URL을 입력하면 다음과 같은 과정이 시작됩니다:
URL 파싱
https://www.example.com/path- 프로토콜(https://) 확인
- 도메인(www.example.com) 추출
- 경로(/path) 식별
2. DNS 조회 과정
1) DNS 캐시 확인
- 브라우저 DNS 캐시
- OS DNS 캐시
- 로컬 hosts 파일
2) DNS 조회 순서
- Root DNS 서버 조회
- TLD(Top Level Domain) 서버 조회
- Authoritative DNS 서버 조회
example.com -> 93.184.216.343. TCP 연결 수립
TCP 3-way Handshake
클라이언트 → SYN → 서버
클라이언트 ← SYN + ACK ← 서버
클라이언트 → ACK → 서버HTTPS의 경우
- TCP 연결 후 TLS(SSL) Handshake 추가
- 인증서 검증
- 대칭키 교환
4. HTTP 요청 전송
요청 헤더 예시
GET /path HTTP/1.1
Host: www.example.com
User-Agent: Mozilla/5.0
Accept: text/html
Accept-Language: ko-KR
Connection: keep-alive5. 서버 응답 처리
응답 헤더 예시
HTTP/1.1 200 OK
Content-Type: text/html
Content-Length: 1234
Cache-Control: max-age=36006. 브라우저 렌더링 과정
1) DOM 트리 생성
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<h1>Hello</h1>
<p>World</p>
</body>
</html>2) CSSOM 트리 생성
h1 {
color: blue;
font-size: 24px;
}3) 렌더 트리 구축
- DOM 트리와 CSSOM 트리 결합
- 화면에 표시될 요소만 포함
display: none요소 제외
4) 레이아웃(리플로우)
- 요소들의 정확한 위치와 크기 계산
- 뷰포트 내에서의 정확한 좌표 결정
5) 페인팅
- 실제 화면에 픽셀을 그리는 과정
- 텍스트, 색상, 이미지, 테두리 등 처리
7. 성능 최적화 포인트
1) DNS 최적화
<!-- DNS 미리 조회 -->
<link rel="dns-prefetch" href="//example.com">2) 리소스 최적화
<!-- 중요 리소스 미리 로드 -->
<link rel="preload" href="style.css" as="style">3) 렌더링 최적화
// 레이아웃 스래싱 방지
requestAnimationFrame(() => {
element.style.width = '100px';
element.style.height = '100px';
});8. 브라우저 캐시
캐시 종류
- 메모리 캐시
- 디스크 캐시
- 서비스 워커 캐시
캐시 제어
Cache-Control: public, max-age=3600
ETag: "33a64df551425fcc55e4d42a148795d9f25f89d4"9. 보안 고려사항
1) HTTPS
- 데이터 암호화
- 무결성 보장
- 인증서 검증
2) 보안 헤더
Strict-Transport-Security: max-age=31536000
Content-Security-Policy: default-src 'self'
X-Frame-Options: SAMEORIGIN10. 개발자 도구 활용
네트워크 탭
- 요청/응답 확인
- 타이밍 분석
- 헤더 검사
퍼포먼스 탭
- 렌더링 성능 분석
- 병목 지점 파악
- 최적화 기회 발견
'개발&프로그래밍' 카테고리의 다른 글
| [HTTP] HTTP 주요 헤더와 활용법 (0) | 2025.02.21 |
|---|---|
| [HTTP] HTTP 인증방식 : Basic, Bearer, OAuth까지 (0) | 2025.02.21 |
| [HTTP] URL 구조 파헤치기 (0) | 2025.02.20 |
| [HTTP] 쿠키와 세션 완벽 가이드: 웹 인증의 기본 (0) | 2025.02.20 |
| [HTTP] HTTP 메서드 완벽 가이드: RESTful API의 기초 (0) | 2025.02.19 |
댓글