Contrasting the Modern Mobile Web in China and USA on ARM Powered® Mobile Devices

Evens Pan

ARM Tech Symposia 2015 China

Software Product Manager

November 2015

© ARM 2015 2

About this presentation

This presentation will be given in English and Chinese

The Mobile Web in China and the West are different

Examine Key trends in each region

Identify important technologies that enable these trends

Discuss ARM investment in these technologies

Understand technologies you should “Goto Market” with

© ARM 2015 3

The state of todays worldwide web

1 billion websites+

4.74 billion web pages*

1/3 of the worlds top websites

are Chinese

Chrome- most popular browser

Dec 2009 Visits

from Browsers†

Chrome

IE

Firefox

Safari

Opera

+source: www.internetlivestats.com

*source: worldwidewebsize.com †source: w3schools.com ‡source: alexa.com

• Google.com 1

• Facebook.com 2

• YouTube.com 3

• Yahoo.com 4

• Baidu.com 5

• Amazon.com 6

• Wikipedia.org 7

• Taobao.com 8

• Twitter.com 9

• Qq.Com 10

April 2015 Visits

from Browsers†

Chrome

IE

Firefox

Safari

‡

© ARM 2015 4

Parallels in what’s popular in USA and China

Source: alexa.com

• Google.com 1

• Facebook.com 2

• Amazon.com 3

• YouTube.com 4

• Yahoo.com 5

• Wikipedia.org 6

• Ebay.com 7

• Craigslist 8

• Twitter.com 9

• Redit.com 10

‡

• Baidu.com 1

• Qq.com 2

• Taobao.com 3

• Sina.com.cn 4

• Weibo.com 5

• Tmall.com 6

• Hao123.com 7

• Sohu.com 8

• 360.cn 9

• Gmw.cn 10

1. Search

2. Social

3. Shop

Web Engines in the West and China

Foundation of browsers and Web OS

© ARM 2015 6

Chromium/<blink>

Google browsers were originally

Webkit based

Google forked Webkit in 2013 to

create the <blink> rendering engine

<blink> provides the complete

implementation (named the

Content) on a variety of OS to build

a browser

<blink> has a very active community

with many contributors

<blink>

Chrome

Chrome OS

Android WebView

Opera Amazon

Silk

QT Web

Engine

Tizen

© ARM 2015 7

Mozilla Gecko

Gecko is the Mozilla rendering engine

Used in all Firefox browsers

Firefox is the only true 100% open

source browser

A leading platform for web innovation

New web features are implement here

Parallel JavaScript

asm.js

Service workers

KDDI have developed a headless

version for aggregation and control of

IoT Devices via HTML5

Gecko

Firefox

Firefox OS

Firefox for

Android

Open Web Board

© ARM 2015 8

Baidu Browser – T5 Engine

Baidu proprietary web engine –T5

Derived from Webkit, moving to Blink

Only Baidu in-group customers, replacing

system Webview Baidu mobile browser

Mobile Baidu (Baidu search app)

Baidu mobile Tieba

Most popular usecase: Webpage browsing

Baidu mobile browser

Mobile Baidu Baidu mobile Tieba

Baidu T5 Engine

Webkit Blink

© ARM 2015 9

Tencent QQ Browser – X5 Engine

Tencent proprietary web engine –

X5

Derived from Webkit, moving to

Blink

Not only Tencent in-group

customers QQ mobile browser

Wechat

Mobile QQ

Mobile Q-zone

QQ mobile browser

Q-zone

JD

Tencent X5 Engine

Webkit Blink

Wechat

QQ

Sohu Video

Sina

© ARM 2015 10

Tencent QQ Browser – X5 Engine

But also external customers,

replacing system Webview Sina News & Weibo

Sohu Video

JD

Popular usecases beyond webpage

browsing Web Apps, e.g. HTML5 Games

QQ mobile browser

Q-zone

JD

Tencent X5 Engine

Webkit Blink

Wechat

QQ

Sohu Video

Sina

© ARM 2015 11

UC Browser – U3 Engine

UCWeb proprietary web engine – U3

Derived from Webkit

UC browser is the only customer

Most popular usecase: Webpage

browsing

UC browser

Webkit

U3

engine

© ARM 2015 12

Web App Framework

YunOS – Not a browser, but an OS

YunOS is an OS provided by Alibaba

for multiple form-factors, including

mobile, home entertainment, wearable,

IVI…

YunOS provides to App developers Android-compatible App Framework

Web App Framework + Alibaba Web services

Today the Web Runtime (engine) in

YunOS is derived from Webkit

Webkit

BSP

Libs

Web Service

Web Runtime

