29_브라우저 렌더링 과정

1. HTML 파싱과 DOM 생성:

브라우저는 서버에서 받은 HTML 문서를 파싱하여 DOM 트리(Document Object Model)를 생성합니다. DOM 트리는 HTML 문서의 구조를 표현하는 트리 구조로, 각 HTML 요소와 그 속성들을 노드로 나타냅니다.

2. CSS 파싱과 스타일 계산:

브라우저는 스타일 시트(CSS)를 파싱하여 CSS 객체 모델(CSS Object Model)을 생성합니다. 이후, DOM 트리와 CSS 객체 모델을 결합하여 스타일 규칙을 계산하고 각 요소에 적용될 최종 스타일을 결정합니다.

3. 레이아웃(Layout) 구성:

브라우저는 DOM 트리와 스타일 규칙을 바탕으로 요소들의 크기와 위치를 계산하여 레이아웃을 구성합니다. 이 과정에서 요소들의 상대적인 배치와 크기가 결정됩니다.

4. 렌더 트리 생성:

브라우저는 DOM 트리와 레이아웃 정보를 바탕으로 렌더 트리(Render Tree)를 생성합니다. 렌더 트리는 화면에 실제로 표시되는 요소들로 구성되며, 시각적인 속성(스타일, 레이아웃)이 반영됩니다.

5. 화면 그리기와 렌더링:

브라우저는 렌더 트리를 기반으로 화면에 요소들을 그리고 렌더링합니다. 이 과정에서 화면의 각 픽셀에 해당하는 색상과 텍스처가 결정되고 실제 화면에 표시됩니다.

이러한 과정을 통해 브라우저는 사용자가 요청한 웹 페이지를 구성하고 화면에 표시합니다.