- 사용자 인터페이스 : 주소표시줄, 이전/다음 버튼, 북마크 메뉴 등. 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분
- 브라우저 엔진 : 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어
- 렌더링 엔진 : 요청항 콘텐츠를 표시. 예를 들어 HTML 을 요청하면 HTML 과 CSS 를 파싱하여 화면에 표시
- 통신 : HTTP 요청과 같은 네트워크 호출에 사용. 플랫폼 독립적인 인터페이스며 각 플랫폼 하부에서 실행됨
- UI 백엔드 : 콤보 박스와 창 같은 기본적인 장치를 그림. 플랫폼에서 명시하지 않은 일반적인 인터페이스로, OS 사용자 인터페이스 체계를 사용
- 자바스크립트 해석기 : 자바스크립트 코드를 해석하고 실행
- 자료 저장소 : 이 부분은 자료를 저장하는 계층이다. 쿠키를 저장하는 것과 같이 모든 종류의 자원을 하드 디스크에 저장할 필요가 있다. HTML5 명세에는 브라우저가 지원하는 웹 데이터베이스가 정의되어 있다.
크롬은 대부분의 브라우저와 달리 각 탭마다 별도의 렌더링 엔진 인스턴스를 유지한다. 각 탭은 독립된 프로세스로 처리된다.
렌더링 엔진의 역할은 요청 받은 내용을 브라우저 화면에 표시하는 것 이다.
렌더링 엔진은 HTML 및 XML 문서와 이미지를 표시할 수 있다. 물론 플러그인이나 브라우저 확장 기능을 이용해 PDF 와 같은 다른
유형도 표시할 수 있다.
파이어폭스는 모질라에서 직접 만든 게코(Geoko)엔진을 사용하고, 사파리와 크롬은 웹킷(Webkit)엔진을 사용한다.
렌더링 엔진은 통신으로부터 요청한 문서의 내용을 얻는 것으로 시작한다.
문서릐 내용은 보통 8kb 단위로 전송된다.
렌더링 엔진은 HTML 문서를 파싱하고 "콘텐츠 트리" 내부에서 태그를 DOM 노드로 변환한다. 그 다음 외부 CSS 파일과
함께 포함된 스타일 요소도 파싱한다. 스타일 정보와 HTML 표시 규칙은 "렌더트리" 라고 부르는 또 다른 트리를 생성한다.
렌더트리는 색상 또는 면적과 같은 시각적 속성이 있는 사각형을 포함하고 있는데 정해진 순서대로 화면에 표시된다.
렌더트리 생성이 끝나면 배치가 시작되는데 이것은 각 노드가 화면의 정확한 위치에 표시되는 것을 의미한다.
다음은 UI 백엔드에서 렌더 트리의 각 노드를 가로지르며 형상을 만들어 내는 그리기 과정이다.