주요 기능
- 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것
- 자원의 주소는 URI에 의해 정해진다.
- 자원은 HTML, PDF, 이미지 혹은 다른 형태이다.
기본구조
- 사용자 인터페이스 : 요청한 페이지를 보여주는 창 제외한 나머지 모든 부분 (예 : 주소 표시줄, 북마크 메뉴)
- 브라우저 엔진 : 사용자 인터페이스와 렌더링 엔진 사이의 동작 제어
- 렌더링 엔진 : 요청한 컨텐츠 표시 - HTML을 요청하면 HTML과 CSS를 파싱하여 표시
- 통신
- HTTP 요청과 같은 네트워크 호출에 사용.
- 플랫폼 독립적
- 각 플랫폼 하부에서 실행
- UI 백엔드 : 콤보 박스와 창 같은 기본적인 장치를 그림. 플랫폼에서 명시하지 않은 일반적인 인터페이스로서, OS 사용자 인터페이스 체계를 사용.
- 자료저장소 : 모든 종류의 자원을 하드 디스크에 저장.
- 자바스크립트 해석기
크롬은 각 탭마다 별도의 렌더링 엔진 인스턴스를 유지한다. 각 탭은 독립된 프로세스로 처리된다.
렌더링 엔진 동작과정
- HTML 마크업을 처리하여 DOM 트리를 생성한다.
- CSS 마크업을 처리하여 CSSOM 트리를 생성한다.
- DOM 트리와 CSSOM 트리를 결합하여 렌더링 트리 생성한다.
- 렌더링 트리 배치 : 각 노드에 대해 화면에서의 정확한 위치와 크기를 계산한다.
- 렌더 트리 그리기 : UI 백엔드에서 렌더링 트리의 각 노드를 가로지르며 렌더링한다.
이 과정들은 점진적으로 진행된다. 렌더링 엔진은 모든 HTML을 파싱할 때까지 기다리지 않고 배치와 그리기 과정을 시작한다. 네트워크로부터 나머지 내용이 전송되기를 기다리는 동시에 받은 내용의 일부를 먼저 화면에 표시한다.
이는 좀 더 나은 사용자 경험을 위한 것이다.
상세과정
1. HTML 파싱 후 DOM 트리 만들기
렌더링 엔진은 우선 네트워크 레이어를 통해 전달받은 HTML 문서(Source code)를 파싱(Parsing) 하여 각 요소들을 DOM Tree(Contents Tree)의 각 DOM 노드 들로 전환합니다. DOM이란 Document object model 의 준말로 마크업 형태의 HTML 문서를 오브젝트 모델의 형태로 바꿔놓은 것입니다. 당연히 HTML 문서의 각 마크업과 DOM의 각 요소는 1:1 매칭됩니다.
<html>
<body>
<p>
Hello World
</p>
<div> <img src="example.png"/></div>
</body>
</html>ㄴ HTML, Body 부모 태그 안에 단락을 나타내는 p 태그, 한 요소를 나타내는 div 태그가 자식 태그로 존재함. 이 코드를 DOM Tree로 전환할 때 아래와 같이 구성됨.
2. 렌더 트리(Render Tree) 만들기
HTML 문서들을 파싱하여 DOM Tree를 구성한 후, 렌더링 엔진은 CSS/Style 데이터를 파싱하고 그 스타일 데이터들로 렌더 트리(Render Tree)를 만듭니다. DOM 트리가 웹 상에 나타날 내용(Contents)를 구성한다면 렌더 트리는 시각적 요소, 어떻게 나타날지 그 스타일을 지정합니다. 렌더 트리는 색상, 차원 등 시각적 지침들을 담은 정사각형들로 구성됩니다. 그 정사각형들은 스크린에 맞는 순서대로 정렬되어야 하죠.
렌더 트리 각각의 정사각형에 해당하는 Renderer 렌더러 들은 DOM 트리 요소(element)들에 적용되지만 1:1 관계가 성립되는 것은 아닙니다. 시각적이지 않은 DOM 요소들은 렌더 트리에 삽입될 수 없습니다. <head> 태그 안의 요소들은 화면에 나타나는 값들을 포함하지 않습니다. 따라서 그 어떤 Renderer도 적용될 수 없죠. 어떤 렌더러들은 DOM 노드에 적용될 수 있으나 꼭 트리의 같은 위계에 속할 필요는 없습니다.
The render tree and the corresponding DOM tree, 출처=https://www.html5rocks.com
3. 렌더 트리(Render Tree) 레이아웃 만들기
레이아웃을 만든다는 것은 각 노드들에게 스크린의 어느 공간에 위치해야 할지 각각의 값(Positionm, Size)을 부여하는 것을 의미합니다.
4. 렌더 트리 페인팅 (Renter Tree Painting)
렌더 트리가 만들어져 레이아웃이 구성되었다면, UI 벡엔드가 동작하여 각 노드들을 정해진 스타일 및 위치값대로 화면에 배치합니다.
더 나은 UX(User experience)를 위해, 렌더링 엔진은 각 콘텐츠를 가능한한 빨리 스크린에 띄워야 합니다. 따라서 모든 HTML 요소들을 렌더링 엔진으로 넣어서 한번에 출력하는 것이 아니라, 일부 콘텐츠는 먼저 트리 과정을 거쳐 스크린에 나타나고, 그 와중에 웹의 다른 요소들은 네트워크를 통해 렌더링 엔진으로 읽어들어 오는 순차적인 방식으로 입출력이 진행됩니다.
참조 :
https://poiemaweb.com/js-browser
https://development-crow.tistory.com/5
https://it-ist.tistory.com/110
'개발합시다. > BackEnd 공부' 카테고리의 다른 글
| 도메인 & 도메인네임 이란? (0) | 2021.08.13 |
|---|---|
| HTTP 란 무엇인가? (0) | 2021.08.10 |
| DNS란? (0) | 2021.08.10 |
| 인터넷은 어떻게 동작할까? (인터넷 동작 원리) (0) | 2021.07.14 |
| 백엔드 개발 공부/용어 정리 로드맵 (0) | 2021.07.14 |