WebKit/EFL & WebKit2/EFL
Ming Jin, Samsung Electronics
(May 9, 2012) Contents
• What Really Matters – Standards, Functionality, Performance
• WebKit/EFL Internals – HTML5, UI Responsiveness, 2D/3D Graphics, etc.
• WebKit2/EFL Internals – Accelerated Composition, Rendering Flow, etc.
2 tizen.org Web Applications on Tizen Platform
Networking Interaction
Device Resources
3 tizen.org What Really Matters
Functionality Performance
① HTML5 / W3C Specs ② UI Responsiveness
③ 2D/3D Graphics
④ JavaScript Engine
Standard Compliance
4 tizen.org 1 HTML5 Support Status
WebKit WebKit2
5 tizen.org 2 UI Responsiveness
Scroll Touch Performance Response
WebKit2
WebKit
WebKit
WebKit2
6 tizen.org 3 2D/3D Graphics
Cairo / GLES
Cairo / GLES
Cairo / Pixman CanvasPerf Benchmark Score
7 tizen.org 4 JavaScript Engine
WebKit WebKit2
Sunspider Benchmark
8 tizen.org WebKit/EFL Overall Architecture & Focus
Browser Web Runtime Web UI Framework
HTML5 HTML5 Tizen Web API jQuery Mobile
WebView WebKit API WebCoreSupport
JavaScript 4 WebCore Core (SFX) 1 3 BackingStore 2 Platform Port Platform Port Graphics Port Network Port
Tizen Native Platform
FWs UI FW OpenGL Multimedia FW Messaging FW System FW … EFL Cairo X11 ES
Linux Kernel
10 tizen.org 1 HTML5 Implementation
File Reader API Browser WebView WebCore
File API Loader JS JS Core Engine (SFX) Binder Network
Plaform Port File port POSIX Qt Mac Win
Web Socket Web GL Geolocation API Web Worker File System Vibration …
11 tizen.org Rendering Flow Overview
Browser
URL Bar WebView WebKit API WebCoreSupport
JavaScript WebCore Tool Bar Core (SFX)
Backing-store Platform Port Graphics Port Network Port
UI FW Cairo libsoup Evas
X Server
OpenGL ES / EGL
Texture URL Bar Frame Evas Window Buffer Buffer Browser Indicator Tool Bar
12 tizen.org 2 Backing-store: Rendering Flow
Browser title bar WebView
BackingStore GraphicsContext tool bar
Cairo Evas
X Server Compositor
GLES / EGL
evas canvas(output) window buffer frame buffer
Texture for title bar indicator Texture for tool bar Textures for evas objects in BackingStore browser
13 tizen.org 2 Backing-store: Panning • No update is called when the tiles around the viewport have already been rendered 0,0 0,1 0,2 0,3
Scroll by (-10,-10) 1,0 1,1 1,2 1,3
2,0 2,1 2,2 2,3
Add tiles to be displayed in viewport 3,0 3,1 3,2 3,3 as scrolling tiles
Move (x,y) of each scrolling tile by scroll distance (-10, -10) : Scroll by (-10, -10) 0,0 0,1 0,2 0,3 0,1 0,2 0,3 evas_object_move() 1,1 1,2 1,3 1,0 1,1 1,2 1,3 2,1 2,2 2,3 Update evas 2,0 2,1 2,2 2,3 3,1 3,2 3,3 3,0 3,1 3,2 3,3
Tiles to be displayed in viewport
14 tizen.org 3 Accelerated Composition
• When contents property is changed dynamically – Change position, rotation & size of the layer – Execute compositing only No repainting
15 tizen.org 3 2D/3D Graphics
WebKit
Graphics Port
Cairo Pixman Open GLES backend backend
Pixman Open GLES
16 tizen.org 4 DFG JIT
Compile Running Time Compile Time Running Time Base JITC : Time DFG JITC :
Conduct Base JITC Invoke DFG JITC when Hot Higher quality codes at the beginning spots are identified
Compile Run Compile Run Run Run Recompile Run Run Foo() Foo() Goo() Goo() Foo() Foo() Foo() Foo() Foo() …… Sequence Now On The Roadmap JavaScriptCore
Executable JSParser bytecode generator
Base JIT
17 tizen.org WebKit2/EFL WebKit vs. WebKit2
WebKit WebKit2 Process model Single Process Multi Process API type Blocking API Non-blocking API
WebKit WebKit2 UI Process UI Process Application Application API API WebKit WebKit (UI Process)
IPC Function call WebKit (Web Process)
WebCore WebCore
Process Boundary JS Engine JS Engine Web Process
19 tizen.org WebKit2/EFL Based Browser Architecture
Browser WebKit2-WebProcess
WebKit2-UIProcess WebPage WebCoreSupport
JavaScript WebCore
CoreIPC
Core
(SFX)
CoreIPC Evas Object DrawingArea Platform Port Network Graphics Port Port
libsoup UI FW Evas UI FW Cairo
X Server
OpenGL ES / EGL
Title Bar Evas Canvas Tool Bar Window Buffer Frame Buffer WebView Browser Indicator
20 tizen.org Job Distribution across Processes
1 2 3 4 5 6 Resource Loading Parsing Layout JS Execution Painting UI Update
Browser WebKit2-WebProcess
Title Bar UIProcess WebPage WebCoreSupport
JavaScript WebCore
6 CoreIPC 4 2 1 Core 3
Tool Bar UI Update JS Execution(SFX) Layout Parsing Resource Loading CoreIPC 5 Evas Object DrawingArea Painting Platform Port Network Graphics Port Port
Benefit Sensitive touch response in UIProcess Frequent display update in UIProcess: 2-stage pipeline of ①~⑤ and ⑥
21 tizen.org 2 WebKit2 Tiled Accelerated Composition
Web Graphics Layer
Graphics Layer Tree GL4 root
GL1 GL3
GL2 GL3 GL4
GL2
GL1
GraphicsLayer Non-compositing Layer Area Tile
22 tizen.org 2 WebKit2 Tiled AC: Rendering Flow
Browser WebProcess UIProcess
WebPage
Java CoreIPC Proxy WebCore Script Evas sync DrawingArea Core
Object DrawingArea
Proxy CoreIPC Tiled BackingStore Platform Port
Shared Memory
UI FW Cairo X Server Evas
OpenGL ES / EGL
Backing Store Window Buffer Browser Frame css3-polaroids
www.css3-polaroids css3-polaroids Evas www.css3-polaroids Buffer Title Bar Indicator URL Bar Tool Bar 23 tizen.org 2 Painting Thread
WebProcess WebProcess main thread paint thread UIProcess
5-1 5-2 6 Recording Replaying UI Update Painting Operations Painting Operations
Recording Backing Store Surfaces
Cairo Recording Surface Painting Thread Separation Even Faster Painting Operation Cost: Recording << Replaying < Painting
24 tizen.org Thank You.