2. www.javaspecialist.co.kr
1. 브라우저
• 주요 기능
– 브라우저의 주요 기능은 선택한 웹 리소스(HTML, PDF, 이미지 등)를 브라우저의 화면상에 표현해주
는 기능.
– 서버에 리소스를 요청하고 수신하는 과정을 모두 포함.
– 브라우저가 HTML을 해석하고 화면에 나타내는 방법은 HTML, CSS 표준에 따르게 되는데 브라우저
에 따라 스팩을 따르는 정도는 조금 상이하다고 볼 수 있음.
• 종류
– 1990년대 중반 인터넷 대중화를 이끈 넷스케이프와의 경쟁에서 승리를 거둔 마이크로소프트사의 인
터넷 익스플로러(IE)
– 오픈소스 개발자들이 구성한 모질라 재단에서 선보인 파이어폭스
– 1994년에 선보여 17년 동안 끊임없이 진화하며 다른 웹 브라우저에에도 큰 영향을 끼쳤던 오페라
– 애플이 오픈소스의 웹킷 프로젝트와 공동 연구를 통해 선보인 사파리
– 빠른 속도를 목적으로 웹킷을 바탕으로 선보인 구글 크롬
– 그 외 모바일용 브라우저들
• 각종 모바일 장치의 디폴트 브라우저들
• 크롬 모바일 웹브라우저, 오페라 모바일 웹브라우저, 미렌 브라우저, 돌핀 브라우저 등
3. www.javaspecialist.co.kr
2. 브라우저 주요 구성요소
• UI (User Interface)
• 각 브라우저의 UI는 주소바, 뒤로가기/앞으로가기 버튼, 북마크 메뉴 등을 공통적으로 포함.
• 브라우저 엔진
• 렌더링(rendering) 엔진에 작업을 요청하고 다루는 인터페이스 부분.
• 렌더링 엔진
• 요청된 컨텐츠를 화면에 표시하기 위해 필수적인 부분.
• 예를 들어 요청된 페이지가 HTML이라 할 때, 렌더링 엔진은 HTML과 CSS를 파싱하고 화면에 파싱된 컨텐츠를 표현하
는 역할을 수행.
• 네트워킹
• HTTP request와 같은 네트워크 호출을 위해 필요한 부분.
• 각 플랫폼에 의존적인 부분과 플랫폼에 독립적인 인터페이스 부분으로 구성.
• UI 백엔드
• 콤보박스나 윈도우(window)와 같은 기본 위젯을 화면에 그리는데(drawing) 필요.
• 자바스크립트 해석기
• 자바 스크립트 코드를 파싱하고 실행하는데 필요.
• 데이터 스토리지
• 퍼시스턴스 계층 (persistence layer).
• 브라우저는 쿠키등과 같이 데이터를 로컬영역에 저장할 공간이 필요.
– Chrome의 경우에 경량형 RDB sqlite를 사용 함.
– HTML5 표준으로 채택된 데이터베이스는 IndexedDB라는 Key/Value 기반 데이터베이스.
User Interface
Browser Engine
Rendering Engine
Networking
JavaScript
Interpreter
UI Backend
DatabasePersistence
브라우저 주요 구성요소
크롬은 다른 브라우저와는 다르게 렌더링 엔진의 인스턴스
를 각 탭별로 사용한다. 즉 각 탭별로 별도의 렌더링 엔진을
사용하여 화면을 표시한다.
4. www.javaspecialist.co.kr
3. 브라우저는 어떤 일을 하는가?
• 웹 엔진?
– 대부분의 웹브라우저는 HTML을 처리하는 부분과 UI를 구분하여 설계. 그 이유는 HTML처리는 웹브라우저 뿐만 아
니라 이메일 편집기, 위젯(Widget) 실행 등에 사용되기 때문. 그래서, 이 컴포넌트를 (웹)브라우저 엔진이라고 부를 수
있지만, 브라우저만 사용되는 것이 아니기 때문에 웹 엔진이라고 부르는 것이 더 맞는 표현.
• 웹 엔진이 주로 하는 일은 웹서버에 저장된 HTML문서를 다운로드 받아 특정 윈도우 영역에 표시하는 것.
• 좀 더 자세히 살펴보면 기본적으로 다음과 같은 작업을 실행.
– 불러오기(Loading)
– 파싱(Parsing)
– 자바스크립트 실행
– 레이아웃(Layout)작업
– CSS 처리
– 그리기
– 이벤트 처리
– HTML 편집
브라우저가 하는
일?
아래의 그림이 잘못된 그림은 아니
다. 그러나 이 슬라이드의 목적은
브라우저가 내부적으로 어떻게 동
작하는지를 알아보자는 것이다.
5. www.javaspecialist.co.kr
4. 브라우저는 어떤 일을 구체적으로…
• 불러오기(Loading)
– 불러오기는 HTTP 모듈 또는 파일시스템으로 전달 받은 리소스 스트림(resource stream)을 읽는 과정.
– 로더(Loader)가 이 역할을 맡고 있음. 로더는 단순히 읽는 것이 아니라, 이미 데이터를 읽었는지도 확인하
고, 팝업창을 열지 말지, 또는 파일을 다운로드 받을 지를 결정함.
• 파싱(Parsing)
– 파싱은 DOM(Document Object Model) 트리를 만드는 과정.
– 일반적으로 웹 엔진은 HTML, XML 파서를 각각 가지고 있음. HTML파서는 말 그대로 HTML문서를 파싱하는데
사용되고, XML파서는 XML 형식을 따르는 SVG, MathML 등을 처리하는데 사용함.
• 렌더링 트리(Rendering Tree) 만들기
– 파싱으로 생성된 DOM 트리는 HTML/XML문서의 내용을 트리 형태로 자료구조화 한 것.
– 실제 이 내용을 화면에 표시하기 위해서는 다른 형태의 데이터 구조가 필요. 다시 말해, DOM 트리는 내용 자체
를 저장하고 있고, 화면에 표시하기 위한 위치와 크기 정보, 그리는 순서 등을 저장하기 위한 별도의 트리 구조
가 필요. 이를 일반적으로 렌더링 트리라고 부름.
– HTML의 문서의 <head>, <title>, <body> 태그와, CSS "Display" 속성(property) 값이 None인 태그등은 화면에
표시될 필요가 없기 때문에 렌더링 트리에 추가되지 않음.
• CSS 스타일(Style) 결정
– CSS는 HTML의 문서에서 내용과 별도로 표현을 나타내기 위해 만들어졌음.
– CSS 스타일은 셀렉터(selector) 정의에 따라 적용되는 태그가 다를 수 있어서, 모든 CSS 스타일을 분석하여 최
종적으로 어떤 태그에 어떤 스타일 규칙이 적용되는지를 결정해야 함.
• 레이아웃(Layout)
– 렌더링 트리가 생성될 때, 각 렌더(Render) 객체는 위치나 크기를 가지고 있지 않음.
– 각 렌더 객체가 위치와 크기가 갖게 되는 과정을 레이아웃(Layout)이라고 함.
• 그리기(Painting)
– 그리기 단계는 렌더링 트리를 탐색하면서 특정 메모리 공간에 RGB값을 채우는 과정. 마치, 그릴 대상을 적은
카드 뭉치에서 맨 윗 장부터 하나씩 꺼내어 적힌 대상을 빈 종이에 그리 것과 비슷하다고 볼 수 있음. 물론 카
드에는 어느 위치에 어떤 크기로 그릴지, 어떤 색깔로 그릴지 자세히 적혀음.
6. www.javaspecialist.co.kr
5. 렌더링 엔진
• 브라우저별 사용된 렌더링 엔진의 종류.
– IE - Trident
– 크롬 - Webkit
– 파이어폭스 - Gecko
– 사파리 - Webkit
– 오페라 - Presto
• 렌더링 엔진은 네트워크 계층으로부터 요청된 페이지의 컨텐츠를 얻어 오는데 대략 8k 크기
의 단위로 이를 수행함.
• 렌더링 엔진 기본 흐름
– 렌더링 엔진은 HTML 문서를 파싱 할 것이고 "DOM tree"라 불리는 트리형태로 DOM 노드를 생성하게
되며
– HTML의 스타일 정보들은 별도의 render tree로 구성된다. 렌더트리는 색상이나 dimension들을 포함
하는 그래픽적 속성들의 사각형을 포함하며 사각형들은 올바른 순서대로 화면에 표시된다.
– 렌더트리를 생성한 후에 렌더트리의 "layout" 과정을 수행한다. 다시 말해서 각 노드들이 화면상에서
정확히 그들이 놓여있어야 할 곳에 나타나게 된다.
– 다음과정은 "painting"인데 이 과정에서 렌더 트리를 순회하면서 스타일 정보를 찾아서 UI 백엔드를
이용하여 각 노드들을 화면상에 표현하게 된다.
렌더링 엔진 기본 흐름
Parsing HTML
to construct
the DOM tree
Render tree
construction
Layout of the
render tree
Painting the
render tree
참고
각 브라우저에 사용된 자바스크립트 엔진(해
석기)
• IE - Chakra
• 크롬 - V8 (Crankshaft)
• 파이어폭스 - JaegerMonkey
• 사파리 - Nitro
• 오페라 - Carakan
7. www.javaspecialist.co.kr
6. 렌더링 엔진 종류 (1/4)
• 트라이던트(Trident)
– 마이크로포스트 윈도우 버전의 IE가 채용하고 있는 레이아웃 엔진
– HS HTML로 알려져 있으며 이 엔진은 1997년 IE 4.0부터 도입되어 현재까지 새로운 기술
을 탑재해 꾸준히 업그레이드 되고 있음
– 트라이던트는 개발자가 자사 응용 프로그램에 웹 브라우징을 쉽게 추가할 수 있도록 모듈
방식으로 제공됨
• IE의 시장 독점이 계속되어온 탓에 트라이던트 엔진 역시 오랫동안 독점적인 위치를 차
지하게 되었고, 특히 한동안 IE의 개발을 하지 않았기에 역시 트라이던트 코어의 업데이
트도 상당기간 이뤄지지 않았으며, 결국 W3C 표준과 맞지 않고 내부의 버그와 보안 문
제들이 누적되어 브라우저의 호환성이나 성능도 매우 부족한 모습을 보였었음.
– IE7에서 MS는 트라이던트 레이아웃에 큰 변화를 주어 웹 표준 대응을 개선하고 새로운 기
술을 지원하게 되었지만, 상대적으로 다른 브라우저들에 사용된 엔진들에 비해서는 크게
뒤떨어진 편이라고 할 수 있음
– IE9에는 SVC, XHTML, HTML5 지원이 추가된 트라이던트 5.0 버전이 적용되었음
8. www.javaspecialist.co.kr
6. 렌더링 엔진 종류 (2/4)
• 웹킷(WebKit)
– 웹킷은 애플, 노키아, 어도비, 구글 등에 의해 공동 개발된 오픈 소스 기반의 웹 브라우저
엔진
– 웹킷은 KDE의 KHTML와 KJS를 기반으로 제작되었으며 단순히 레이아웃 엔진이라고 부
르지 않는 이유는 바로 HTML, SVG를 위한 레이아웃, 렌더링, DOM 라이브러리인
Webcore와 웹킷 기능을 위한 자바스크립트 엔진인 JavaScriptCore, 그리고 자바스크립트
오류를 검진할 수 있는 Drosera 디버거를 함께 포함하고 있는 상위 개념이기 때문이다.
– 웹킷 엔진은 애플 사파리와 구글 크롬 외에도 맥용 옴니웹, 시이라, 아로라, 미도리, 유즈블,
iCab, 어도비 통합 런타임 등에도 사용되고 있음
• 특히 웹킷은 휴대폰 웹 브라우저에서 보다 많이 사용되고 있는데, 대표적으로 구글의 안
드로이드, 애플의 아이폰, 그리고 노키아의 Series 60의 브라우저들이 모두 웹킷 엔진
기반으로 되어 있음
• 또한 위젯 엔진에서의 사용도 증가하고 있어 차이나 텔레콤의 BAE, 애플의 대시보드,
노키아 WRT역시 모두 웹킷 엔진이 적용되어 있음
– http://webkit.org
* KDE : K Desktop Environment, 그놈과 유사한 프로젝트
* KHTML : KDE 프로젝트가 개발한 HTML 레이아웃 엔진
* KJS : KDE 프로젝트가 개발한 JavaScript 엔진
* SVG(Scalable Vector Graphics) : 2차원 벡터 그래픽을 표현하기 위한 XML기반의 파일 형식
9. www.javaspecialist.co.kr
6. 렌더링 엔진 종류 (3/4)
• 게코(Gecko)
– 게코는 오픈 소스 코드이며 C++로 만들어진 레이아웃 엔진
– 넷스케이프에서 개발했지만 넷스케이프의 몰락 이후 현재는 모질라에서 유지-보수를 담당
하고 있으며 파이어폭스에서 사용되고 있음
– 게코 엔진의 가장 큰 특징은 완벽한 오픈 소스 코드이기 때문에 전세계 개발자들이 이 코
드를 사용해 기능을 추가할 수 있게 되면서 개발 수준이 비약적으로 향상되었다는 점
– 또한 오픈 소스이기 때문에 게코 엔진을 사용하는 브라우저도 많으며, 이로 인해 시장에서
꾸준히 높은 점유율을 유지하고 있음
– 현재 게코엔진을 사용한 브라우저는 파이어폭스를 비롯해 넷스케이프 6-9, SeaMonkey,
Camino, Mozilla, Flock, Galeon 등으로 다양하며 구글 가젯 엔진도 게코 엔진을 사용하였
음.
– 이 외에 게코 엔진은 뛰어난 확장성을 바탕으로 윈도우즈, BSD, 리눅스, 맥 OS X에서 사
용이 가능하며 참고로 파이어 폭스 4에는 Gecko 2 최신 버전이 적용되었음.
10. www.javaspecialist.co.kr
6. 렌더링 엔진 종류 (4/4)
• 프레스토(Presto)
– 프레스토는 오페라 소프트웨어가 오페라 브라우저를 위해 개발한 레이아웃 엔진.
– 프레스토 엔진은 2003년 오페라 7.0에 처음으로 적용되었으며 렌더링 속도의 최적화에 중
점을 두고 가장 빠른 속도를 제공해왔음
– 하지만 프레스토 엔진은 오페라 브라우저 또는 관련된 제품만 사용이 가능하고 소스나 바
이너리 DLL등은 공개적으로 사용할 수 없기 때문에 호환성이나 대중성에서는 다소 부족
한 모습임
– 프레스토는 다른 엔진에 비해 뛰어난 스크립트 처리 능력과 빠른 자바스크립트 실행 속도
를 제공하지만, 상업용 엔진이기 때문에 사용되는 브라우저가 제한되어 개발 및 발전을 가
로막고 있다고 평가를 받고 있음. 오페라 11에는 프레스토 2.7 버전이 사용되어 이전 2.6
버전에 비해 더 많은 마크업과 API를 지원함
11. www.javaspecialist.co.kr
7. 렌더링 엔진의 메인 플로우
Webkit 렌더링 엔진의 메인 플로우
HTML
Style
Sheets
HTML
Parser
Painting
DOM
Tree
Layout
CSS
Parser
Attachment
Rende
r
Tree
Style
Rules
Display
DOM
자바스크립트로
DOM Tree의 객
체를 제어한다면
화면 조작이 가능
하다는 의미이다.
물론 그럴려면 자바스
크립트가 실행되기 전
에 HTML문서가 파싱
되어 DOM Tree가 만
들어져 있어야 한다는
것이다.
스타일을 처리하
고(computation)
renderer를 생성
하는 과정을 말한
다.
렌더 객체가 위치
와 크기가 갖게 되
는 과정을 말한다.
렌더링 트리를 탐
색하면서 특정 메
모리 공간
에 RGB값을 채
우는 과정이다.
