1. 브라우저는 어떻게 작동할까?
브라우저는 HTML/CSS/JS를 받아서 화면에 그리는 렌더링 머신으로 다음과 같은 순서로 작동된다.
1) 요청/응답: 주소창에 URL 입력 → 브라우저가 서버에 HTTP(S) 요청 → HTML 문서를 응답으로 받음
2) 파싱 & 트리 구성:
- HTML → DOM 트리
- CSS → CSSOM 트리
- DOM + CSSOM → 렌더 트리(Render Tree)
3) 레이아웃: 각 노드의 크기와 위치 계산(리플로우)
4) 페인트 & 합성: 레이어를 칠(페인트)하고 GPU로 합성해 화면에 렌더링
5) 자바스크립트 실행: JS가 DOM/CSSOM을 수정하면, 필요한 범위만 다시 레이아웃/페인트
1-1. 브라우저의 기본 구조
이미지 출처: https://minemanemo.tistory.com/121
| 구성 요소 | 역할 |
|---|---|
| 사용자 인터페이스(UI) | 주소창, 뒤로/앞으로 버튼, 북마크 등 사용자가 직접 조작하는 영역 |
| 브라우저 엔진(Browser Engine) | UI와 렌더링 엔진 사이에서 명령과 데이터를 중계 |
| 렌더링 엔진(Rendering Engine) | HTML, CSS를 해석해 화면에 표시 |
| 네트워킹(Networking) | HTTP/HTTPS 요청·응답, 캐시 처리 |
| 자바스크립트 엔진(JS Engine) | JS 코드를 해석·실행해 동적인 동작 구현 |
| UI 백엔드(UI Backend) | 기본 운영체제의 사용자 인터페이스를 사용(주로 기본위젯 등을 그리는데 주로 사용) |
| 데이터 저장소(Storage) | 쿠키, 로컬스토리지, 인덱스DB 등 브라우저 내 데이터 저장 |
1-2. 렌더링 엔진의 동작 과정
브라우저가 HTML/CSS/JS를 받아 화면에 그리는 과정은 다음 단계로 진행된다.
1) HTML 파싱 → DOM(Document Object Model) 생성
- HTML 문서를 위에서 아래로 읽으며 태그를 노드(Node)로 변환
- 태그 간 계층 관계를 분석해 DOM 트리 형성
2) CSS 파싱 → CSSOM(CSS Object Model) 생성
- 스타일시트와 <style> 태그, 인라인 스타일을 읽어 스타일 규칙 트리 구성
3) 렌더 트리(Render Tree) 생성
- DOM + CSSOM을 결합해 실제 화면에 그려질 요소만 포함하는 트리 생성
- display: none 같은 요소는 제외
4) 레이아웃(Layout)
- 각 요소의 크기와 위치 계산 (리플로우)
5) 페인트(Paint)
- 각 노드의 색상, 글꼴, 그림자, 배경 등을 칠하기
6) 합성(Compositing)
- 여러 레이어를 GPU로 합성해 화면에 표시
1-3. DOM(Document Object Model) 구조
DOM은 HTML 문서를 메모리에 트리(Tree) 형태로 표현한 객체 모델이다.
DOM의 특징
- 계층 구조: 루트 노드(
<html>)에서 시작해 부모-자식 관계로 연결 - 언어 중립적: 자바스크립트뿐 아니라 다른 언어에서도 접근 가능
- 실시간 반영: JS로 DOM을 수정하면 브라우저 화면이 즉시 변경됨
#HTML 예제:
<html>
<body>
<h1>제목</h1>
<p>본문 내용</p>
</body>
</html>
# DOM 구조:
Document
└── html
└── body
├── h1
│ └── "제목"
└── p
└── "본문 내용"
🔍 3줄 요약
- 브라우저는 UI → 브라우저 엔진 → 렌더링 엔진 → JS 엔진 → 저장소 구조로 동작
- 렌더링 엔진은 HTML 파싱(DOM) → CSS 파싱(CSSOM) → 렌더 트리 → 레이아웃 → 페인트 → 합성 순서로 화면을 그림
- DOM은 HTML 문서의 계층 구조를 메모리에 객체 형태로 나타낸 것으로, 자바스크립트를 통해 동적으로 조작 가능
