사용자 인터페이스
주소표시줄, 이전/다음 버튼, 북마크 기능 등 요청한 페이지를 보여주는 창을 제외한 나머지 부분
브라우저 엔진
사용자 인터페이스
와 렌더링 엔진
사이의 동작을 제어
렌더링 엔진
요청한 콘텐츠를 표시. 예를들어 HTML을 요청하면 HTML과 CSS를 파싱하여 화면에 표시한다.
통신
HTTP 요청과 같은 네트워크 호출에 사용
UI 백엔드
콤보박스와 창 같은 기본적인 장치를 그림
자바스크립트 해석기
자바스크립트 코드를 해석하고 실행
자료저장소
자료를 저장하는 계층. 쿠키를 저장하는 것과 같이 모든 종류의 자원을 하드디스크에 저장할 필요가 있다.
렌더링 엔진의 역할을 요청을 받은 내용을 브라우저 화면에 표시하는 일이다.
렌더링 엔진은 HTML및 XML 문서와 이미지를 표시할 수 있다.
물론 플러그인과 다른 확장 기능을 이용해 PDF같은 다른 유형도 표시할 수 있지만 여기서는 HTML과 CSS로 표시하는 주된 사용패턴에 초점을 둘 것이다.
여기서 다루는 주된 브라우저인 파이어폭시, 크롬, 사파리는 두 종류의 렌더링 엔진으로 제작되었다.
파이어폭스 -> 모질라에서 직접 만든 게코(Gecko)엔진
크롬, 사파리 -> 웹킷 엔진(Webkit)
웹킷은 리눅스에서 동작하기위해 만들어진 오픈소스.
애플에서 맥과 윈도우즈에서 사파리 브라우저를 지원하기 위해 수정을 가했다.
렌더링엔진의 동작 과정
1. DOM 트리 구축을 위한 HTML 파싱
2. 렌더트리 구축
3. 렌더트리 배치
4. 렌더트리 그리기
렌더트리
생성렌더트리
게코 : 형상트리, 각요소를 형상(frame)
웹킷 : 렌더 객체로 구성되어 있는 렌더트리
배치
게코 : 리플로(reflow)
웹킷: 배치(layout)
어태치먼트(attachment)
웹킷이 렌더트리를 생성하기 위해 DOM 노드와 시작 정보를 연결하는 과정
게코는 콘텐츠 싱크(content sink)
라고 부른다.
문서 파싱은 브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환하는 것을 의미한다.
파싱 결과는 보통 문서 구조를 나타내는 노드 트리
인데 파싱 트리
또는 문법 트리
라고 부른다.
렌더링이란, 개발자가 작성한 문서(html,css,javascript)가 브라우저 화면에 출력되는 과정