(CS) [웹 작동 원리] 브라우저의 렌더링 과정

🧠 브라우저의 렌더링 과정

❔궁금증

매번 프로젝트를 하다보면 웹 브라우저가 그냥 뚝딱하고 나왔는데 어떠한 흐름으로 생기는걸까? 궁금해졌고 HTML, CSS, JS 중에 어떤 순서로 나올까? 라는 생각으로 한번 찾아봤습니다.

⸻

렌더링

데이터를 시각적으로 표현해 사용자에게 보여주는 과정

⸻

브라우저 렌더링

웹 브라우저가 웹 페이지를 불러올 때, 내부적으로 렌더링 엔진이라는 소프트웨어 모듈이 동작함

렌더링 엔진은 HTML, CSS, JavaScript 같은 웹 리소스를 파싱하고, 이를 시각적으로 처리해 브라우저 화면에 표시함

⸻

브라우저 렌더링 구성 요소

렌더링 엔진(Rendering Engine)
→ 웹 리소스를 파싱하고 시각 요소를 렌더링하는 핵심 모듈

렌더 트리(Render Tree) 생성
→ HTML(DOM) + CSS(CSSOM)을 결합해 실제 보이는 요소 트리 구성

레이아웃(Layout)
→ 각 요소의 크기, 위치 등을 계산하는 단계

페인팅(Painting)
→ 계산된 정보를 기반으로 화면에 픽셀을 칠하는 과정

⸻

브라우저 렌더링 처리 과정

[1] HTML 수신 → 파싱 시작

• 브라우저는 서버로부터 HTML 문서를 받으면, 위에서부터 한 줄씩 파싱을 시작함
• 이 과정에서 DOM Tree (문서 구조)가 만들어짐

[2] CSS 수신 → 스타일 처리

• link로 로드된 CSS도 동시에 파싱되며 → CSSOM Tree 생성됨
• 이건 “각 DOM 요소에 어떤 스타일이 적용되어야 하는가?“를 나타냄

[3] DOM + CSSOM → Render Tree 생성

• DOM + CSSOM을 결합해서 Render Tree를 생성
• 여기엔 화면에 실제로 보여질 요소들만 포함해서 보여줌 (예: display: none 요소는 포함되지 않음)

[4] Layout (Reflow)

• 각 요소가 어디에, 어떤 크기로 배치될지 계산하는 단계
• 폰트 크기, 마진, 패딩, 위치 등을 고려

[5] Paint (Repaint)

• 실제로 요소의 색상, 글자, 그림 등을 픽셀 단위로 칠하는 과정
• 배경색, 텍스트 색상, 이미지 등

[6] Composite (합성)

• Paint된 레이어들을 GPU에 올리고, 최종적으로 화면에 표시

✅ JavaScript는 언제 실행될까?

• <script>는 기본적으로 HTML 파싱을 막아버리고 즉시 실행
• 그래서 보통은 defer/async를 써서 로딩 시점을 조절함

⸻

🔄 전체 흐름 다이어그램으로 정리

HTML 파싱
   ↓
DOM 생성       ← JS 실행 (필요 시 DOM 조작)
   ↓
CSS 파싱
   ↓
CSSOM 생성
   ↓
DOM + CSSOM → Render Tree
   ↓
Layout → Paint → Composite
   ↓
🖥️ 화면 출력

⸻