★ 브라우저 랜더링 과정

브라우저 랜더링 과정은 도메인 주소(http://www.~~~.com)를 브라우저에 요청할 때 해당 html과 css, javascript를 불러와서 화면에 표현하는 과정을 뜻한다. 

 

1. HTML 파일을 파싱

: 웹 브라우저에서 HTML 파일을 읽어오고 구조를 해석하는 과정을 말한다. 

브라어작 HTML 문서를 파싱하면 DOM(Document Object Model)트리를 만든다. 

DOM은 웹 페이지의 구조를 표현하는 트리 구조로, 각 요소는 노드로 표현됨. 

 

2. CSS 파일을 파싱

: HTML 파싱 후에 CSS 파일을 파싱하여 CSSOM(CSS Object Model) 트리를 생성한다. 

CSSOM은 스타일 규칙을 표현하는 트리구조로 각 스타일 규칙은 노드로 표현됨.

 

3.  DOM과 CSSOM을 결합

: 브라우저는  DOM과 CSSOM을 결합하여 Render Tree(랜더 트리)를 생성한다. 

Render Tree는 화면에 표시되는 요소들만 구성된 트리구조로, 각 요소는 화면에 어떻게 배치될지 결정하는 정보를 가지고 있다. 

 

4. 레이아웃

: 랜더 트리를 기반으로 브라우저는 각 요소의 크기와 위치를 계산해서 레이아웃을 수행한다. 

이 과정에서 각 요소의 크기, 위치, 여백, 색상 등이 계산되고 레이아웃은 화면에 보여지는 모습을 그려주는 과정으로 굉장히 중요한 과정이다.  

 

5.  페인팅 

: 레이아웃이 완성되면 브라우저는 화면에 요소들을 페인팅하여 실제 화면에 표시함. 

이 과정에서 각 요소의 색상, 텍스트, 이미지등이 화면에 그려지며 사용자가 볼 수 있는 최종 결과물이 나온다. 

 

- html과 css를 파싱을 해서 가져오면 돔 구조와 css 구조가 생성이 되는데 이것들이 결합되어 랜더트리가 생성되고 

레이아웃과 페인팅을 만나 브라우저 랜더링이 된다.