The ARM-Powered Mobile Internet

Matt Spencer Mali Ecosystem Team

Who Am I?

. Name: Matt Spencer

. Education: BSc Electronic Engineering Southampton University

. Career Technical Marketing, ARM UI Architect, Cisco Middleware, NDS Kernel Hacker, Sony

Who is ARM?

Diverse & Scalable SoC Technologies Touchscreen Apps Processor Cellular Modem & Sensor Hub Cortex-A5 Mali™-400 Mali-V500 Cortex®-R4 Cortex-M0 Cortex-A7 Mali-450 Mali-DP500 Cortex-M3 Cortex-R5 Cortex-A9 Mali-T604 Cortex-M4 Cortex-R7 Cortex-A15 Mali-T760 WiFi Cortex-A17 Mali-T720 Cortex-M4 Camera Cortex-M3

Sensor Hub Cortex-M0+ SIM SecurCore® SC300™

Power Mgmt Bluetooth Cortex-M3 Cortex-M3 Flash Controller Cortex-M0 Cortex-M0 GPS Cortex-M3 Cortex-M3

4 Cortex-M0

Celebrating 50 Billion ARM-Powered Chips Over 10 Billion ARM-powered chips shipped in 2013 alone.

Strong and Consistent Growth Since 1993 Overall shipments leading to the 50 billion milestone.

1993 2013 10 Billion 50 Billion

Markets we’re POWERING www.50billionchips.com

16% | Enterprise Applications such as hard disk drives, and wireless/wireline networking infrastructure 20% | Embedded equipment Applications including automotive, touch-screen controllers, industrial equipment, connectivity and smartcards

6% | Home Consumers devices such as smart TVs, 58% | Mobile game consoles and home networking Devices including gateways smartphones, mobile phones, tablets, e-readers and wearables

ARM: Connecting the World

. 6 billion people connected with ARM-powered mobile devices . Over 2 billion people using smartphones . Tablets out shipped notebook PCs in 2013

. ARM powering your consumer electronics: . Over 95% of mobile phones and tablets . Over 70% of smart TVs . Over 95% of portable gaming consoles . Over 80% of digital cameras

ARM® Mali™ GPU Leadership

Mali-400 GPU: Top individual GPU Model*** Over 70% of ***Source: Unity smart TVs Hardware Over 50% of Mali-based Statistics 2013-05 Android OS-based Over 20% of tablets Android™ OS-based Mali-based smartphones Mali-based

Why Am I Here?

What are the Issues with Mobile HTML5 Apps?

13.52%

Why is Performance an Issue for Mobile?

Screen Radio Antenna

Memory Bandwidth CPU Frequency

What Can I Do as a Developer?

Work Smarter, Not Harder Minimize the work that the browser has to do . Understand layers . What is a layer . Why is it important . How to create a layer . When to promote to a layer

. However, there is a VERY narrow fast path

Source: https://hacks.mozilla.org/wp-content/uploads/2011/12/CNN-3D-View.png For more information, visit: http://www.html5rocks.com/en/tutorials/speed/layers/

Work Smarter, Not Harder Minimize the work that the browser has to do . Understand Garbage Collection (GC) . What is GC . Why I should care . Memory Pooling . Heap vs Stack . Impact of GC

For more information, visit: http://www.html5rocks.com/en/tutorials/memory/effectivemanagement/

What Is ARM Doing?

Browser Landscape

WebKit Gecko 16

Anatomy of an HTML App Application

emscripten expect backbone ember three impact …

asm.js require jQuery ExtJS babylon goo …

Framework dart underscore zepto angular scenejs playcanvas …

WebGL™ WebCL™ WebRTC SVG DOM …

HTML CSS JavaScript™ Browser Browser Engine (Blink, WebKit, Gecko, …) (JSCore, V8, …)

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

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

GPU CPU HW

JavaScript Performance Enhancements

. Working with major JavaScript VMs to . NEON acceleration improve 32 & 64-bit performance . Optimizations to Skia . SVG and CSS filter optimizations . In 2013 ARM helped Google improve v8 . Up to 4x improvement performance by 57%* .

. Optimizations for LLVM compiler to . PNaCl enhance code quality . Optimizing LLVM code generation

. Working with browser teams to ensure ASM.js and Emscipten fully optimised

* Google IO 2013

The Pain of Painting

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

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.

20 Source: http://en.wikipedia.org/wiki/Rasterisation Why No GPU Rasterization?

. 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

Text Rendering

Resolution Independent Resolution Independent Resolution Dependant

GPU Rasterization Middleware - Google Skia Ganesh

. 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 [email protected]

GPU Rasterization Middleware - GL2D

. Collaboration between: . Complete replacement of backend . ARM Graphics Context . Szeget University . Samsung . ‘Work in Progress’

. Still plenty of optimization opportunities ® . Full OpenGL ES 2.0 rendering backend for WebKit . Showing promising performance

Project is being open sourced and will be available on github. Contact [email protected] for more information

Detailed performance data for GL2D

4.5

3.5 3 2.5 NIX 2 GL2D 1.5

1 Performance multiplier Performance 0.5 0 AT-AT Falling Leaves Hungry Moving Text Moving Image Scrolling Scrolling The Monkey Wikipedia Guardian

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