4. Mobile Browser Market Share
Android
iPhone
Opera
UC Browser
Nokia
BlackBerry
NetFront
iPod Touch
Chrome
Other
28.62%
21.32%
16.1%
11.15%
7.04%
3.17%
2.28%
1.95%
4.25%
4.12%
Top9 : 95.88%
WebKit based Browsers
5. WebKit based Browsers
u Amazon Kindle
u PS3 web browser
u Arora
u RockMelt
u BOLT browser
u Safari
u Epippany browser
u SRWare Iron
u Google Chrome
u Shiira
u iCab (version >=4)
u Spuntnik for MorphOS
u Iris Browser
u Stainless
u KonQueror
u Steel for Android
u Midori
u TeaShark
u Nintendo 3DS
u Tizen Browser
u OmniWeb
u Uzbl
u Opera (version >=15)
u Web Browser for S60 (Nokia)
u OWB
u WebOS Browser
6. History of WebKit in Browser
IE
WebKit
Safari
Chrome
WebKit2
Chrome Android
Blink
~2001
2005
2007
2008
2010
2012
2013
MS World
Apple made WebKit
Apple opened WebKit
iPhone Development
Google bought Android
iPhone Opened
Google opened Chromium WebKit2 Development
Google opened Android
Chrome for Android Released
Chrome Market Share 1st
Google forks WebKit
with Blink
If you can conquer the web browser, you can conquer the world.
7. WebKit and Blink in 2013
l Google announced on April 3rd that they would be forking WebKit with new Blink
Motivations according to Google:
ü They were not using WebKit2 anyway
ü Simplification of the codebase in Blink
l After forking WebKit with Blink
ü Google removes the concept of ‘port’ as it was defined in WebKit
ü Apple removes the chromium port in WebKit
ü Opera joined WebKit then moved to Blink.
ü New proposal Nix port in WebKit
ü Qt recently announced that they are moving to Blink
à Other companies and communites thinking what to do.
à WebKit developers porting patches from/to Blink/WebKit
9. Browser at a High Level
Data Persistence
UI
Code Coverage
5%
Browser Engine
Rendering Engine
WebKit 95%
Network I
/O
JavaScript
Engine
Graphics S
tack
10. Major Component of WebKit
API Layer
WebKit and WebKit2
(Embedding API)
Bindings
(JavaScript API)
WebCore
(HTML, CSS, DOM, etc)
Platform
(Network, Storage, Graphics)
JavaScriptCore
(JavaScript Engine)
WTF
(Data structures, Threading primitives)
14. Rendering : Render Style Tree
Parsing
HTML
Rendering
HTML
Parser
Layout
DOM
Tree
Render
Tree
attach()
CSS Style Sh
eet
CSS
p.div{
margin-top:3px;
}
.error{
color:red;
}
Painting
Painting
Style
Rule
CSS
Parser
Class RenderStyle {
RenderStyle(RenderStyle parent);
CSSStyleSheet
CSSRule
Selectors
p
Display
div
Declaration
margin-to
p
Color color();
void setColor(Color);
IntRect initialColor();
CSSRule
3px
Selectors
.error
Render Style Tree
Length marginTop();
…
void setUserSelect();
…
DataRef<InheritedData> Inherited;
Declaration
color
red
}
16. Painting : SW and HW Rendering
l S/W Rendering Path
CPU Graphic Buff
er
CPU Graphic Buff
er
l H/W Accelerated Rendering Path
Layering
Compositing
17. Painting : Tiled Backing Store
Tile is a rectangle with a texture in Checkboard pattern.
Backing Store is off-screen buffer
The effect of using Tiled Backing Store is
Progressive Rendering :
- Pan/Scroll
- Zoom in/out
Each Tile is a texture for GPU Core
Check Di
rty Tiles
Update T
ile Buffer
Paint Tile
s
28. Chromium powered WebView란?
“Open Source Browser Engine인 Chromium 엔진기반의 API Suites로,
기존 Android WebView와 1:1 호환성을 가진 새로운 렌더링 엔진.”
public final class WebViewFactory {
WebViewFactory.java in AOSP
public static final String WEBVIEW_EXPERIMENTAL_PROPERTY = "persist.sys.webview.exp";
private static final String DEPRECATED_CHROMIUM_PROPERTY = "webview.use_chromium";
// Default Provider factory class name.
// TODO: When the Chromium powered WebView is ready, it should be the default factory class.
private static final String DEFAULT_WEBVIEW_FACTORY = "android.webkit.WebViewClassic$Factory";
private static final String CHROMIUM_WEBVIEW_FACTORY =
"com.android.webview.chromium.WebViewChromiumFactoryProvider";
private static final String CHROMIUM_WEBVIEW_JAR = "/system/framework/webviewchromium.jar";
/**
AwContents.java in chromium
* Exposes the native AwContents class, and together these classes wrap the ContentViewCore
* and Browser components that are required to implement Android WebView API. This is the
* primary entry point for the WebViewProvider implementation; it holds a 1:1 object
* relationship with application WebView instances.
*/
@JNINamespace("android_webview")
public class AwContents {
29. Chromium 이란?
Google Chrome
Chromium
Logo
Colorful
Blue
Crash reporting
Yes, if you turn it on
None
User metrics
Yes, if you turn it on
No
Video and audio tags
AAC, MP3, Vorbis and Theora
Vorbis and Theora by default
Adobe Flash
custom (non-free) plugin inclu
ded in release
supports NPAPI plugins, includi
ng the one from Adobe
PDF support
custom (non-free) plugin inclu
ded in release
downloads and displays with s
ystem PDF viewer
Code
Tested by Chrome developers
May be modified by distributio
ns
Sandbox
Always on
Depending on the distribution
Quality Assurance
New releases are tested before
sending to users
Depending on the distribution
31. Chromium powered WebView의 특징
AOSP WebView
Chromium WebView
Chromium V
ersion
WebKit r.84325
(Chromium 12.0.74
2)
Latest Chromium
(Chromium 31.0.1650.
11)
HTML5
298
414
CSS3
45%
77%
DevTool
X
O
Process
single-process
single-process
Threads
4
12
Comments
Android ICS부터 Update 없음.
http://html5test.com
http://css3test.com
PC와 동일한 디버깅 환경 제공
multi-process로 switch 가능한 구조
I/O Thread, Compositor Thread,
GPU Process Thread, etc…
* Galaxy Nexus 기준
32. Chromium powered WebView의 새로운 기능들…
Chromium Feature Dashboard: http://www.chromestatus.com/features
<Remote Web Inspector>
<HTML5 WebRTC>
<HTML5 WebAudio API>
34. Chromium powered WebView의 구조
Android Apps
Chromium pow
ered WebView
Chromium
Test Shell
Chrome
Browser
Browser
Components
( autocomple, autofill, bookmark, devtools,
download, favicon, history, omibox … )
Blink
Chromium
Content API
Content
(Multi-process-impl)
Blink(WebKit)
35. Why multi-process architecture?
기존 브라우저의 문제점
• 현재(크롬 제작 당시)의 브라우저는 과거의 OS와 비슷한 구조
• 과거의 OS는 단일 사용자, 어떤 어플리케이션의 문제는 OS 전체의 안정성에 영향을 미침
• 단일 프로세스 모델의 브라우저에서는 한 페이지의 문제가 브라우저 전체에 문제를 일으킴
문제해결을 위한 접근
• 절대적으로 안정적인 렌더링 엔진을 만드는 것은 거의 불가능함
• 최근의 OS는 각 어플리케이션을 고립시킴으로써 특정 어플리케이션의 문제가 시스템 전체의 안정성에 영
향을 미치지 않도록 하며, 사용자 각자의 데이터를 보호하고 있음
36. Multi Process Architecture
Browser Process와
Renderer Process의 연결 구조
Renderer Process의 각 View
역시 Browser Process에
연결 고리를 가짐
각 프로세스별로 입출력
을 위한 스레드가
별도로 존재
Renderer Process에 WebKi
t 렌더링 엔진 존재
37. Inter-process communication (IPC)
Browser Process IPC
• Browser Process 내에서 별도의 I/O Thread가 IPC를 담당하게 됨
• Main Thread와의 메시지 교환은 IPC::ChannelProxy를 통해 이루어짐
• I/O Thread를 사용하는 이유는 성능상 영향을 많이 주는 네트워크 처리 요구 메시지 등을 전담하여 처리
함으로써 사용자 인터페이스에 영향을 주지 않도록 하기 위함
• I/O Thread 내부에서 처리할 메시지를 걸러내기 위해 ChannelProxy::MessageFilter 사용
Renderer Process IPC
• Renderer Process 내에서 별도의 I/O Thread가 IPC를 담당하게 됨
• 웹 페이지 렌더링을 비롯한 기타 작업은 Render Thread (Main Thread)에서 이루어짐
• 스레드를 분리함으로써 브라우저로의 동기적인 메시지 송수신이 가능
38. Multi Process Architecture in detail
Browser Process
IPC
RenderWidgetHost
RenderViewHost
Manager
WebContents
SiteInstance
RenderViewHost
RenderProcessHost
RenderWidgetHost
RenderViewHost
2
1
WebContents
SiteInstance
RenderProcessHost
RenderWidgetHost
RenderViewHost
Manager
RenderViewHost
Main Thread
RenderMainThread
(Single Process Mode)
Process Launcher
Thread
File Thread
Cache Thread
DB Thread
UI Thread
Renderer Process
Renderer Process
Main Thread
RenderWidget
WebKit
RenderWidget
I/O
Thread
RenderView
6
Main Thread
4
5
IO Thread
RenderWidget
RenderView
RenderView
WebKit
WebKit
I/O
Thread
3
39. Multi-process resource loading
• Renderer Process는 독립적인 I/O Thread를 통해 Browser Process에 접근.
• Browser Process의 I/O Thread에서 ResourceMessageFilter로 요청을 Intercept.
• Network Stack이 Browser Process에 Embedded된 구조의 특징
à Socket pool and connection limits, Socket reuse, Socket late-binding, Consistent se
ssion state, Global resource and network optimizations, Predictive optimizations
40. GPU Process
• GPU Process의 구조적 특징: Security, Robustness, Uniformity, Parallelism
• Client(Render Process): GL Command를 생성, Ring Buffer에 Insert
à 일반적인 페이지의 경우 Texture Upload용으로 사용, HTML5 Canva/WebGL은 직접 GL Command를 사용
• Server(GPU Process): Command를 fetch, execution.
• GL command는 GL ES 2.0 API와 거의 유사한 Async command
GL command example
OP(BindBuffer)
OP(BindFramebuffer)
OP(BindRenderbuffer)
OP(BindTexture)
/* 261 */
/* 262 */
/* 263 */
/* 264 */
