본문 바로가기

프로그래밍(TA, AA)/자바스크립트

[브라우저엔진] 브라우저 렌더링 엔진

2015년 구글은 크롬의 웹 렌더링 엔진으로 사용하던 WebKit을 대체하는 Blink라는 WebKit에서 파생된 새로운 웬 렌더링 엔진을 사용하기 시작했습니다. WebKit은 웹브라우저 시장의 40% 점유율을 가지는 웹 렌더링 엔진이고, Chrome(28 버전 이전), Safari, Opera(15 버전 이전) 등 많은 웹 브라우저에서 사용했었습니다. 아래는 WebKit과 Blink 및 모질라 재단의 FireFox 브라우저에서 사용하는 Gecko 웹 렌더링 엔진을 분석하고 차이점을 알아보겠습니다.



WebKit은 애플이 오픈소스로 개발하고 있는 웹 렌더링 엔진이고, HTML, CSS, JavaScript를 지원하도록 설계되었습니다. WebKit은 웹 애플리케이션을 개발하는 기업이 자체 개발을 해왔고, 대표적으로 Safari 브라우저, Chrome 브라우저(28 버전 이전), 안드로이드 기기용 브라우저 등에 WebKit 웹 렌더링 엔진을 사용해왔습니다. 하지만 구글은 Chrome 브라우저에서의 WebKit 지원을 중단하고, Chrome(28 버전) 부터는 WebKit을 기반으로 한 Blink라는 새로운 웹 렌더링 엔진을 적용했습니다.


WebKit과 Blink 및 FireFox 브라우저에서 사용중인 Gecko 렌더링 엔진을 살펴보고, 그 동작 구조를 확인한 후 성능을 알아보겠습니다.



웹브라우저는 선택된 자원을 서버에 요청하고 화면에 표시합니다. 자원은 주로 HTML 형식으로 이미지 또는 다른 형태일 수 있습니다. 브라우저 엔진은 웹 표준화 기구 W3C(World Wide Web Consortium)에서 정의한 HTML과 CSS 표준 명세에 따라 파일을 해석하고 브라우저에 표시하고, 브라우저의 주요 구성 요소는 아래와 같습니다.



렌더링 엔진이 HTML 문서를 Parsing하고, 내부에서 DOM(Document Object Model) 노드로 변환합니다. 그 다음 CSS 파일과 스타일 요소를 함께 Parsing, Render Tree를 생성합니다. Render Tree 생성 후에 각 노드가 화면에 표시되도록 배치를 시작하고, UI backend layer를 이용하여 배치된 노드들이 그려지게 됩니다.





WebKit 렌더링 엔진 분석


WebKit은 JavaScriptCore, WebCore, 그리고 WebKit으로 나뉘어집니다. JavaScriptCore는 프레임워크 라이브러리를 제공합니다. WebCore(WebKit Core)는 렌더링 로직, SVG 레이아웃, 네트워크 지원 등 WebKit의 핵심이 되는 기능이 구현되어 있는 중요한 레이어입니다. WebKit 레이어는 애플리케이션이 사용하는 인터페이스를 제공하는 부분이고, QT, GTK+등 GUI 플랫폼이 구현되어 있습니다. 또한, 다양한 플랫폼의 이식이 될 수 있도록 WebCore가 필요한 플랫폼 기능을 제공합니다.


WebKit2는 WebKit에서 멀티 프로세스 모델을 지원하기 위해 설계되었습니다. 웹 콘텐츠(자바스크립트, HTML, 레이아웃 등)가 애플리케이션 UI와 분리되어 동작하게 됩니다. WebKit2는 새로운 프로세스 Boundary가 API Boundary 아래에 위치합니다. WebKit의 일부는 UI Process에서 동작하고 나머지는 WebCore와 JS Engine과 같이 Web Process에서 동작합니다. Web Process와 UI Process를 분리함으로
써 보안이 강화되고 멀티코어 아키텍처에 활용할 수 있습니다.




Blink 렌더링 엔진 분석


Blink 렌더링 엔진은 WebKit에서 포킹된 렌더링 엔진입니다. Browser는 선택된 자원을 화면에 표시해주고 여러 개의 WebContents를 포함하고 있습니다. Renderer와 Render host는 Blink 렌더링 엔진의 멀티 프로세스 레이어입니다. Blink는 멀티프로세스 프레임워크를 제공하지 않고, 프로세스 관리를 하는 멀티 프로세스 애플리케이션의 한 부분으로서 사용되도록 최적화 되어 있습니다.



