48
Mobile Browser Internals and Trends 김준걸 TL / 웹킷코어연구lab 이형욱 TL / 웹브라우저기술lab NAVER LABS

Deview 2013 mobile browser internals and trends_20131022

Embed Size (px)

Citation preview

Page 1: Deview 2013 mobile browser internals and trends_20131022

Mobile Browser Internals and Trends

김준걸 TL / 웹킷코어연구lab 이형욱 TL / 웹브라우저기술lab NAVER LABS

Page 2: Deview 2013 mobile browser internals and trends_20131022

CONTENTS

0. 2013 Briefing

1. Browser Internals

2. Android WebView Internals and Trend

3. Chromium (Blink)

4. WebKit2 Vs Chromium and Firefox

Page 3: Deview 2013 mobile browser internals and trends_20131022

0. 2013 Briefing

Page 4: Deview 2013 mobile browser internals and trends_20131022

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%

Page 5: Deview 2013 mobile browser internals and trends_20131022

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

Page 6: Deview 2013 mobile browser internals and trends_20131022

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.

Page 7: Deview 2013 mobile browser internals and trends_20131022

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

Page 8: Deview 2013 mobile browser internals and trends_20131022

1. Browser Internals

Page 9: Deview 2013 mobile browser internals and trends_20131022

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

Page 10: Deview 2013 mobile browser internals and trends_20131022

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

Page 11: Deview 2013 mobile browser internals and trends_20131022

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

Page 12: Deview 2013 mobile browser internals and trends_20131022

<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

Page 13: Deview 2013 mobile browser internals and trends_20131022

<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

Page 14: Deview 2013 mobile browser internals and trends_20131022

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

Page 15: Deview 2013 mobile browser internals and trends_20131022

Rendering : Dump Render Tree (DRT)

Page 16: Deview 2013 mobile browser internals and trends_20131022

Painting : SW and HW Rendering

l  S/W Rendering Path

l  H/W Accelerated Rendering Path

CPU Graphic Buffer

CPU Graphic Buffer

Layering Compositing

Page 17: Deview 2013 mobile browser internals and trends_20131022

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

Page 18: Deview 2013 mobile browser internals and trends_20131022

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

Page 19: Deview 2013 mobile browser internals and trends_20131022

<https://www.ohloh.net/p/WebKit/analyses>

WebKit Source Code in numbers

Page 20: Deview 2013 mobile browser internals and trends_20131022

2. Android WebView Internals and Trend

Page 21: Deview 2013 mobile browser internals and trends_20131022

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

Page 22: Deview 2013 mobile browser internals and trends_20131022

22

new class

android class

inner class create

Jelly-Bean’s WebView Framework

Page 23: Deview 2013 mobile browser internals and trends_20131022

23

Classic ???

WebView WebViewClassic

CookieManager CookieManagerClassic

GeolocationPermission GeolocationPermissionClassic

ICS Jelly-bean

Page 24: Deview 2013 mobile browser internals and trends_20131022

New WebView

new class in JB

WebViewProvider

WebViewClassic

Chromium powered WebView

WebView WebViewFactory

Page 25: Deview 2013 mobile browser internals and trends_20131022

25

new class

Chromium class

inner class create

AwGeolocationPermissions AwCookieManager

AwContents

AwContentsClient

Chromium powered WebView

Page 26: Deview 2013 mobile browser internals and trends_20131022

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

Page 27: Deview 2013 mobile browser internals and trends_20131022

3. Chromium (Blink)

Page 28: Deview 2013 mobile browser internals and trends_20131022

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

Page 29: Deview 2013 mobile browser internals and trends_20131022

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

Page 30: Deview 2013 mobile browser internals and trends_20131022

Chromium을 누가 사용하나?

Page 31: Deview 2013 mobile browser internals and trends_20131022

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 기준

Page 32: Deview 2013 mobile browser internals and trends_20131022

Chromium powered WebView의 새로운 기능들…

<HTML5 WebRTC>

<HTML5 WebAudio API>

<Remote Web Inspector>

Chromium Feature Dashboard: http://www.chromestatus.com/features

Page 33: Deview 2013 mobile browser internals and trends_20131022

Chromium powered WebView Status

< Peter Beverloo >

Page 34: Deview 2013 mobile browser internals and trends_20131022

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

Page 35: Deview 2013 mobile browser internals and trends_20131022

Why multi-process architecture?

기존 브라우저의 문제점

•  현재(크롬 제작 당시)의 브라우저는 과거의 OS와 비슷한 구조

•  과거의 OS는 단일 사용자, 어떤 어플리케이션의 문제는 OS 전체의 안정성에 영향을 미침

•  단일 프로세스 모델의 브라우저에서는 한 페이지의 문제가 브라우저 전체에 문제를 일으킴

문제해결을 위한 접근

•  절대적으로 안정적인 렌더링 엔진을 만드는 것은 거의 불가능함

•  최근의 OS는 각 어플리케이션을 고립시킴으로써 특정 어플리케이션의 문제가 시스템 전체의 안정성에 영

향을 미치지 않도록 하며, 사용자 각자의 데이터를 보호하고 있음

Page 36: Deview 2013 mobile browser internals and trends_20131022

Multi Process Architecture

각 프로세스별로 입출력을 위한 스레드가 별도로 존재

Browser Process와 Renderer Process의 연결 구조

Renderer Process의 각 View 역시 Browser Process에 연결 고리를 가짐

Renderer Process에 WebKit 렌더링 엔진 존재

Page 37: Deview 2013 mobile browser internals and trends_20131022

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)에서 이루어짐

•  스레드를 분리함으로써 브라우저로의 동기적인 메시지 송수신이 가능

Page 38: Deview 2013 mobile browser internals and trends_20131022

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

Page 39: Deview 2013 mobile browser internals and trends_20131022

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

Page 40: Deview 2013 mobile browser internals and trends_20131022

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 */

Page 41: Deview 2013 mobile browser internals and trends_20131022

4. WebKit2 vs Chromium and Firefox

Page 42: Deview 2013 mobile browser internals and trends_20131022

Webkit Webkit2 Chromium

WebKit vs WebKit2 vs Chromium

Page 43: Deview 2013 mobile browser internals and trends_20131022

Chromium

Page 44: Deview 2013 mobile browser internals and trends_20131022

WebKit2

Page 45: Deview 2013 mobile browser internals and trends_20131022

Firefox

Page 46: Deview 2013 mobile browser internals and trends_20131022

C++ IR Link

JS WebGL

EMScripten LLVM Clang

asm.js

Firefox : asm.js

Page 47: Deview 2013 mobile browser internals and trends_20131022

Q&A

Page 48: Deview 2013 mobile browser internals and trends_20131022

THANK YOU