브라우저와 렌더링 엔진

브라우저란?

WWW(World Wide Web)에서 정보를 검색, 표현하고 탐색하기 위한 소프트웨어

• ex) chrome, IE, FireFox, Safari...

브라우저는 인터넷에서 특정 정보로 이동할 수 있는 주소 입력창이 있고 서버와 HTTP로 정보를 주고 받을 수 있는 네트어크 모듈도 포함하고 있다.

서버에서 받은 문서를 해석하고 실행하여 화면에 표현하기 위한 해석기(parser)를 가지고 있다.

브라우저의 역할

1. 사용자가 입력한 웹페이지, 이미지, 동여상 등의 자원을 서버에게 요청하는 역할
2. 서버로부터 전달받은 자원을 화면에 출력하는 역할

브라우저의 구성요소

User Interface

• 사용자가 접근할 수 있는 영역
• 프로그램의 GUI를 구성하는 부분

Browser Engine

• User Interface와 Rendering Engine 사이의 동작을 제어해주는 엔진
• 브라우저라는 프로그램의 비즈니스 로직, 핵심중추 파트
• Data Storage를 참조하여 로컬에 데이터를 스고 읽으며 다양한 작업을 함

Rendering Enging

• 요청한 콘텐츠를 화면에 출력하는 역할
• HTML, CSS 등을 해석(pharsing)하여 화면에 그려줌

Networking

• http요청을 할 수 있으며 네트워크를 호출할 수 있음

JS Engine

• JS를 해석하고 실행함

UI Backend

• 기본적인 웨젯을 그리는 Interface

Data Strorage

• Local Storage, Indexed DB, 쿠키 등 브라우저 메모리를 활용하여 저장하는 영역

---

렌더링 엔진의 동작 원리

DOM 트리 구축을 위한 HTML 파싱 -> 렌더트리 구축 -> 렌더트리 배치 -> 렌더트리 페인팅

3. 외부 CSS 파일과 함께 포함된 스타일 요소를 파싱
4. DOM트리와 위의 결과를 합쳐 렌더트리 구축
5. 렌더 트리의 각 노드에 대해 화면 상 어디에 배치할 지 결정 (레이아웃)
6. UI 백엔드에서 렌더 트리를 그리고 화면에 볼 수 있도록 출력

1. DOM 트리 구축

• 브라우저는 서버로부터 HTML문서를 전달받음
• 렌더링 엔진은 전달받은 문서를 파싱하여 파싱트리 구축
  • 브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환하는 것을 의미
• 파싱트리를 기반으로 DOM요소와 속성 노드를 가지는 DOM트리를 생성

2. CSSOM 생성

• 위에서 DOM을 생성할 때와 동일하게 CSSOM트리 생성

3. 렌더트리 생성

• DOM 트리가 구축되어가는 동안 브라우저는 DOM트리를 기반으로 렌더 트리를 생성
• 문서를 시각적인 구성요소로 만들어주는 역할을 함

4. 렌더트리 배치

• 렌더링 트리는 위치와 크기를 갖고 있지 않기 때문에 객체들에게 위치와 크기를 결정해줌

5. 렌더트리 그리기

• 렌더트리의 각 노드를 화면의 픽셀로 나타냄
• 렌더트리 그리기가 완료되면, 화면에 콘텐츠가 표현됨

참조

참조사이트