[웹] 렌더링(Rendering)이란?

👉 렌더링이란?

화면에 표시할 웹 페이지를 만드는 과정

 

렌더링과정

1. HTML을 구조별로 분류하여, DOM 객체를 생성.

2. CSS를 구조별로 분류하여, 스타일 규칙 생성.

3. DOM 객체, 스타일 규칙 합쳐, 화면(렌더트리) 생성.

4. 렌더트리를 기준으로 레이아웃 배치, 스타일 작업

 

좀 더 자세한 설명

1. Loader가 서버로부터 HTML을 불러옴

2. HTML을 분류(Phasing)하여 DOM트리( 트리 : 분석에 따른 구조 )를 만든다

3. css 파일과, 스타일 요소를 분류(Phasing)하여 CSSOM트리를 만든다.

4. DOM트리와 CSSOM을 결합하여 렌더링트리를 만든다.

5. 랜더링트리의 요소들의 크기와 위치를 계산한다.

6. 계산된 크기와 위치에 맞게 화면에 출력한다.