Gecko 렌더링 엔진 분석


Gecko 또한 렌더링 엔진의 주요 기능인 HTML, CSS, XUL, Javascript 같은 콘텐츠를 읽어 해석한 뒤 사용자의 스크린에 그려주는 역할을 합니다. Gecko 애플리케이션은 웹 콘텐츠 뿐만 아니라 XUL 기반의 애플리케이션들의 UI를 해석합니다.




렌더링 엔진 비교 분석


WebKit과 Gecko 렌더링 엔진 동작과정은 차이가 있습니다. Gecko는 시각적으로 처리되는 렌더 트리를 프레임 트리라고 부릅니다. "Attachement"는 Webkit이 렌더 트리를 구성하기 위해서 DOM 트리와 Style을 연결하는 과정이고, Gecko는 이 부분을 "Content Sink"라 부릅니다. Gecko 엔진을 사용하는 Firefox에서 프리젠테이션은 DOM 업데이트를 위한 리스너로 등록하고 "Frame Constructor"에서 프레임을 생성합니다. WebKit은 "Attachment"에서 스타일을 결정하고 렌더러를 만듭니다. WebKit은 HTML 태그와 Body 태그를 처리하고 렌더 트리를 만듭니다.




Blink 기반의 Chrome(42 버전), Webkit 기반의 Safari(8.0.6 버전), Gecko 기반의 Firefox(38 버전)입니다. 브라우저 벤치마크 peacekeeper를 사용하면, DOM operations나 Text parsing 성능등을 체크할 수 있습니다. Gecko 렌더링 엔진이 "Text parsing"에서, WebKit 렌더링 엔진이 "DOM operations"에서 각각 우수한 성능을 보였습니다.



추가적으로 JAVA 프로그래밍언어를 구동하는 것이 JVM을 포함한 JAVA 엔진이라면 브라우저내 코드들이 동작하하도록 하는것은 웹브라우저의 렌더링 엔진이라고 할 수 있습니다. 본 포스팅에서는 브라우저 엔진에 관한 간단한 정리를 해보도록 하겠습니다. 아래내용은 http://www.finebe.com/86 의 글을 참조하였습니다.



트라이던트(Trident)

트라이던트(MS HTML이라고도 합니다)는 마이크로소프트윈도우즈에 탑재되는 브라우저인 인터넷 익스플로러의 코어(속칭 IE 코어)입니다. 이 엔진은 1997년에 인터넷 익스플로러 4부터 처음으로 사용되었으며, 이후에 지속적으로 신기술이 추가되어 인터넷 익스플로러와 같이 업데이트됐습니다. 트라이던트는 실제로는 오픈 소스 코어이며, 트라이던트 엔진은 모듈 방식의 소프트웨어이기때문에 다른 소프트웨어 개발자들이 쉽게 웹 브라우저 기능을 자신이 만든 애플리케이션에 추가할 수 있습니다. 그 포트 코어 설계가 매우 안정적이라서 IE 코어를 사용하지만 인터넷 익스플로러는 아닌 브라우저(예를 들면 Maxthon, GreenBrowser, 중국의 메신저 번들 브라우저 등)가 많지만, 트라이던트는 윈도우즈 플랫폼만 지원합니다.


인터넷 익스플로러의 시장 독점은 트라이언트 코어가 오랜 시간동안 독점적인 위치를 차지할 수 있게 해주었습니다. 이것 때문에 마이크로소프트는 상당히 긴 시간 동안 트라이던트 코어의 업데이트를 하지 않았고, 그 결과 트라이던트 코어는 W3C 표준과 거의 맞지 않게 되었을 뿐만 아니라, 트라이던트 코어 내부의 대량의 버그와 보안문제가 해결되지 않고 누적되게 되었습니다. 현재 마이크로소프트는 트라이던트의 배포 엔진에 큰 변화를 주어, 새로운 기술 외에도 웹페이지 표준의 지원을 추가하기 시작했습니다. 하지만 이러한 변화는 다른 엔진-게코, 웹코어, KHTML, 프레스토 등에 비해 많이 떨어지는 편입니다.



