브라우저 동작원리
개념 설명
사용자가 URL을 입력했을 때 브라우저가 페이지를 화면에 렌더링하기까지의 전체 과정.
핵심 포인트
- DNS 조회 → TCP 연결 → HTTP 요청/응답 → 파싱 → 렌더링 순서
- HTML 파싱 시 CSS/JS를 만나면 파싱이 중단되거나 병렬로 처리
- DOM, CSSOM 구성 후 렌더 트리 생성 → 레이아웃 → 페인트
- script의 async/defer 속성에 따라 실행 순서가 달라짐
- 네트워크 레이어에서 Keep-Alive, HTTP/2 멀티플렉싱 등으로 최적화
예시 코드
<!DOCTYPE html>
<html>
<head>
<!-- CSS는 파싱을 블로킹하지만 렌더링을 블로킹 -->
<link rel="stylesheet" href="style.css">
<!-- defer: HTML 파싱 완료 후 실행 -->
<script defer src="app.js"></script>
</head>
<body>
<div id="root">Loading...</div>
<!-- async: 다운로드 완료되면 즉시 실행 -->
<script async src="analytics.js"></script>
</body>
</html>더 많은 내용을 확인하세요! 📚
“브라우저 동작원리”의 전체 내용을 보시려면 프리미엄 플랜이 필요합니다.
✨ 모든 기술 문서 무제한 액세스
📝 실습 예제와 상세한 코드 설명
🎯 면접 예상 질문과 답변 가이드