Q1: 웹 브라우저의 동작 원리 (렌더링 파이프라인)

질문: 사용자가 웹사이트에 접속할 때 브라우저가 화면을 그리기까지의 전체 과정을 Construction과 Operation 단계로 나누어 설명하세요.

주요 용어

용어	설명
DOM	HTML을 파싱하여 생성한 트리 구조
CSSOM	CSS를 파싱하여 생성한 트리 구조
Render Tree	DOM + CSSOM을 결합한 렌더링용 트리
AST	JavaScript 코드를 파싱한 추상 구문 트리
Construction	HTML/CSS/JS 파싱 및 Render Tree 생성 단계
Operation	Layout, Painting, Composition을 수행하는 렌더링 단계
CRP	Critical Rendering Path — 브라우저가 HTML/CSS/JS를 픽셀로 변환하는 일련의 단계

전체 흐름

사용자 URL 입력
    ↓
DNS Resolution (도메인 → IP)
    ↓
TCP 3-Way Handshake + TLS Handshake (HTTPS)
    ↓
HTTP Request / Response
    ↓
[Construction 단계]
    HTML 파싱 → DOM Tree
    CSS 파싱  → CSSOM Tree
    JS 실행   → AST 생성 / DOM·CSSOM 수정 가능
    DOM + CSSOM → Render Tree
    ↓
[Operation 단계]
    Layout   → 각 요소의 위치·크기 계산
    Paint    → 픽셀로 변환 (래스터화)
    Composite → 레이어 합성 → 최종 화면 출력

Construction 단계

HTML 파싱 → DOM Tree

브라우저는 HTML을 바이트 → 문자 → 토큰 → 노드 → DOM 순서로 변환한다.

파서 블로킹 주의:

<link rel="stylesheet"> 발견 시 → CSS 파싱 완료까지 DOM 생성 일시 중지 (Render Blocking)
<script> 발견 시 → 스크립트 실행 완료까지 DOM 생성 완전 중지 (Parser Blocking)
해결: <script defer> (DOM 완성 후 실행) / <script async> (비동기 다운로드)

CSS 파싱 → CSSOM Tree

Cascading 규칙(상속, 우선순위) 적용
Computed Value 계산 (16px 등 실제 픽셀 값)
CSSOM 완성까지 렌더링 차단 (Render Blocking Resource)

JavaScript 실행

Source → Tokenization → AST → Bytecode (V8 Ignition) → 최적화 컴파일 (TurboFan)
DOM/CSSOM 수정 가능 → Render Tree 재구성 필요

Render Tree 생성

DOM + CSSOM 결합
시각적 요소만 포함 (<head>, display:none 제외)
위치·크기 정보는 없음 (Layout 단계에서 계산)

Operation 단계

Layout (Reflow)

Render Tree 각 노드의 화면상 정확한 위치와 크기를 계산한다.

Position, Dimensions, Overflow, Font Metrics 등 계산
DOM Read → Write → Read 반복 시 Layout Thrashing 발생 → 배치 처리로 해결

Paint

Layout 결과를 실제 픽셀로 변환 (래스터화).

Background, Content, Effects, Composite Layer 순서로 그림
transform, opacity 속성은 GPU에서 처리 → 별도 레이어로 분리하여 빠름

Composite

여러 Paint 레이어를 GPU에서 합성하여 최종 프레임 출력.

Compositor Thread가 메인 스레드와 독립적으로 동작
스크롤, transform 애니메이션을 60fps로 처리

Critical Rendering Path 최적화

병목	원인	해결
CSS Render Blocking	`<link>` 태그	`media` 속성으로 조건부 로딩, Critical CSS 인라인
JS Parser Blocking	`<script>` 태그	`defer` / `async` 속성 사용
Layout Thrashing	Read-Write 반복	배치로 Read 후 일괄 Write
불필요한 Reflow	잦은 DOM 조작	DocumentFragment 사용

참고

← KR_CS지식.md로 돌아가기

KR_CS_Browser - somaz94/DevOps-Engineer GitHub Wiki

Q1: 웹 브라우저의 동작 원리 (렌더링 파이프라인)

주요 용어

전체 흐름

Construction 단계

HTML 파싱 → DOM Tree

CSS 파싱 → CSSOM Tree

JavaScript 실행

Render Tree 생성

Operation 단계

Layout (Reflow)

Paint

Composite

Critical Rendering Path 최적화

참고

⚠️ GitHub.com Fallback ⚠️

KR_CS_Browser - somaz94/DevOps-Engineer GitHub Wiki

Q1: 웹 브라우저의 동작 원리 (렌더링 파이프라인)

주요 용어

전체 흐름

Construction 단계

HTML 파싱 → DOM Tree

CSS 파싱 → CSSOM Tree

JavaScript 실행

Render Tree 생성

Operation 단계

Layout (Reflow)

Paint

Composite

Critical Rendering Path 최적화

참고

⚠️ **GitHub.com Fallback** ⚠️

⚠️ GitHub.com Fallback ⚠️