게코(Gecko)

게코는 오픈 소스 코드이며, C++로 짜여진 웹페이지 렌더링 엔진입니다. 현재 모질라에서 제작하는 웹브라우저(파이어폭스)와, 넷스케이프 6 이후 버전에서 사용하고 있습니다. 이 소프트웨어의 원 코드는 넷스케이프에서 개발하였으며, 지금은 모질라 기금이 유지-보수를 담당하고 있습니다. 게코의 특징은 코드가 완전히 공개되어 있다는 것인데, 따라서 개발 수준이 매우 높고 전 세계의 프로그래머들이 이 코드를 사용하여 기능을 추가할 수 있습니다. 오픈 소스이기 때문에 게코 엔진을 사용하는 브라우저도 매우 많습니다. 이것은 게코 코어가 수년 동안 시장 점유율을 유지해 왔던 원인이기도 합니다.


게코 엔진은 풍부한 어플리케이션 인터페이스와 커뮤니테이션 어플리케이션을 제공하고 있습니다. 이를 사용하여 인터넷 브라우저, HTML 에디터, 클라이언트/호스트 등을 만들 수 있습니다. 비록 처음에는 넷스케이프 네비게이터와 모질라 파이어폭스 정도였지만, 현재에는 많은 프로그램들이 이 엔진을 사용하고 있습니다. 그 밖에 게코는 확장성을 지닌 코어로서 윈도우즈, BSD, 리눅스, 맥 OS X에서 사용할 수 있습니다. 게코는 트라이던트 다음으로 많이 사용되는 엔진입니다. 게코 엔진을 사용한 브라우저는 파이어폭스 넷스케이프 네비게이터 6~9, SeaMonkey, Camino, Mozilla, Flock, Galeon, K-Meleon, Sleipni, XeroBank가 있습니다. 구글 가젯 엔진도 게코 엔진을 사용한 것입니다.



프레스토(Presto)

프레스토는 오페라 소프트웨어가 개발한 렌더링 엔진으로, 현재 오페라 7~10 버전이 이 엔진을 사용하고 있습니다. 프레스토의 특징은 렌더링 속도의 최적화입니다. 프레스토는 지금 공개된 브라우저 중에서 제일 빠른 속도를 자랑하지만, 그 댓가로 호환성을 일부 희생했습니다.


프레스토는 하나의 동적인 코어입니다. 트라이던트나 게코와 제일 큰 차이는 스크립트의 처리에 있습니다. 레레스토는 선천적인 장점으로 웹페이지의 전부 혹은 일부에서 스크립트를 만나면 이에 알맞은 상황에 따라 새로운 해석을 합니다. 그 밖에도 이 코어는 자바스크립트를 실행할때 속도가 아주 빠릅니다. 동일한 조건에서 테스트를 할 경우, 프레스토는 스크립트를 실행하는데 걸리는 시간이 트라이던트와 게코 엔진의 1/3 밖에 되지 않습니다. 하지만 프레스토는 상업용 엔진이라서 프레스토를 사용하는 제품이 오페라 외에 NDS 브라우저, 노키아 770 정도밖에 없어, 프레스토의 발전을 크게 가로막고 있습니다. 오페라 위젯 엔진 역시 프레스토 엔진입니다.



웹킷(WebKit)

웹캣은 오픈 소스 웹브라우저 엔진이며, 웹킷의 시조는 KDE의 KHTML과 KJS입니다(이들은 모두 오픈 소스 코드로서 GPL 라이센스를 사용합니다). 따라서 웹킷 역시 오픈 소스입니다.


사파리 브라우저 외에도 맥의 옴니웹(OmniWeb), Shiira 등의 브라우저들이 웹페이지를 사용하고 있으며, 과거 구글의 크롬 역시 웹킷을 사용하기도 했습니다. 웹킷은 핸드폰에서 비교적 널리 사용하고 있는데, 구글 안드로이드, 애플 아이폰, 노키아 S60의 브라우저들이 전부 웹킷 엔진입니다. 또한 위젯 엔진에서도 그 사용율이 높아, 차이나 텔레콤의 BAE, 애플의 대쉬보드, 노키아 WRT가 전부 웹킷 엔진입니다.