브라우저 렌더링 과정이란?
브라우저 렌더링 과정이라는 것은 도메인 주소(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 | 페인팅 | 레이아웃이 완성되면 브라우저는 화면에 요소들을 페인팅하여 실제 화면에 표시한다. 이 과정에서 각 요소의 색상, 텍스트, 이미지 등이 화면에 그려지며 사용자가 볼 수 있는 최종 결과물이 나오게 된다. |
* 파싱 = 해석하다.
'cs 전공 지식' 카테고리의 다른 글
The World Wide Web Consortium(W3C)란? (0) | 2024.06.18 |
---|