webkit/efl & webkit2/efl

25
WebKit/EFL & WebKit2/EFL Ming Jin, Samsung Electronics (May 9, 2012)

Upload: others

Post on 12-Sep-2021

33 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: WebKit/EFL & WebKit2/EFL

WebKit/EFL & WebKit2/EFL

Ming Jin, Samsung Electronics

(May 9, 2012)

Page 2: WebKit/EFL & WebKit2/EFL

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.

Page 3: WebKit/EFL & WebKit2/EFL

tizen.org 3

Web Applications on Tizen Platform

Interaction

Device Resources

Networking

Page 4: WebKit/EFL & WebKit2/EFL

tizen.org 4

What Really Matters

Functionality Performance

① HTML5 / W3C Specs ② UI Responsiveness

③ 2D/3D Graphics

④ JavaScript Engine

Standard Compliance

Page 5: WebKit/EFL & WebKit2/EFL

tizen.org 5

HTML5 Support Status 1

WebKit WebKit2

Page 6: WebKit/EFL & WebKit2/EFL

tizen.org 6

UI Responsiveness 2

WebKit

WebKit2

WebKit

WebKit2

Scroll

Performance

Touch

Response

Page 7: WebKit/EFL & WebKit2/EFL

tizen.org 7

2D/3D Graphics 3

Cairo /

GLES

Cairo / Pixman CanvasPerf

Benchmark Score

Cairo /

GLES

Page 8: WebKit/EFL & WebKit2/EFL

tizen.org 8

JavaScript Engine 4

WebKit WebKit2

Sunspider

Benchmark

Page 9: WebKit/EFL & WebKit2/EFL

WebKit/EFL

Page 10: WebKit/EFL & WebKit2/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

Page 11: WebKit/EFL & WebKit2/EFL

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

Page 12: WebKit/EFL & WebKit2/EFL

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

Page 13: WebKit/EFL & WebKit2/EFL

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

Page 14: WebKit/EFL & WebKit2/EFL

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

Page 15: WebKit/EFL & WebKit2/EFL

tizen.org 15

Accelerated Composition

• When contents property is changed dynamically – Change position, rotation & size of the layer

– Execute compositing only No repainting

3

Page 16: WebKit/EFL & WebKit2/EFL

tizen.org 16

2D/3D Graphics 3

Cairo

Open GLES

backend

Open GLES

Pixman

backend

Pixman

WebKit

Graphics Port

Page 17: WebKit/EFL & WebKit2/EFL

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

Page 18: WebKit/EFL & WebKit2/EFL

WebKit2/EFL

Page 19: WebKit/EFL & 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

Page 20: WebKit/EFL & WebKit2/EFL

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

Page 21: WebKit/EFL & WebKit2/EFL

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

Page 22: WebKit/EFL & WebKit2/EFL

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

Page 23: WebKit/EFL & WebKit2/EFL

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

Page 24: WebKit/EFL & WebKit2/EFL

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

Page 25: WebKit/EFL & WebKit2/EFL

Thank You.