Post on 06-May-2015
Mobile Browser Internals and Trends
김준걸 TL / 웹킷코어연구lab 이형욱 TL / 웹브라우저기술lab NAVER LABS
CONTENTS
0. 2013 Briefing
1. Browser Internals
2. Android WebView Internals and Trend
3. Chromium (Blink)
4. WebKit2 Vs Chromium and Firefox
0. 2013 Briefing
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%
WebKit based Browsers Top9 : 95.88%
WebKit based Browsers
u Amazon Kindle
u Arora
u BOLT browser
u Epippany browser
u Google Chrome
u iCab (version >=4) u Iris Browser
u KonQueror u Midori
u Nintendo 3DS
u OmniWeb
u Opera (version >=15)
u OWB
u PS3 web browser
u RockMelt
u Safari u SRWare Iron
u Shiira
u Spuntnik for MorphOS
u Stainless
u Steel for Android u TeaShark
u Tizen Browser
u Uzbl u Web Browser for S60 (Nokia)
u WebOS Browser
History of WebKit in Browser
IE WebKit Chrome Chrome Android Blink WebKit2
~2001 2005 2008 2010 2012 2013 MS World Apple made WebKit
Apple opened WebKit iPhone Development Google bought Android
Google opened Chromium Google opened Android
Safari
2007 iPhone Opened WebKit2 Development 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.
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
WebKit is not a browser, a science project, or the solution to every problem
1. Browser Internals
Code C
overage
5%
95%
Browser at a High Level
UI
Browser Engine
Rendering Engine
Network I/O
JavaScript Engine
Graphics Stack
Data Persistence
WebKit
Major Component of WebKit
WebCore (HTML, CSS, DOM, etc)
Platform (Network, Storage, Graphics)
JavaScriptCore (JavaScript Engine)
WTF (Data structures, Threading primitives)
Bindings (JavaScript API)
WebKit and WebKit2 (Embedding API)
API Layer
Rendering
DOM Node
DOM Node
DOM Node
DOM Node
DOM Node
DOM Node
Render Object
Render Object
Render Object
Render Object
Render Object
Render Object
Render Layer
Render Layer
Render Layer
Render Layer
HTML
CSS Style Sheet
HTML Parser
CSS Parser
DOM Tree
Style Rule
attach() Render Tree
Layout
Painting Display
Parsing Rendering Painting
DOM Tree Render Tree
Loading
<html> <head> <title>Hello, Deview!</title> <style>…</style> </head> <body> <div class=‘layer’> <nobr> <span> <a href=http://a.com>News</a> </span> </nobr> </div> </body> </html>
RenderView
RenderBlock
RenderBlock
RenderBlock
RenderInline
RenderInline
RenderText
RenderInline
DOM Tree Render Tree
1. Element 생성 2. addChild()
3. isRenderable? Yes
4. RenderBlock 생성
5. setRenderer
isRenderable? No
HTMLDocument
HTMLHtmlElement
HTMLHeadElement
HTMLTitleElement
HTMLStyleElement
HTMLBodyElement
HTMLDivElement
HTMLElement
HTMLElement
HTMLAnchorElement
Text
Rendering : DOM Tree and Render Tree
<html> <head> <title>Hello, Deview!</title> <style>…..</style> </head> <body> <div class=‘layer_example’> <nobr> <span> <a href=http://a.com>News</a> </span> </nobr> </div> </body> </html>
RenderView
RenderBlock
RenderBlock
RenderBlock
RenderInline
RenderInline
RenderText
RenderInline
Rendering : Render Layer Tree
RenderRootLayer
RenderLayer
CSS file .layer_example{ …. -webkit-transform: translate3d(0,0,0);}
Render Layer Tree
Conditions
- Transparency, Masking
- Z-ordering
- Overflow clip
- Reflections, Shadows, Transforms
- Positioned content
- <canvas>, <video>
GraphicsLayer
Graphics Layer Tree
requiresLayer()
Z-ordering
Rendering : Render Style Tree
CSS p.div{ margin-top:3px; } .error{ color:red; }
CSSStyleSheet
CSSRule CSSRule
Selectors Declaration Selectors Declaration
p div margin-top
3px .error color red
HTML
CSS Style Sheet
HTML Parser
CSS Parser
DOM Tree
Style Rule
attach() Render Tree
Layout
Painting Display
Parsing Rendering Painting
Class RenderStyle { RenderStyle(RenderStyle parent); Color color(); void setColor(Color); IntRect initialColor(); Length marginTop(); … void setUserSelect(); … DataRef<InheritedData> Inherited; }
Render Style Tree
Rendering : Dump Render Tree (DRT)
Painting : SW and HW Rendering
l S/W Rendering Path
l H/W Accelerated Rendering Path
CPU Graphic Buffer
CPU Graphic Buffer
Layering Compositing
Painting : Tiled Backing Store
Check Dirty Tiles
Update Tile Buffer
Paint Tiles
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
WebView::loadUrl
Page
Frame Docuement
Frame Loader
Docuement Loader
MainResource Loader
ResourceHandle
CachedResource Loader
Cache
CachedResource
SubResource Loader
Platform’s Network Stack LoadListener
WebView Worker
Cache Manager
WebView Database
WebViewCache.db
FrameView
RenderLayer
RenderView
RenderObject
layout()
layout()
Save/Remove Cache
Load Image, JS, CSS files Load Html file
Create/load
If Not cached, create If cached, setDocument
addData()
paintContents()
paintLayer()
paint()
Create/Remove Cache
Save/Load/Remove Cache
20,000~50,000 Calls
<https://www.ohloh.net/p/WebKit/analyses>
WebKit Source Code in numbers
2. Android WebView Internals and Trend
Android WebKit
WebCore (HTML, CSS, DOM, etc)
Platform (Network, Storage, Graphics)
JavaScriptCore (JavaScript Engine)
WTF (Data structures, Threading primitives)
Bindings (JavaScript API)
WebKit and WebKit2 (Embedding API)
API Layer
JNI (Java/C++)
WebView Framework Java Layer
Chromium Network Stack
V8 Skia
Platform Layer
talk this
22
new class
android class
inner class create
Jelly-Bean’s WebView Framework
23
Classic ???
WebView WebViewClassic
CookieManager CookieManagerClassic
GeolocationPermission GeolocationPermissionClassic
ICS Jelly-bean
New WebView
new class in JB
WebViewProvider
WebViewClassic
Chromium powered WebView
WebView WebViewFactory
25
new class
Chromium class
inner class create
AwGeolocationPermissions AwCookieManager
AwContents
AwContentsClient
Chromium powered WebView
26
Android Chromium의 Process 생성 특징
- Device의 CPU Feature/Core수 및 Memory Class를
체크하여 Renderer Process를 동적으로 할당 à 하지만 Chromium powered WebView는 1-Process로 동작할 가능성 有
ContentView
normalizeMaxRenderProcess() Max((Memory class-8)/8,1)
Memory Class Baseline : 16 à 1-Process 24 à 2-Process
SandboxedProcessLauncher
SandboxedProcessConnection
SandboxedProcess Service0
Bind Service
CPU Feature/Core 수 체크
SandboxedProcess Service1
SandboxedProcess Service5
AndroidBrowserProcess
…
Chromium powered WebView
3. Chromium (Blink)
Chromium powered WebView란?
“Open Source Browser Engine인 Chromium 엔진기반의 API Suites로,기존 Android WebView와 1:1 호환성을 가진 새로운 렌더링 엔진.”
public final class WebViewFactory {
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";
/**
* 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 {
WebViewFactory.java in AOSP
AwContents.java in chromium
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 included in release
supports NPAPI plugins, including the one from Adobe
PDF support custom (non-free) plugin included in release
downloads and displays with system PDF viewer
Code Tested by Chrome developers May be modified by distributions
Sandbox Always on Depending on the distribution
Quality Assurance New releases are tested before sending to users Depending on the distribution
Chromium을 누가 사용하나?
Chromium powered WebView의 특징
AOSP WebView Chromium WebView Comments
Chromium Version
WebKit r.84325 (Chromium 12.0.74
2)
Latest Chromium (Chromium 31.0.1650.
11) Android ICS부터 Update 없음.
HTML5 298 414 http://html5test.com
CSS3 45% 77% http://css3test.com
DevTool X O PC와 동일한 디버깅 환경 제공
Process single-process single-process multi-process로 switch 가능한 구조
Threads 4 12 I/O Thread, Compositor Thread, GPU Process Thread, etc…
* Galaxy Nexus 기준
Chromium powered WebView의 새로운 기능들…
<HTML5 WebRTC>
<HTML5 WebAudio API>
<Remote Web Inspector>
Chromium Feature Dashboard: http://www.chromestatus.com/features
Chromium powered WebView Status
< Peter Beverloo >
Chromium powered WebView의 구조
Blink(WebKit)
Content (Multi-process-impl)
Content API
Android Apps Chromium Test Shell
Chrome Browser
Browser Components
( autocomple, autofill, bookmark, devtools, download, favicon, history, omibox … )
Blink
Chromium
Chromium powered WebView
Why multi-process architecture?
기존 브라우저의 문제점
• 현재(크롬 제작 당시)의 브라우저는 과거의 OS와 비슷한 구조
• 과거의 OS는 단일 사용자, 어떤 어플리케이션의 문제는 OS 전체의 안정성에 영향을 미침
• 단일 프로세스 모델의 브라우저에서는 한 페이지의 문제가 브라우저 전체에 문제를 일으킴
문제해결을 위한 접근
• 절대적으로 안정적인 렌더링 엔진을 만드는 것은 거의 불가능함
• 최근의 OS는 각 어플리케이션을 고립시킴으로써 특정 어플리케이션의 문제가 시스템 전체의 안정성에 영
향을 미치지 않도록 하며, 사용자 각자의 데이터를 보호하고 있음
Multi Process Architecture
각 프로세스별로 입출력을 위한 스레드가 별도로 존재
Browser Process와 Renderer Process의 연결 구조
Renderer Process의 각 View 역시 Browser Process에 연결 고리를 가짐
Renderer Process에 WebKit 렌더링 엔진 존재
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)에서 이루어짐
• 스레드를 분리함으로써 브라우저로의 동기적인 메시지 송수신이 가능
Multi Process Architecture in detail
Renderer Process
Process Launcher Thread
Cache Thread File Thread DB Thread UI Thread IO Thread
I/O Thread
Browser Process
Main Thread
Renderer Process
IPC
RenderView
RenderWidget
WebKit
RenderView
RenderWidget RenderWidget
WebKit WebKit
RenderView
WebContents RenderViewHost Manager
RenderViewHost
RenderWidgetHost
RenderViewHost
RenderWidgetHost
RenderViewHost
RenderWidgetHost
SiteInstance RenderProcessHost
SiteInstance RenderProcessHost
I/O Thread
Main Thread Main Thread
WebContents RenderViewHost Manager
RenderMainThread (Single Process Mode)
1
2
3
45
6
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
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) /* 261 */ OP(BindFramebuffer) /* 262 */ OP(BindRenderbuffer) /* 263 */ OP(BindTexture) /* 264 */
4. WebKit2 vs Chromium and Firefox
Webkit Webkit2 Chromium
WebKit vs WebKit2 vs Chromium
Chromium
WebKit2
Firefox
C++ IR Link
JS WebGL
EMScripten LLVM Clang
asm.js
Firefox : asm.js
Q&A
THANK YOU