Web Browser , Rendering engine

Web Browser

주요기능

사용자가 선택한 자원을 서버에 요청(Request)하고 서버의 응답(Response)을 받아 브라우저에 표시한다.

HTML과 CSS 명세에 따라 HTML 파일을 해석해서 표시, 이 명세는 웹 표준화 기구인 W3C(World Wide Web Consortium)에서 정한다.

 

 

주요 구성 요소

1. 사용자 인터페이스

: 주소 표시줄, 이전/다음 버튼, 북마크, 새로고침 버튼, 정지 버튼, 홈 버튼, 요청한 페이지를 보여주는 창, 기타 등등

 

2. 브라우저 엔진 : 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어.

3. 렌더링 엔진 : 요청한 콘텐츠를 표시. HTML을 요청하면 HTML과 CSS를 파싱하여 화면에 표시함.

 

4. 통신

: HTTP 요청과 같은 네트워크 호출에 사용됨. 이것은 플랫폼 독립적인 인터페이스이고 각 플랫폼 하부에서 실행됨.

 

5. UI 백엔드

: 콤보 박스와 창 같은 기본적인 장치를 그림. 플랫폼에서 명시하지 않은 일반적인 인터페이스로서, OS 사용자 인터페이스 체계를 사용.

 

6. 자바스크립트 해석기 : 자바스크립트 코드를 해석하고 실행.

 

7. 자료 저장소

: 자료를 저장하는 계층. 쿠키를 저장하는 것과 같이 모든 종류의 자원을 하드 디스크에 저장할 필요가 있다. HTML5 명세에는 브라우저가 지원하는 '웹 데이터 베이스' 가 정의되어 있다.

 

Rendering engine

동작과정

통신으로부터 요청한 문서의 내용을 얻는 것으로 시작

 

기본적인 동작 과정

 

렌더트리 구축

 

 

렌더트리 배치

: 렌더 트리 생성이 끝나면 배치가 시작되는데 이것은 각 노드가 화면의 정확한 위치에 표시되는 것을 의미한다.

 

렌더트리 그리기

: UI 백엔드에서 렌더 트리의 각 노드를 가로지르며 형상을 만들어 냄

 

모든 HTML을 파싱할 때까지 기다리지 않고 배치와 그리기 과정을 시작한다. 네트워크로부터 나머지 내용이 전송되기를 기다리는 동시에 받은 내용의 일부를 먼저 화면에 표시하는 것이다.

 

DOM ( Document Object Model , 문서 객체 모델 )

XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스.

문서의 각 항목을 계층으로 표현한다.