Contrasting the Modern Mobile Web in China and USA on ARM Powered® Mobile Devices
Evens Pan Software Product Manager
ARM Tech Symposia 2015 China November 2015 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
2 © ARM 2015 The state of todays worldwide web ‡ 1 • Google.com Dec 2009 Visits from Browsers† . 1 billion websites+ 2 • Facebook.com Chrome • YouTube.com IE 3 . 4.74 billion web pages* Firefox Safari 4 • Yahoo.com Opera 5 • Baidu.com . 1/3 of the worlds top websites April 2015 Visits 6 • Amazon.com are Chinese from Browsers† 7 • Wikipedia.org . Chrome- most popular browser Chrome 8 • Taobao.com IE Firefox 9 • Twitter.com Safari +source: www.internetlivestats.com *source: worldwidewebsize.com 10 • Qq.Com †source: w3schools.com 3 © ARM 2015 ‡source: alexa.com
Parallels in what’s popular in USA and China
‡ 1 • Google.com 1 • Baidu.com
2 • Facebook.com 2 • Qq.com
3 • Amazon.com 3 • Taobao.com
4 • YouTube.com 4 • Sina.com.cn
5 • Yahoo.com 1. Search 5 • Weibo.com
6 • Wikipedia.org 2. Social 6 • Tmall.com
7 • Ebay.com 3. Shop 7 • Hao123.com
8 • Craigslist 8 • Sohu.com
9 • Twitter.com 9 • 360.cn
4 © ARM 2015 10 • Redit.com 10 • Gmw.cn Source: alexa.com
Web Engines in the West and China
Foundation of browsers and Web OS
Chromium/
. Google browsers were originally Webkit based Chrome . Google forked Webkit in 2013 to Tizen Chrome create the
. Gecko is the Mozilla rendering engine Firefox . Used in all Firefox browsers . Firefox is the only true 100% open source browser . A leading platform for web innovation Open Firefox . New web features are implement here Web Gecko OS . Parallel JavaScript Board . asm.js . Service workers . KDDI have developed a headless Firefox version for aggregation and control of for IoT Devices via HTML5 Android
7 © ARM 2015 Baidu Browser – T5 Engine
Baidu mobile Mobile Baidu Baidu mobile . Baidu proprietary web engine –T5 browser Tieba . Derived from Webkit, moving to Blink . Only Baidu in-group customers, replacing system Webview . Baidu mobile browser Baidu T5 . Mobile Baidu (Baidu search app) Engine . Baidu mobile Tieba . Most popular usecase: Webpage browsing Webkit Blink
8 © ARM 2015 Tencent QQ Browser – X5 Engine Q-zone QQ Sina . Tencent proprietary web engine – X5 Wechat Sohu Video . Derived from Webkit, moving to Blink QQ mobile JD browser . Not only Tencent in-group customers . QQ mobile browser Tencent X5 Engine . Wechat . Mobile QQ . Mobile Q-zone Webkit Blink
9 © ARM 2015 Tencent QQ Browser – X5 Engine Q-zone QQ Sina . But also external customers, replacing system Webview Wechat Sohu Video . Sina News & Weibo . Sohu Video QQ mobile JD . JD browser . Popular usecases beyond webpage browsing Tencent X5 . Web Apps, e.g. HTML5 Games Engine
Webkit Blink
10 © ARM 2015 UC Browser – U3 Engine
UC browser . UCWeb proprietary web engine – U3 . Derived from Webkit . UC browser is the only customer . Most popular usecase: Webpage U3 browsing engine
Webkit
11 © ARM 2015 YunOS – Not a browser, but an OS
. YunOS is an OS provided by Alibaba for multiple form-factors, including Web App mobile, home entertainment, wearable, IVI… Web App Framework . YunOS provides to App developers Web Runtime . Android-compatible App Framework Web Service Webkit . Web App Framework + Alibaba Web services . Today the Web Runtime (engine) in Libs
YunOS is derived from Webkit BSP
12 © ARM 2015 Stakeholders of Modern Mobile Web
ARM Strategy of Interacting Players in Web arena
. Standardizers Influence Standards . W3C, ECMA, Khronos . Core Tech Innovators Firefox Webkit . Chromium
. 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
• Core Tech Innovators Firefox Webkit • Chromium
15 © ARM 2015 Browsers and their current engines
Chrome Firefox Baidu UC YunOS Tencent
Rendering Blink Gecko Webkit Webkit Webkit Webkit Engine Blink Blink
JavaScript V8 SpiderMonk V8 V8 JavaScriptC V8 Engine ey / ore IonMonkey
16 © ARM 2015 HTML5 Game Engine as a JS library
. Games and Game Engine are written in JS HTML5 Games . Run in browsers and apps with Webview (or substitutes) HTML5 Game Engine . Biggest concern: Fragmentation of Webview browsers and Webviews Browser . UX/Performance uncontrollable App
. Compatibility not guaranteed Blink/Webkit . Business: Engine cannot control the distribution channel. Others (browsers, apps) Skia V8 do. CPU GPU . Game Engines want to change! Multi-core
17 © ARM 2015 Performance on fragmented browsers and devices
Test data of a popular HTML5 game “Quanmin Guozhan”
best case 38FPS
worst case 21FPS FPS
Blink-based browsers perform
better than Webkit-based browsers
Xiaomi3
Xiaomi3 Xiaomi3 Xiaomi3
iPhone 6 Plus 6 iPhone Samsung Note 4 Note Samsung
iPhone 6 Plus 6 iPhone iPhone 6 Plus 6 iPhone Plus 6 iPhone Samsung Note 4 Note Samsung Samsung Note 4 Note Samsung 4 Note Samsung
QQ browser Cheetah browser System browser Data from Kaixin001.com
18 © ARM 2015 HTML5 Game Engine + Runtime
. Runtime is a component that can be HTML5 Games integrated into browsers/apps HTML5 Game Engine . Games for this runtime can be delivered to browser . Similar to Adobe Flash Model HTML5 Game Runtime Webview . Resolves the business “channel” Browser problem for HTML5 game engine vendors App . However… Blink/Webkit . Business conflict for browsers/apps . UX/Performance/Compatibility concern Skia V8 unresolved . Why browsers/apps will integrate the Runtime? CPU GPU Multi-core . Unsuccessful business model!
19 © ARM 2015 HTML5 Game Engine + Accelerating Runtime
. Not only a distribution and running HTML5 Games platform, but also provides HTML5 Game Engine . Accelerated graphics rendering . Other features as well, e.g. unified WebAudio APIs. Webview Browser HTML5 . Bypasses the original web kernel (Blink App Game or Webkit) in browsers and Webview Runtime Blink/Webkit . Resolve UX / Performance / Compatibility concerns. Skia V8
. Browsers/app are willing (more or less) CPU GPU to integrate it. Multi-core . Successful business model!
20 © ARM 2015 Exploring Key Technologies in the West and China asm.js
. “an extraordinarily optimizable, low- level subset of JavaScript”- asmjs.org . Bringing C/C++ applications and games C/C++ Code to every screen- no installation . Leading game engines ports-Unreal4 function strlen(ptr) { Clang Compiler ptr = ptr|0; and Unity in asm.js and WebGL var curr = 0; LLVM bitcode . New game engines from PlayCanvas curr = ptr; while (MEM8[curr]|0 != 0) { Emscripten . Commercial games in the Google curr = (curr + 1)|0; } asm.js PlayStore that are asm.js return (curr - ptr)|0; JS Engine . Browser vendors providing strong } support including fast paths and AOT WebGL Calls int f(int i) { function f(i) { compilation OpenGL return i + 1; i = i|0; return (i + 1)|0; 22 © ARM 2015 } }
Requirements for asm.js from China
. Inline handwriting asm.js in JS to improve performance HTML5 . Just like inline assembly in C/C++ C/C++ Apps Apps . Compile C/C++ library into asm.js and provide JS API to JS API upper layer apps Emscripten . ARM is working together with C/C++ Library asm.js Mozilla on these requirements Library
23 © ARM 2015 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!
24 © ARM 2015
WebAssembly Evolution
Technology History
Java Timeline .net JVM WebAssembly WebAssembly WebAssembly → native in → asm.js → → native in and out of LLVM native browser browser
WebAssembly
25 © ARM 2015 TurboFan a new JIT inside V8 JavaScript Engine
. TurboFan is now being used inside the V8 engine . Targeting asm.js libraries initially . Focus is now turning to other areas Octane 2.0 zlib 20000 . ARM continues to work with Google on V8
18000 16000 . ~60% improvement for the asm.js based zlib 14000 12000 . Improvement varies with other asm.js tests 10000 . Work in progress 1GHz) to (scaled Score 8000 . 6000 TurboFan is the natural engine to WebAssembly! 24000 24500 25000 25500 26000 26500 27000 27500
Cortex-A15
26 © ARM 2015 WebGL an important technology
. WebGL is a standard from the Khronos Group Comparison of WebGL versus Canvas
. WebGL has been establishing itself over Canvas 250
2D for gaming graphics
100 . Able to handle many more objects on screen WebGL with no loss of frame rate 30 Canvas 2D
. Support in the major western mobile Number of Objects of Number browsers- Chrome, Firefox, Safari and IE 10 FPS 0 50 100
27 © ARM 2015 Source developer.tizen.org 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 28 © ARM 2015
ARM and University of Szeged web research
29 © ARM 2015 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,
30 © ARM 2015 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 31 © ARM 2015 source caniuse.com
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 Mandelbrot with 8 Web Workers . Graph right is normalized to 1GHz 8000 . Web Workers map well on Multi-core systems 7000 6000 . Switching from 2 to 4 cores gets around 2X perf* 5000 4000 . 3000 *Does not take into account effects differing memory systems, 2000 Millisecond Time RAM etc. 1000 Normalized to 1Ghz 0 Samsung Chromebook Chromebook 2 Exynos 5 . Results are dependent on the suitability of the algorithm for Exynos 5 Cortex-A15 5800 Quad Core Dual Core 1.7GHz Cortex-A15/Quad Core large numbers of workers Cortex-A7 big/LITTLE 32 © ARM 2015 2.0Ghz
. SIMD and Parallel JavaScript- RiverTrail
. SIMD.js . A proposed specification for SIMD operations in the JavaScript language var x = float32x4(1, 2, 3.142, . Formerly collaboration between Intel, Mozilla and Google 22.5); . Was biased in favor of SSEx over NEON var y = float32x4(0, 0, 1, 10); . Now a collaboration between ARM, Intel, Google and Mozilla var = SIMD.add(x, y); . Spec is much closer to a level playing field for the industry
. 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
33 © ARM 2015 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
34 © ARM 2015
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
35 © ARM 2015 Summary
. Rendering Engine:
36 © ARM 2015 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
37 © ARM 2015 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