웹페이지가 브라우저에 렌더링되는 과정

브라우저란?

• 웹페이지의 내용을 읽어 사용자에게 보여주는 도구.
  

렌더링이란?

• HTML, CSS, JS 등의 코드를 해석하고 시각적인 형태로 변환하여 사용자에게 표시하는 과정.

과정

1. load

   • 웹페이지의 리소스(HTML, css 파일, JS 파일, 이미지 등)를 다운로드

2. parsing

   • 브라우저는 다운로드된 HTML 문서를 구문 분석해 DOM(Document Object Model) 객체 생성. (HTML 태그와 요소, 속성 등을 확인하고 구조화하여 DOM 트리를 만듦) (CSS 파서는 CSSOM 트리를 생성)

3. render-tree construction

   • 브라우저는 브라우저 창에 렌더링할 수 있는 Renter 트리 생성. 렌더트리는 돔트리와 스타일 정보가 결합된 정보(DOM Tree + CSSOM Tree)로 구성됨. 화면에 표시되는 구성요소(레이아웃, 스타일, 크기, 위치)들의 정보가 포함되어 있음.

4. layout

   • 렌더링 트리에 기반하여 레이아웃 계산 수행. 브라우저는 렌더링 트리의 각 노드들의 크기와 위치를 계산하고 이를 토대로 화면에 요소를 배치.

5. paint

   • 브라우저는 레이아웃 과정에서 정해진 위치에 모든 화면 요소를 그림. 화면에 사용자가 볼 수 있는 모든 것을 그리고 페이지가 완성됨.

6. display

   • 렌더링된 웹페이지는 사용자가 상호작용할 수 있도록 브라우저 창에 표시됨.