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