- 네트워크 → HTML 수신
브라우저가 URL을 요청하면 서버에서 HTML(텍스트)을 받습니다. 이 텍스트를 바로 읽어 파싱을 시작합니다. (전부 받아올 때까지 기다리지 않고 스트리밍 파싱 가능)
- HTML 파서 → DOM(Document Object Model) 생성
HTML을 토큰화(tokenize)하고 트리 구조로 바꿉니다 — 이게 DOM입니다. DOM은 문서의 구조(요소와 속성)를 메모리 상의 객체 트리로 표현한 것. 
- CSS 파서 → CSSOM(CSS Object Model) 생성
브라우저는 나
- DOM + CSSOM → 렌더 트리(Render Tree)
DOM과 CSSOM을 결합해 렌더 트리를 만듭니다. 렌더 트리는 화면에 실제로 표시될 노드(예: display:none은 제외)와 각 노드의 계산된 스타일(Computed Style)만 포함합니다. 
- 레이아웃(Layout, reflow)
렌더 트리의 각 노드에 대해 정확한 위치와 크기를 계산합니다(흔히 reflow라 부름). 뷰포트 크기나 폰트 등으로 인해 전체 레이아웃이 다시 계산될 수 있습니다.
- 페인트(Paint)
레이아웃 결과를 바탕으로 브라우저는 화면에 그릴 그래픽 작업(텍스트, 배경, 그림자 등)을 페인트 명령으로 만듭니다. 이 단계에서 픽셀 단위로 무엇을 그릴지 정합니다. 
- 합성(Compositing) — 레이어와 GPU 활용
브라우저는 복잡한 영역을 레이어로 분리해 GPU로 렌더링할 수 있습니다. 각 레이어는 별도로 래스터화(비트맵으로 그려짐)된 뒤 GPU에서 합쳐져 최종 프레임이 만들어집니다. 이 단계는 애니메이션 부드러움과 스크롤 성능에 중요한 역할을 합니다. 
FE