Web App

Stakeholders of Modern Mobile Web

ARM Strategy of Interacting

© ARM 2015 14

Players in Web arena Standardizers W3C, ECMA, Khronos

Core Tech Innovators Chromium <blink>, Firefox, Webkit

Corporate Tech Sponsors Google, Mozilla, Apple, Opera

New Ecosystem Promoters OS/Platform: Chrome OS, Firefox OS, Tizen

Middleware/Framework: node.js, famo.us, ExtJS

Application Developers Browsers, Games, Video Services,…

Hardware manufacturers SoC, ODM/OEM, …

Webkit Firefox

Baidu browser

Influence

Platform/OS/Ecosystem

Applications Hardware

Standards

Baidu Light App

Tech Sponsor

*China currently lacks Core Tech Innovators but that may change

Today web standards are driven from the West

UC浏览器

© ARM 2015 15

ARM Engagement with Corporate Tech Sponsors

Corporate Tech sponsors drive web standards to their business agenda

Standards are drafted and prototyped by Core Tech Innovation arm of Corporate Tech Sponsors

Proposed standards with more than one sponsor with prototypes are rapidly standardized

ARM is building a strong direct engagement with Core Tech Innovators

Ensure WWW standards are defined with a favorable coupling to ARM Technologies

ARM Technologies track the requirements of emerging WWW Standards

WWW Standards evolve around emerging ARM Technologies

WWW Standards are implemented first on ARM on major browser/server/IoT platforms

Webkit Firefox • Core Tech Innovators

• Chromium <blink>, Firefox, Webkit

• Corporate Tech Sponsors

• Google, Mozilla, Apple, Opera

Tech Sponsor

© ARM 2015 16

Browsers and their current engines

Chrome Firefox Baidu UC YunOS Tencent

Rendering

Engine

Blink Gecko Webkit

Blink

Webkit Webkit Webkit

Blink

JavaScript

Engine

V8 SpiderMonk

ey /

IonMonkey

V8 V8 JavaScriptC

ore

V8

© ARM 2015 17

HTML5 Game Engine as a JS library

Games and Game Engine are written in JS

Run in browsers and apps with Webview

(or substitutes)

Biggest concern: Fragmentation of

browsers and Webviews

UX/Performance uncontrollable

Compatibility not guaranteed

Business: Engine cannot control the

distribution channel. Others (browsers, apps)

do.

Game Engines want to change!

App

CPU GPU

Multi-core

Skia

Blink/Webkit

Browser Webview

V8

HTML5 Game Engine

HTML5 Games

© ARM 2015 18

Performance on fragmented browsers and devices

Xia

om

i3

Sam

sung

Note

4

iPhone 6

Plu

s

Xia

om

i3

Sam

sung

Note

4

iPhone 6

Plu

s

Xia

om

i3

Sam

sung

Note

4

iPhone 6

Plu

s

Xia

om

i3

Sam

sung

Note

4

iPhone 6

Plu

s

QQ browser Cheetah browser System browser

FPS

Test data of a popular HTML5 game “Quanmin Guozhan”

Data from Kaixin001.com

Blink-based browsers perform

better than Webkit-based browsers

worst case 21FPS

best case 38FPS

© ARM 2015 19

HTML5 Game Engine + Runtime

Runtime is a component that can be

integrated into browsers/apps Games for this runtime can be delivered to browser

Similar to Adobe Flash Model

Resolves the business “channel”

problem for HTML5 game engine vendors

However… Business conflict for browsers/apps

UX/Performance/Compatibility concern

unresolved

Why browsers/apps will integrate the Runtime?

Unsuccessful business model!

App

CPU GPU

Multi-core

Skia

Blink/Webkit

Browser Webview

V8

HTML5 Games

HTML5 Game

Runtime

HTML5 Game Engine

© ARM 2015 20

HTML5 Game Engine + Accelerating Runtime

Not only a distribution and running

platform, but also provides

Accelerated graphics rendering

Other features as well, e.g. unified WebAudio

APIs.

Bypasses the original web kernel (Blink

or Webkit) in browsers and Webview

Resolve UX / Performance /

Compatibility concerns.

Browsers/app are willing (more or less)

to integrate it.

Successful business model!

App

CPU GPU

Multi-core

Skia

Blink/Webkit

Browser Webview

V8

HTML5 Games

HTML5

Game

Runtime

HTML5 Game Engine

Exploring Key Technologies in the West and China

© ARM 2015 22

asm.js

“an extraordinarily optimizable, low-

level subset of JavaScript”- asmjs.org

Bringing C/C++ applications and games

to every screen- no installation

