1

Anatomy of an HTML5 Application

Matthew Spencer

UI & Browser Use Case Manager, Mali Ecosystem

2

Browser Landscape

<blink>

WebKit Gecko

3

Anatomy of an HTML5 Application

Fra

mew

ork

Application

HW

GPU CPU

BSP

Operating System (Android, Linux, …) & Drivers (OpenGL ES, DirectX, …)

System Libraries (File system, Threading, Rendering - Skia, Cairo, …)

Bro

wse

r

Browser Engine (Blink, WebKit, Gecko, …)

HTML CSS

(JSCore, V8, …)

JavaScript

WebGL WebCL WebRTC SVG DOM

<video> <audio> WebSocket WebWorker Geolocation …

…

emscripten expect

asm.js

dart

require

underscore

backbone

jQuery

zepto

ember

ExtJS

angular

three

babylon

scenejs

impact

goo

playcanvas

…

…

…

4

What are the Issues with Mobile HTML5 Apps?

13.52%

5

Why is Performance an Issue for Mobile?

Memory Bandwidth CPU Frequency

Radio Antenna Screen

6

Common Performance Bottlenecks

Text Rendering

Web is very text heavy

Currently a CPU intensive task

CPU Rasterization

No use of GPU in standard 2D content

GPU used primarily for composition

Garbage Collector

Non-deterministic execution

Blocks execution until complete

Javascript JIT

Huge improvements over recent years

Focus shifting onto optimizing key code paths

ASM.js, Emscripten

7

What is ARM doing?

8

JavaScript Performance Enhancements

Working with major JavaScript VMs to

improve 32 & 64-bit performance

In 2013, ARM® helped Google improve

v8 performance by 57%*

Optimizations for LLVM compiler to

enhance code quality

Working with browser teams to ensure

ASM.js and Emscipten fully optimised

NEONTM acceleration

Optimizations to Skia

SVG and CSS filter optimizations

Up to 4x improvement

<audio> and <video> acceleration

PNaCl

Optimizing LLVM code generation

* Google IO 2013

9

The Pain of Painting

Source: http://blog.chromium.org/2012/10/do-more-with-chrome-developer-tools.html

10

Rasterization

Rasterisation (or rasterization) is the task of taking an image

described in a vector graphics format (shapes) and converting it into

a raster image (pixels or dots) for output on a video display or printer,

or for storage in a bitmap file format.

Source: http://en.wikipedia.org/wiki/Rasterisation

11

Modern mobile GPUs support OpenGL® ES 2.0, 3.0 and 3.1

There are no 2D APIs defined within any of these specifications

Modern mobile GPUs are VERY good at rendering triangles

This does not translate easily into rendering paths

We need an efficient middleware to translate 2D into 3D

Why No GPU Rasterization?

12

Text Rendering

Resolution Dependant

Resolution Independent Resolution Independent

13

OpenGL ES 2.0-based backend for Skia

Skia currently used in:

Android™ OS

Chrome™ OS

Skia is being actively integrated into other non-Google projects

Ganesh backend available to try today behind a flag in Chrome M36

To discover more, read:

‘GPU Rasterization Triggering’

ARM hosting a Skia summit in Cambridge in October - if you are interested in attending

please contact matt.spencer@arm.com.

GPU Rasterization Middleware - Google Skia Ganesh

14

GPU Rasterization Middleware - GL2D

Collaboration between:

ARM

Szeget University

Samsung

Full OpenGL ES 2.0 rendering backend

for WebKit

Complete replacement of backend

Graphics Context

‘Work in Progress’

Still plenty of optimization opportunities

Showing promising performance

Project is being open sourced and will be available at: https://github.com/szeged/WebKitGL2D

Contact matt.spencer@arm.com for more information

15

0

0.5

1

1.5

2

2.5

3

3.5

4

4.5

AT-AT Falling Leaves Hungry

Monkey

Moving Text Moving Image Scrolling

Wikipedia

Scrolling The

Guardian

Perf

orm

an

ce m

ult

iplier

NIX

GL2D

Detailed performance data for GL2D

16

Thank You

The trademarks featured in this presentation are registered and/or unregistered trademarks of ARM Limited (or its subsidiaries) in the EU

and/or elsewhere. All rights reserved. Any other marks featured may be trademarks of their respective owners