웹 브라우저의 작동 원리
웹사이트를 방문하면 브라우저는 어떻게 HTML, CSS, JavaScript를 받아서 화면에 보여줄까?
이 과정은 파싱 → 렌더링 → 그리기의 흐름으로 이뤄진다.
📌 1. 리소스 요청 (Request)
브라우저 주소창에 URL을 입력하면, 다음과 같은 과정이 일어난다:
- DNS 조회 → 도메인(IP 주소) 확인
- HTTP 요청 → HTML 파일 요청
- HTML 파싱 중 CSS, JS, 이미지 등 추가 리소스 요청
HTML이 도착하면 즉시 파싱이 시작되며, 동시에 CSS/JS 파일도 비동기적으로 요청됨
📌 2. 렌더링 엔진(Rendering Engine)이란?
브라우저에서 웹 페이지를 그리는 역할을 하는 핵심 컴포넌트
| 브라우저 | 렌더링 엔진 |
| Chrome, Edge, Brave | Blink |
| Safari | WebKit |
| Firefox | Gecko |
렌더링 엔진은 다음 작업을 수행한다.
- HTML, CSS 파싱
- DOM, CSSOM 생성
- Render Tree 구성
- Layout & Painting
- 화면에 최종 출력
📌 3. 파싱(Parsing) 과정
3-1. HTML 파싱 → DOM 생성
HTML 문서를 토큰 단위로 분석하여 트리 구조의 DOM(Document Object Model) 생성
<body>
<h1>Hello</h1>
<p>World</p>
</body>→
DOM 트리
└── <body>
├── <h1> → "Hello"
└── <p> → "World"
3-2. CSS 파싱 → CSSOM 생성
CSS 파일(또는 <style> 태그)을 파싱하여 CSSOM(CSS Object Model) 생성
p {
color: blue;
font-size: 16px;
}→ CSS 규칙을 트리 형태로 구성
📌 4. Render Tree 생성
- DOM + CSSOM 을 결합해 Render Tree(렌더 트리) 를 생성
- 시각적으로 화면에 보여질 요소만 포함됨 (예: display: none은 포함되지 않음)
📌 5. Layout 단계 (Reflow)
- 각 요소의 위치와 크기를 계산
- 브라우저 창 크기, 폰트 크기, 박스 모델(box-sizing) 등에 따라 결정됨
📌 6. Paint 단계
- 요소들의 색상, 텍스트, 그림자, 테두리 등 스타일을 픽셀 단위로 변환
- GPU 또는 CPU를 이용해 실제 화면에 그리기 위한 준비
📌 7. Composite 단계 (합성)
- 여러 레이어(layer)를 합성하여 최종 화면을 그리는 단계
- 스크롤, 애니메이션 최적화 등에서 중요
📌 8. 자바스크립트의 역할
- 브라우저는 JavaScript를 자바스크립트 엔진 (예: V8, SpiderMonkey)으로 실행
- JS가 DOM을 조작하면 Reflow / Repaint가 다시 일어날 수 있음
document.querySelector('p').style.color = 'red';→ DOM 조작 → Paint 다시 수행
📌 9. 전체 흐름 요약
HTML 요청
↓
HTML 파싱 → DOM
CSS 파싱 → CSSOM
↓
Render Tree 생성
↓
Layout (위치/크기 계산)
↓
Paint (스타일 적용)
↓
Composite (레이어 결합)
↓
화면에 출력!
📌 10. 최적화 관련 팁
- CSS는 HTML 파싱을 막지 않지만, JS는 중단시킴
- <script>는 defer 또는 async 사용 권장
- 자주 변경되는 요소는 transform, opacity 사용 → GPU 처리 가능
- 복잡한 DOM 변경은 requestAnimationFrame 활용
마무리
웹 페이지가 사용자 화면에 나타나기까지는 수많은 파싱, 계산, 렌더링, 합성 작업이 일어난다.
이 흐름을 이해하면 웹 성능 최적화는 물론, 디버깅이나 CSS/JS 작성 시에도 더 나은 판단을 할 수 있다!
'1주차' 카테고리의 다른 글
| 웹 스토리지 (Web Storage) (0) | 2025.04.11 |
|---|---|
| 🧐 브라우저에 www.google.com을 입력하면 어떤 일이 일어날까? (0) | 2025.04.10 |
| 자바스크립트 이벤트 루프 (1) | 2025.04.10 |
| 웹접근성과 웹 표준 [시맨틱 태그, SEO] (0) | 2025.04.10 |
| 🔍앵커 기반 스크롤의 주소 문제 해결하기 (0) | 2025.04.09 |
