Contrasting the Modern Mobile Web in China and USA on … · Contrasting the Modern Mobile ... Web...
Transcript of Contrasting the Modern Mobile Web in China and USA on … · Contrasting the Modern Mobile ... Web...
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
Mobile QQ
Mobile Q-zone
QQ mobile browser
Q-zone
JD
Tencent X5 Engine
Webkit Blink
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
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