Performance Optimization of Tizen WebKitdownload.tizen.org/misc/media/conference2013/... ·...
Transcript of Performance Optimization of Tizen WebKitdownload.tizen.org/misc/media/conference2013/... ·...
Performance Optimization of Tizen WebKit
: Memory and Graphics
Seojin Kim Samsung Electronics
2
• Introduction • Rendering Architecture • Performance Optimization • Memory Optimization • Conclusions
Contents
3
Introduction
Render Tree
Render Layer Tree
…
Graphics Layer Tree
Backing Store Evas html, css,
image, js, …
Resource Loading Painting Drawing
(Compositing)
Layout
JS Execution
Parsing
legend
write read
4
Overall Rendering Architecture
• WebKit2-EFL • UIProcess and WebProcess
• Coordinated graphics architecture • WebProcess painting to tile back buffer • UIProcess compositing tiles into display
• Benefits • User responsiveness: nothing blocks UIProcess from processing user event
Performance
6
Basic Rendering Flow Browser
WebView - UIProcess
WebProcess
Java Script Core
Co
reIP
C
WebCore Title Bar
Evas Object
Evas Object
Co
reIPC
UI FW Evas Window Compositor
OpenGL ES / EGL
Cairo
GPU Memory Window Buffer Evas Frame Buffer
Browser
Indicator
URL Bar Evas
Object
Tool Bar Evas
Object
Tool Bar
Title Bar
URL Bar
Backing Store: Tile/Layer Surfaces
TextureMapper
www.css3-polaroids
css3-polaroids
www.css3-polaroids
css3-polaroids
sync
2. Update tiles and composite
Coordinated Compositing
Coordinated Compositing
Layer
Tiled BackingStore
Layer
Tiled BackingStore
Layer Tiled
BackingStore
Layer
Tiled BackingStore
Layer
Tiled BackingStore
Layer Tiled
BackingStore
1. Paint Web contents
Shared Memory
Pixman
7
Optimized Rendering Flow Browser
WebView - UIProcess
WebProcess
Java Script Core
Co
reIP
C
WebCore
Title Bar Evas
Object
Evas Object
Co
reIPC
UI FW Evas Window Compositor
OpenGL ES / EGL
Cairo
GPU Memory Window Buffer Evas Frame Buffer
Browser
Indicator
URL Bar Evas
Object
Tool Bar Evas
Object
Tool Bar
Title Bar
URL Bar
Backing Store: Tile/Layer Surfaces
TextureMapper
www.css3-polaroids
css3-polaroids
www.css3-polaroids
css3-polaroids
sync
2. Composite
Coordinated Compositing
Coordinated Compositing
Layer
Tiled BackingStore
Layer
Tiled BackingStore
Layer Tiled
BackingStore
Layer
Tiled BackingStore
Layer
Tiled BackingStore
Layer Tiled
BackingStore
1. Paint Web contents
Pixman
• No tile updating by UIProcess
• No intermediate buffer for WebView Evas obejct
8
Optimization Render Flow (1/2)
• SharedPlatformSurfaceTizen • Tile/GraphicsSurface back buffer • Locate in GPU memory • Both UIProcess and WebProcess access GPU memory directly • DDK support is necessary: TBM (tizen buffer manager) and EGL extension
• Power consumption and drawing speed • Zero-copy realized: no texture uploading in UIProcess
• Memory consumption • Restriction: allocation time is long à Introduce pool for recycling
9
Optimization Render Flow (2/2)
• TextureMapper with Evas GL direct rendering • No separate Evas object surface for WebView • Compositing destination is window surface itself
• Power consumption & Drawing speed • Reduce compositing count • Memory consumption • No separate memory space for WebView Evas object
10
Support Other Graphics Feature Browser
WebView - UIProcess
WebProcess
Java Script Core
Co
reIP
C
WebCore
Title Bar Evas
Object
Evas Object
Co
reIPC
UI FW Evas Window Compositor
OpenGL ES / EGL
GPU Memory Window Buffer Evas Frame Buffer
Browser
Indicator
URL Bar Evas
Object
Tool Bar Evas
Object
Tool Bar
Title Bar
URL Bar
Backing Store: Tile/Layer Surfaces
TextureMapper
www.css3-polaroids
css3-polaroids
www.css3-polaroids
css3-polaroids
sync
2. Composite
Coordinated Compositing
Coordinated Compositing
Layer
Tiled BackingStore
Layer
Tiled BackingStore
Layer
BackingStore
Layer
Tiled BackingStore
Layer
Tiled BackingStore
Layer
BackingStore
Cairo GLES Pixman
1. Paint Web contents
2D Canvas Contents WebGL
Different Paint Paths: • Contents layer • 2D Canvas layer • WebGL layer
11
Accelerated 2D Canvas
• Paint with Cairo-GLES • Optimize for 2D graphics game
• Texture Atlas
GPU Memory
Coordinated Compositing
2D Canvas Layer
GraphicsSurface
Cairo
Pixman
Content Layer
TiledBackingStore
GLES
Backing Store: Tile/Layer Surfaces Texture Atlas Target surface
CanvasPerf Score
2.38 @ Tizen Reference Target + Tizen 2.1
12
WebGL
• Directly use GLES • Triple buffering for WebGL layer surface
• Pipelining of 3 stages: • Painting by WebProcess • Issuing commands for compositing by UIProcess • Actual compositing by GPU à Fully utilize GPU
GPU Memory
Coordinated Compositing
WebGL Layer
GraphicsSurface
Cairo
Pixman
Content Layer
TiledBackingStore
Backing Store: Tile/Layer Surfaces
GLES
WebGL Google Aquarium
35.87 fps @ Tizen Reference Target + Tizen 2.1
Memory
14
Memory Optimization
• Foreground: WebView is visible • Active state • Ensure certain performance quality with optimal
memory usage
• Background: WebView is invisible • Usually in suspended state • Yield as much memory as possible
Foreground
Background Objectives Ensure that foreground application runs smoothly
15
Foreground Web App Memory Optimization
• Memory Optimization Parameters: • Tile cover area size • Tile size • JS engine garbage collection period • Resource cache size
Tile 34%
JS Heap 21%
Resource Cache 14%
Code 7%
Others 24%
Memory Usage Breakdown for a web content with very complex UX
Contents Characteristics Major Memory Consumer Dynamic user experience (such as CSS animation, contents layering)
Tile, JS Heap
Image resource-heavy Resource Cache
Large content size Tile
16
Performance against Memory Trade-off • Tile cover area size
• Larger means better scrolling responsiveness • Smaller means better memory usage
• Tile size • Larger means better painting speed • Smaller means better memory usage
Tile
Viewport
Tile Cover Area
17
Background Web App Memory Optimization
• Release memory • Suspend tile painting and purge backing store • Utilize disk cache for JS heap and resource cache (to-be)
Memory
Resource Cache
Sub-resources Decoded images
JS Heap
Tile
code
Foreground app
※ code memory is shared among all web app instances
Background app
Others Resource Cache
Sub-resources Decoded images
JS Heap
Tile Others
Conclusions
19
Conclusions
• Graphics performance optimization • Reduce memory operations • Different paint path per contents’ characteristics
• Memory optimization • Performance-Memory trade-off • Release as much memory as possible in the suspended state
Appendix
21
Coordinated Graphics
CPU Memory
WebKit2-EFL
TextureMapper
WebCore Layout and painting
GraphicsLayer
Coordinated Compositing CoordinatedGraphicsLayer LayerTreeCoordinator LayerTreeCoordinatorProxy
Coordinated Backing Store
WebLayerTreeRenderer
CoordinatedBackingStore TiledBackingStore
TextureMapperGL
WebGraphicsLayer
RenderLayer
TiledBackingStore LayerBackingStore
CoordinatedTile TiledBackingStoreRemoteTile LayerBackingStoreTile
TextureMapperLayer TextureMapperLayer
UI Framework Cairo OpenGL/ES
GPU Memory Tile’s backbuffer Tile’s backbuffer
UIProcess WebProcess
BitmapTextureGL CoordinatedTile SahreableBitmap
Tile’s backbuffer Tile’s backbuffer
Texture uploading : memory copy
22
Tizen Coordinated Graphics WebKit2-EFL
TextureMapper
WebCore Layout and painting
GraphicsLayer
Coordinated Compositing CoordinatedGraphicsLayer LayerTreeCoordinator LayerTreeCoordinatorProxy
Coordinated Backing Store
WebLayerTreeRendererTizen
CoordinatedBackingStore TiledBackingStore
TextureMapperGL
WebGraphicsLayer
RenderLayer
TiledBackingStore LayerBackingStoreTizen
CoordinatedTile LayerBackingStoreTileTizen
TextureMapperLayer TextureMapperLayer
UI Framework Cairo OpenGL/ES
GPU Memory Tile’s backbuffer Tile’s backbuffer
UIProcess WebProcess
PlatformSurface TexturePoolTizen
CoordinatedTile SharedPlatformSurfaceTizen TiledBackingStoreRemote TileTizen
PlatformSurfaceTexture
PlatformSurface PoolTizen