Leading game engines ports-Unreal4

and Unity in asm.js and WebGL

New game engines from PlayCanvas

Commercial games in the Google

PlayStore that are asm.js

Browser vendors providing strong

support including fast paths and AOT

compilation

C/C++ Code

Clang Compiler

Emscripten

JS Engine

OpenGL

function strlen(ptr) {

ptr = ptr|0;

var curr = 0;

curr = ptr;

while (MEM8[curr]|0 != 0) {

curr = (curr + 1)|0;

}

return (curr - ptr)|0;

}

int f(int i) {

return i + 1;

}

function f(i) {

i = i|0;

return (i + 1)|0;

}

LLVM bitcode

asm.js

WebGL Calls

© ARM 2015 23

Requirements for asm.js from China

Inline handwriting asm.js in JS to

improve performance Just like inline assembly in C/C++

Compile C/C++ library into

asm.js and provide JS API to

upper layer apps

ARM is working together with

Mozilla on these requirements C/C++ Library

C/C++ Apps

asm.js

Library

JS API

HTML5

Apps

Emscripten

© ARM 2015 24

WebAssembly: the evolution of asm.js

New standard developed by Google, Mozilla and Microsoft inside W3C*

https://www.w3.org/community/webassembly/

An Instruction Set agnostic binary applications format

Abstract Syntax Tree (AST) JiTed and executed on JavaScript VM

Advantages:

Support for strongly typed languages- more efficient execution

C/C++, Java…

Strong focus on compression for fast delivery

Removes JavaScript parsing bottleneck

Naturally obfuscates software IP

Potential for rapid uptake- AST initially maps onto asm.js in browsers now!

© ARM 2015 25

WebAssembly Evolution

WebAssembly

LLVM

.net

Java JVM

Timeline

WebAssembly → asm.js →

native

WebAssembly → native in

browser

WebAssembly → native in and out of browser

Technology History

© ARM 2015 26

TurboFan is now being used inside the V8 engine

Targeting asm.js libraries initially

Focus is now turning to other areas

ARM continues to work with Google on V8

~60% improvement for the asm.js based zlib

Improvement varies with other asm.js tests

Work in progress

TurboFan is the natural engine to WebAssembly!

TurboFan a new JIT inside V8 JavaScript Engine

6000

8000

10000

12000

14000

16000

18000

20000

24000 24500 25000 25500 26000 26500 27000 27500

Sco

re (

scale

d t

o 1

GH

z)

Octane 2.0 zlib

Cortex-A15

© ARM 2015 27

WebGL an important technology

WebGL is a standard from the Khronos Group

WebGL has been establishing itself over Canvas

2D for gaming graphics

Able to handle many more objects on screen

with no loss of frame rate

Support in the major western mobile

browsers- Chrome, Firefox, Safari and IE

0 50 100

10

30

100

250

WebGL

Canvas 2D

Comparison of WebGL versus Canvas

FPS

Num

ber

of O

bje

cts

Source developer.tizen.org

© ARM 2015 28

PlayCanvas: WebGL and asm.js together

Open-source, WebGL game engine

with cloud-based visual tools

Ammo Physics engine port of

C++ bullet engine to asm.js

Visual tools run on PlayCanvas

Engine is tuned for Mali Graphics

Brings full 3D gaming experience to

anyone with a WebGL capable

browser

ARM and PlayCanvas collaboration

to optimize for Mobile

© ARM 2015 29

ARM and University of Szeged web research

© ARM 2015 30

Dept. of Software Engineering, University of Szeged

Leading research into web browser technologies since 2008 working closely with ARM

Parallelization, graphics, JavaScript JITs, regex evaluation, memory usage, security

Well respected within the Webkit community who are open to accepting their code

Landed several significant performance improvements to WebCore and JSCore

ARM AArch32 Squirrel Fish Extreme JIT for JSCore

Parallel Jobs framework to exploit multi-core SoC’s in WebCore

SVG feFilter acceleration with ARM NEON (up to 4X faster) in webkit

Developing Fuzzinators- generate random HTML/CSS/JS code for security testing

Hosting buildbots for Webkit, JSCore, <blink>, LLVM for ARM AArch32 and AArch64

Working with ARM to research future browser directions including parallel JavaScript

© ARM 2015 31

Multi-threading with JavaScript within the browser

JavaScript supports multi-threading via Web Workers- part of HTML5 draft

standard

Allows computationally intensive activity to run separate from the main UI

thread

Enables activity that is naturally parallelizable to be parallelized

Web Workers

Execute supplied JavaScript files- var my_worker new worker(‘my_task.js’)

Communicate via message passing and can spawn other workers

