![Page 1: Performance Optimization of Tizen WebKitcdn.download.tizen.org/misc/media/conference2013/... · Background Web App Memory Optimization • Release memory • Suspend tile painting](https://reader034.vdocument.in/reader034/viewer/2022042219/5ec556f413b08355f20a9d77/html5/thumbnails/1.jpg)
Performance Optimization of Tizen WebKit
: Memory and Graphics
Seojin Kim Samsung Electronics
![Page 2: Performance Optimization of Tizen WebKitcdn.download.tizen.org/misc/media/conference2013/... · Background Web App Memory Optimization • Release memory • Suspend tile painting](https://reader034.vdocument.in/reader034/viewer/2022042219/5ec556f413b08355f20a9d77/html5/thumbnails/2.jpg)
2
• Introduction • Rendering Architecture • Performance Optimization • Memory Optimization • Conclusions
Contents
![Page 3: Performance Optimization of Tizen WebKitcdn.download.tizen.org/misc/media/conference2013/... · Background Web App Memory Optimization • Release memory • Suspend tile painting](https://reader034.vdocument.in/reader034/viewer/2022042219/5ec556f413b08355f20a9d77/html5/thumbnails/3.jpg)
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
![Page 4: Performance Optimization of Tizen WebKitcdn.download.tizen.org/misc/media/conference2013/... · Background Web App Memory Optimization • Release memory • Suspend tile painting](https://reader034.vdocument.in/reader034/viewer/2022042219/5ec556f413b08355f20a9d77/html5/thumbnails/4.jpg)
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
![Page 5: Performance Optimization of Tizen WebKitcdn.download.tizen.org/misc/media/conference2013/... · Background Web App Memory Optimization • Release memory • Suspend tile painting](https://reader034.vdocument.in/reader034/viewer/2022042219/5ec556f413b08355f20a9d77/html5/thumbnails/5.jpg)
Performance
![Page 6: Performance Optimization of Tizen WebKitcdn.download.tizen.org/misc/media/conference2013/... · Background Web App Memory Optimization • Release memory • Suspend tile painting](https://reader034.vdocument.in/reader034/viewer/2022042219/5ec556f413b08355f20a9d77/html5/thumbnails/6.jpg)
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
![Page 7: Performance Optimization of Tizen WebKitcdn.download.tizen.org/misc/media/conference2013/... · Background Web App Memory Optimization • Release memory • Suspend tile painting](https://reader034.vdocument.in/reader034/viewer/2022042219/5ec556f413b08355f20a9d77/html5/thumbnails/7.jpg)
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
![Page 8: Performance Optimization of Tizen WebKitcdn.download.tizen.org/misc/media/conference2013/... · Background Web App Memory Optimization • Release memory • Suspend tile painting](https://reader034.vdocument.in/reader034/viewer/2022042219/5ec556f413b08355f20a9d77/html5/thumbnails/8.jpg)
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
![Page 9: Performance Optimization of Tizen WebKitcdn.download.tizen.org/misc/media/conference2013/... · Background Web App Memory Optimization • Release memory • Suspend tile painting](https://reader034.vdocument.in/reader034/viewer/2022042219/5ec556f413b08355f20a9d77/html5/thumbnails/9.jpg)
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
![Page 10: Performance Optimization of Tizen WebKitcdn.download.tizen.org/misc/media/conference2013/... · Background Web App Memory Optimization • Release memory • Suspend tile painting](https://reader034.vdocument.in/reader034/viewer/2022042219/5ec556f413b08355f20a9d77/html5/thumbnails/10.jpg)
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
![Page 11: Performance Optimization of Tizen WebKitcdn.download.tizen.org/misc/media/conference2013/... · Background Web App Memory Optimization • Release memory • Suspend tile painting](https://reader034.vdocument.in/reader034/viewer/2022042219/5ec556f413b08355f20a9d77/html5/thumbnails/11.jpg)
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
![Page 12: Performance Optimization of Tizen WebKitcdn.download.tizen.org/misc/media/conference2013/... · Background Web App Memory Optimization • Release memory • Suspend tile painting](https://reader034.vdocument.in/reader034/viewer/2022042219/5ec556f413b08355f20a9d77/html5/thumbnails/12.jpg)
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
![Page 13: Performance Optimization of Tizen WebKitcdn.download.tizen.org/misc/media/conference2013/... · Background Web App Memory Optimization • Release memory • Suspend tile painting](https://reader034.vdocument.in/reader034/viewer/2022042219/5ec556f413b08355f20a9d77/html5/thumbnails/13.jpg)
Memory
![Page 14: Performance Optimization of Tizen WebKitcdn.download.tizen.org/misc/media/conference2013/... · Background Web App Memory Optimization • Release memory • Suspend tile painting](https://reader034.vdocument.in/reader034/viewer/2022042219/5ec556f413b08355f20a9d77/html5/thumbnails/14.jpg)
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
![Page 15: Performance Optimization of Tizen WebKitcdn.download.tizen.org/misc/media/conference2013/... · Background Web App Memory Optimization • Release memory • Suspend tile painting](https://reader034.vdocument.in/reader034/viewer/2022042219/5ec556f413b08355f20a9d77/html5/thumbnails/15.jpg)
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
![Page 16: Performance Optimization of Tizen WebKitcdn.download.tizen.org/misc/media/conference2013/... · Background Web App Memory Optimization • Release memory • Suspend tile painting](https://reader034.vdocument.in/reader034/viewer/2022042219/5ec556f413b08355f20a9d77/html5/thumbnails/16.jpg)
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
![Page 17: Performance Optimization of Tizen WebKitcdn.download.tizen.org/misc/media/conference2013/... · Background Web App Memory Optimization • Release memory • Suspend tile painting](https://reader034.vdocument.in/reader034/viewer/2022042219/5ec556f413b08355f20a9d77/html5/thumbnails/17.jpg)
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
![Page 18: Performance Optimization of Tizen WebKitcdn.download.tizen.org/misc/media/conference2013/... · Background Web App Memory Optimization • Release memory • Suspend tile painting](https://reader034.vdocument.in/reader034/viewer/2022042219/5ec556f413b08355f20a9d77/html5/thumbnails/18.jpg)
Conclusions
![Page 19: Performance Optimization of Tizen WebKitcdn.download.tizen.org/misc/media/conference2013/... · Background Web App Memory Optimization • Release memory • Suspend tile painting](https://reader034.vdocument.in/reader034/viewer/2022042219/5ec556f413b08355f20a9d77/html5/thumbnails/19.jpg)
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
![Page 20: Performance Optimization of Tizen WebKitcdn.download.tizen.org/misc/media/conference2013/... · Background Web App Memory Optimization • Release memory • Suspend tile painting](https://reader034.vdocument.in/reader034/viewer/2022042219/5ec556f413b08355f20a9d77/html5/thumbnails/20.jpg)
Appendix
![Page 21: Performance Optimization of Tizen WebKitcdn.download.tizen.org/misc/media/conference2013/... · Background Web App Memory Optimization • Release memory • Suspend tile painting](https://reader034.vdocument.in/reader034/viewer/2022042219/5ec556f413b08355f20a9d77/html5/thumbnails/21.jpg)
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
![Page 22: Performance Optimization of Tizen WebKitcdn.download.tizen.org/misc/media/conference2013/... · Background Web App Memory Optimization • Release memory • Suspend tile painting](https://reader034.vdocument.in/reader034/viewer/2022042219/5ec556f413b08355f20a9d77/html5/thumbnails/22.jpg)
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
![Page 23: Performance Optimization of Tizen WebKitcdn.download.tizen.org/misc/media/conference2013/... · Background Web App Memory Optimization • Release memory • Suspend tile painting](https://reader034.vdocument.in/reader034/viewer/2022042219/5ec556f413b08355f20a9d77/html5/thumbnails/23.jpg)