[cs 전공 지식] 브라우저 렌더링 과정

 브라우저 렌더링 과정이란? 

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

브라우저 렌더링 과정
1	HTML 파일을 파싱	웹 브라우저에서 HTML파일을 읽어오고 구조를 해석하는 과정을 말한다.      브라우저가 HTML 문서를 파싱하면 DOM(Document Object Model)트리를 만든다. DOM은 웹페이지의 구조를 표현하는 트리 구조로, 각 요소는 노드로 표현된다.
2	CSS 파일을 파싱	HTML 파싱 후에 CSS파일을 파싱하여 CSSOM(Cascading Style Sheets Object Model)트리를 생성한다.      CSSOM은 스타일 규칙을 표현하는 트리구조로 각 스타일 규칙은 노드로 표현된다.
3	DOM과 CSSOM을 결합	브라우저는 DOM과 CSSOM을 결합하여 Render Tree를 생성한다. 렌더 트리는 화면에 표시되는 요소들만 구성된 트리구조로 각 요소가 화면의 어떻게 배치될지 결정하는 정보를 가지고 있다.
4	레이아웃	렌더트리를 기반으로 브라우저는 각 요소의 크기와 위치를 계산하여 레이아웃을 수행한다. 이 과정에서 각 요소의 크기, 위치, 여백, 색상 등이 계산되고 레이아웃은 화면에 보여지는 모습을 그려주는 중요한 과정이다.
5	페인팅	레이아웃이 완성되면 브라우저는 화면에 요소들을 페인팅하여 실제 화면에 표시한다.  이 과정에서 각 요소의 색상, 텍스트, 이미지 등이 화면에 그려지며 사용자가 볼 수 있는 최종 결과물이 나오게 된다.

* 파싱 = 해석하다.