브라우저 구성요소
| 구성요소 | 설명 |
| 브라우저 엔진 | 사용자 입력, 페이지 이동, 렌더링 엔진과의 중재 역할 |
| 렌더링 엔진 | HTML, CSS를 분석하여 화면에 표시될 결과를 렌더링 |
| 네트워크 통신부 | HTTP 요청/응답을 담당 (리소스 다운로드 등) |
| 자바스크립트 엔진 | JS 코드를 실행 (예: V8, SpiderMonkey) |
| UI 백엔드 | 폰트, 콤보박스, 스크롤바 등의 UI 컴포넌트 렌더링 |
| 자료 저장소 | 쿠키, localStorage, IndexedDB 등을 저장하는 역할 |
렌더링 파이프라인 (Rendering Pipeline)
렌더링 엔진은 HTML과 CSS를 받아 화면을 그리는 일련의 단계를 처리합니다.
1. HTML 파싱 → DOM 트리 생성
- HTML 문서의 요소(tag)를 파싱하여 계층적 트리 구조로 구성
- 각 태그는 노드(node)가 되며, 전체 구조를 DOM(Document Object Model)이라고 부름
📌 예: <body><div><span>Hello</span></div></body> → 트리 형태로 표현
2. CSS 파싱 → CSSOM 트리 생성
- 스타일 시트(CSS)를 파싱하여 스타일 규칙 트리(CSSOM) 생성
- DOM 트리의 각 노드에 적용될 스타일이 이 CSSOM을 통해 연결됨
📌 예: span { color: red; } → 해당 span 노드의 스타일 설정
3. DOM + CSSOM → 렌더 트리(Render Tree) 생성
- DOM 트리 + CSSOM 트리 결합 → 렌더 객체 생성
- 화면에 시각적으로 표시되는 요소만 포함
- 예: display: none은 렌더 트리에 포함되지 않음
4. Layout 단계 (Reflow)
- 렌더 트리 기반으로 각 노드의 위치와 크기 계산
- 좌표는 부모 요소를 기준으로 계산됨
- 이 과정을 “Reflow” 또는 “Layout 계산”이라 함
5. Painting 단계 (Repaint)
- 계산된 위치에 픽셀을 채우는 과정
- 색상, 그림자, 테두리, 폰트 등의 시각 속성을 화면에 표현
- 이 과정을 “Rasterization(래스터화)”라고도 함
6. Composite 단계 (합성)
- 브라우저는 일부 요소를 별도 레이어(Layer)로 관리함 (예: 애니메이션, 3D transform)
- 각각의 레이어는 GPU에 텍스처로 업로드되고 합쳐져 최종 이미지 생성
- 이 이미지는 GPU를 통해 화면에 출력됨
HTML ──┐
▼
[DOM Tree]
CSS ──┐
▼
[CSSOM Tree]
▼
─▶ [Render Tree]
▼
[Layout (Reflow)]
▼
[Painting (Repaint)]
▼
[Composite & Display]
| 단계 | 설명 |
| HTML 파싱 | DOM 트리 생성 |
| CSS 파싱 | CSSOM 트리 생성 |
| 렌더 트리 생성 | DOM + CSSOM 병합, 시각 요소만 포함 |
| Layout | 위치 및 크기 계산 |
| Paint | 픽셀 단위로 화면에 시각 요소 표현 |
| Composite | 레이어 병합 후 GPU를 통해 화면 출력 |
'ZeroBase > CS' 카테고리의 다른 글
| 이더넷 프레임 (2) | 2025.08.04 |
|---|---|
| 웹페이지 응답 및 렌더링 과정 (1) | 2025.08.03 |
| 대규모 트래픽으로 인한 서버 과부화 해결방법 (0) | 2025.07.31 |
| 네트워크 장치 (1) | 2025.07.30 |
| HTTP 메서드 PUT, PATCH 차이 (3) | 2025.07.29 |