브라우저 렌더링 과정
HTML 파싱
사용자가 특정 페이지에 접속하여 HTML을 서버로부터 내려받으면, 웹 브라우저는 웹 페이지의 HTML 코드를 파싱하여 문서 객체 모델(Document Object Model, DOM)을 생성합니다. 이 DOM은 웹 페이지의 구조와 내용을 표현하는 트리 구조입니다.
CSS 파싱 및 스타일 계산
DOM 트리를 만들다 Link 태그를 만나 StyleSheet를 내려받게 될 경우, 웹 브라우저는 CSS 코드를 파싱하여 스타일 시트 객체 모델(Cascading Style Sheets Object Model, CSSOM)을 생성합니다. 이 CSSOM은 스타일 정보를 나타내는 트리 구조입니다. 이후에는 HTML 문서 객체와 CSS 스타일 정보를 결합하여 렌더링 트리(Render Tree)를 생성합니다. 이 렌더링 트리는 실제로 화면에 출력되는 요소를 포함하며, 논리적인 구조와 시각적인 스타일을 결합한 것입니다.
레이아웃 계산
웹 브라우저는 렌더링 트리를 기반으로 레이아웃 계산을 수행합니다. 이 과정에서 브라우저는 각 요소의 크기와 위치를 계산합니다.
페인팅
레이아웃 계산 후에는 실제로 화면에 출력되는 작업인 페인팅(painting)이 수행됩니다. 이 과정에서는 레이아웃 계산으로 결정된 위치에 따라 요소가 화면에 그려지게 됩니다.
이러한 과정을 거쳐 웹 브라우저는 최종적으로 웹 페이지를 출력하게 됩니다. 브라우저가 웹 페이지를 렌더링하는 과정에서는 여러 가지 최적화 기술이 사용되며, 이를 통해 빠른 화면 출력과 원활한 사용자 경험을 제공하게 됩니다.
댓글