Only communicate via postmessage and object transfer

Don’t have access to the DOM

Don’t have direct access to the ‘parent’ page

Can transfer binary objects between each other

Have broad support across leading browsers

source caniuse.com

© ARM 2015 32

Can Web Workers make use of multi-core CPU’s?

Web Workers map well on to multi-core systems

Each Web Worker can run on a different core provided there

are enough cores

e.g. 4 Web Workers perform optimally on a quad core system

Example test using Mandelbrot with 8 Web Workers

http://www.scicomp.dk/2012/02/26/creating-fractals-with-web-

workers.html

8 cores appears to be the sweet spot for this implementation

Graph right is normalized to 1GHz

Web Workers map well on Multi-core systems

Switching from 2 to 4 cores gets around 2X perf*

*Does not take into account effects differing memory systems,

RAM etc.

Results are dependent on the suitability of the algorithm for

large numbers of workers

0

1000

2000

3000

4000

5000

6000

7000

8000

Samsung Chromebook

Exynos 5 Cortex-A15

Dual Core 1.7GHz

Chromebook 2 Exynos 5

5800 Quad Core

Cortex-A15/Quad Core

Cortex-A7 big/LITTLE

2.0Ghz

Mandelbrot with 8 Web Workers

Millisecond Time

Normalized to 1Ghz

© ARM 2015 33

SIMD and Parallel JavaScript- RiverTrail

SIMD.js

A proposed specification for SIMD operations in the JavaScript

language

Formerly collaboration between Intel, Mozilla and Google

Was biased in favor of SSEx over NEON

Now a collaboration between ARM, Intel, Google and Mozilla

Spec is much closer to a level playing field for the industry

var x = float32x4(1, 2, 3.142,

22.5);

var y = float32x4(0, 0, 1, 10);

var = SIMD.add(x, y);

RiverTrail: A collaboration in to Deterministic Parallelism by Mozilla / Intel

High-level abstractions to enable parallel speedups without any of the pitfalls of threads

Hard to find sufficiently general abstractions at a high level

Difficult to adopt by JavaScript Engine Developers- large implementation effort

Developers can’t try it out easily- since not implemented in many browsers

© ARM 2015 34

New Initiative from Mozilla: SharedArrayBuffer

Simple incremental addition to JavaScript in keeping with the Extensible Web

Manifesto

Ability to lock the buffer and block on it

Shared between WebWorkers but not main thread (today)

More conservative than full threading- yet should satisfy a large number of use

cases

Prototype implementations in Google Chrome and Mozilla Firefox Nightly

University of Szeged (funded by ARM) already created an early prototype of this

construct 3 years ago

University of Szeged (funded by ARM) working with Mozilla on this new

construct

Focus on suitability for ARM multi-core

© ARM 2015 35

TYGL- an open source GPU library for webkit

Browsers can spend typically 30%-50% of time rendering webpages

On desktop this often done on the CPU- however using the GPU is better on Mobile

Szeged began an ARM funded research project in 2013

Replacing everything below Graphics Context API with a new OpenGLES 2.0 library

Initial performance and quality results were very promising- presented at APM 2013

2013: Samsung Research joined ARM and Szeged collaborating on the library

Result: TyGL (pronounced Tigel) an open source GPU library under Graphics Context

Intelligent batched draw calls

Automatic shader generation

Trapezoid based path rendering

https://github.com/szeged/TyGL

© ARM 2015 36

Summary

Rendering Engine: <blink>

JavaScript Engine: V8

Graphics: canvas 2D → WebGL

C/C++ compiling to asm.js

SIMD.js

Parallel JavaScript

Game libraries on top of

browser Runs on all major browsers

Rendering Engine: Webkit →

<blink>

JavaScript Engine: JSCore → V8

Graphics: canvas 2D

asm.js hand assembly so far

No interest in SIMD.js yet

No interest in parallel JS yet

Game runtimes added to

browser Typically just JS + fast <canvas>

© ARM 2015 37

Conclusion

ARM and it partners are working on a raft of new browser technologies

asm.js + WebGL, parallel JavaScript, simd.js

Adoption of these technologies varies by region- China and USA are quite

different

ARM is investing in the key technologies that underlie both regions web

technologies

Working directly with Core Tech Innovators and with University of Szeged

Collaborating on parallel JavaScript, simd.js and asm.js

Delivering stable optimized baselines for webkit and <blink>

Opportunities for Partners to collaborate with ARM and Szeged

Deliver specific technologies appropriate for the regions you are deploying

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.

All other marks featured may be trademarks of their

respective owners.

Copyright © 2015 ARM Limited