브라우저의 렌더링 과정

문서 파싱

브라우저는 HTML 문서를 서버에 요청하고 응답을 받는다. 이때 HTML 문서는 파싱되어 DOM(Document Object Model) 트리 구조로 변환된다.

CSS 파싱과 스타일 계산

브라우저는 CSS 파일을 파싱하여 스타일 정보를 추출하고 스타일 규칙을 계산하여 DOM 노드에 적용한다. 이 과정을 통해 각 요소의 스타일 정보가 결정된다.

레이아웃 계산

스타일이 적용된 DOM 요소들의 크기와 위치를 계산하여 브라우저 창 내에서의 레이아웃을 결정한다. 이 과정은 "Reflow"라고도 불리며, 각 요소의 위치와 크기를 결정하여 렌더링 트리를 생성한다.

페인팅

브라우저는 레이아웃이 결정된 요소들을 화면에 그리는 과정을 진행한다.

컴포지팅

마지막 단계로 페인팅된 레이어들을 화면에 합성하여 최종 결과물을 생성한다. 이 과정에서 화면에 보여질 최종 이미지가 생성된다.