[ Web & Mark UP ] 브라우저 환경과 렌더링 엔진의 동작 원리.
∇ 브라우저와 렌더링 엔진 동작 원리 정리해보기.
목 차
1. 브라우저의 정의
2. 브라우저의 구성 요소
3. 렌더링 엔진의 동작 원리
∇ 브라우저의 정의.
1) 브라우저란?
" 브라우저" 란 WWW(월드 와이드 웹)에서 정보를 검색, 표현하고 탐색하기 위한 소프트웨어 입니다.
브라우저는 인터넷에서 특정 정보로 이동할 수 있는 "주소 입력창 (=인터페이스)" 이 있고,
서버와 HTTP로 정보를 주고 받을 수 있는 "네트워크 모듈"도 포함하고 있습니다.
서버에서 받은 문서(HTML, CSS, JS) 를 해석하고 실행하여,
화면에 표현하기 위한 해석기(Parser)를 내장하고 있습니다.
2) 브라우저의 역할.
* 브라우저의 주요 역할은 2가지 입니다.
1. 사용자가 입력한(원하는) 웹페이지, 이미지, 동영상 등의 자원을 서버에게 요청하는 역할
2. 서버로부터 전달(응답) 받은 자원을 화면(뷰)에 출력하는 역할
∇ 브라우저의 구성 요소.
브라우저의 구성 요소에는
[ User Iterface, Browser Engine, Rendering Engine, Networking, Js Engine, Ui Backend, Data Storage ]
∇ 렌더링 엔진의 동작 원리
1 ) 렌더링 엔진의 기본적인 동작 원리.
ⓐ 브라우저는 서버로부터 HTML 문서 내용을 모두 전달 받아옵니다.
ⓑ 렌더링 엔진은 전달받은 HTML 문서를 파싱하여, DOM 트리를 구축합니다
ⓒ 외부 CSS 파일과 함께 포함된 스타일 요소를 파싱합니다.
ⓓ DOM 트리와 ⓒ의 결과물들을 합쳐서 렌더 트리를 구축합니다.
ⓔ 렌더 트리와 각 노드에 대해서 화면 상에서 어느 위상에 배치할지 결정합니다.
ⓕ UI백엔드에서 렌더 트리를 그리게 되고, 화면에 우리가 볼 수 있도록 출력시킵니다.
2 ) 렌더링 엔진의 동작 과정 예시.
렌더링 엔진의 기본 동작 과정을 더 자세하게 나타낸 구조도입니다.
렌더링 엔진의 자세한 과정을 설명해보면, 다음과 같습니다.
① DOM 트리 구축.
- 브라우저는 서버로부터 HTML 문서를 모두 전달 받습니다.
- 어휘와 구문을 분석하여, HTML 문서를 파싱하고 파싱 트리를 생성합니다.
문서 파싱은 브라우저가 페이지의 코드들을 이해하고 사용할 수 있는 구조로 변환하는 것을 의미.
- 파싱 트리의 내용을 기반으로, DOM 요소와 속성 노드를 가지는 DOM 트리를 생성합니다.
② CSSOM(CSS Object Model) 생성.
- ①에서 DOM을 생성할 때 거쳤던 과정들을 그대로 CSS에 반복합니다.
- 이 과정을 결과로 브라우저가 이해하고 처리할 수 있는 형식(Style Rules)으로 변환됩니다.
③ 렌더 트리( DOM + CSSOM ) 생성.
- DOM Tree가 구축이 되어가는 동안 브라우저는 DOM Tree를 기반으로, 렌더 트리를 생성합니다.
문서를 시각적인 구성 요소로 만들어주는 역할을 합니다.
④ 렌더 트리 배치.
- 렌더링 트리는 위치값과 크기값을 가지고 있지 않기 때문에,
객체들에게 위치와 크기를 결정해줍니다.
⑤ 렌더 트리 그리기.
- 렌더 트리의 각 노드를 화면의 픽셀로 나타냅니다.
- 렌더 트리 그리기가 완료되면, 화면에 콘텐츠가 표현됩니다.
'Web & MarkUp > Web' 카테고리의 다른 글
| [ Web & Mark UP ] 브라우저 렌더링 과정과 렌더링 최적화 방법. (1) | 2024.10.31 |
|---|---|
| [ Web & Mark UP ] WEB 정리. (1) | 2024.10.30 |