Download as PDF, PPTX
Uploaded byIntel® Software
The Next Leap in JavaScript Performance
The document discusses advances in JavaScript performance, including exposing the full power of hardware to JavaScript through techniques like SIMD.js. It describes how improvements in areas like parallel parsing and compilation of JavaScript, parallelizing the browser layout engine, and SIMD support in JavaScript can help close the performance gap with native code. The talk also covers bringing perceptual computing and Internet of Things capabilities to the web platform through standards like the Media Capture Depth Stream extension.
The Next Leap in JavaScript Performance
- 1. The Next Leapin JavaScript Performance Mohammad Reza Haghighat Senior Principal Engineer, Intel Corporation October 20, 2014
- 2. •HTML5 - TheNew Lingua Franca? •Exposing the full power of modern hardware to JavaScript* •Bringing Perceptual Computing to the web platform •Supporting JavaScript programming in Internet of Things (IoT) •Summary Agenda 2
- 3. HTML5 – TheNew Lingua Franca? Native code PC spiral 1991 APPS .exe 2001 WEB HTML, Flash* Web – “Write once, run on any browser” 2009 APPS iOS*, Android*, Windows* App Stores Walled Gardens 2015 WEB HTML5 “Write Once, Run Everywhere” “New open standards created in the mobile era, such as HTML5, will win on mobile devices.” – Steve Jobs “If you want to do something that is universal, no question, world is going HTML5.” – Steve Ballmer “It looks to me like HTML5 will eventually become a way almost all applications are built, including those on new phones.” – Eric Schmidt 3
- 4. Web: The UbiquitousSoftware Platform and the Application Model of the Future Big Data Rich Capabilities & Content Social Contextual Crowdsourced Sensors “Things” 4
- 5. •HTML5 - TheNew Lingua Franca? •Exposing the full power of modern hardware to JavaScript* •Bringing Perceptual Computing to the web platform •Supporting JavaScript programming in Internet of Things (IoT) •Summary Agenda 5
- 6. Achieving ~ 1.5xnative running time via targeting asm.js†, a highly optimizable subset of JavaScript defined by Mozilla Astounding JavaScript* Performance With asm.js asm.js : a highly optimizable low-level subset of JavaScript http://www.unrealengine.com/html5/ Over 1M lines of C/C++ code compiled to JavaScript* by Mozilla* and Epic Epic* Games Unreal Engine* 3 † Courtesy of Mozilla Alon Zakai & Luke Wagner (http://people.mozilla.org/~lwagner/gdc-pres/gdc-2014.html#/) asm.js Emscripten JavaScript* web LLVM Bitcode Very efficient code generated by Firefox* JIT 6
- 7. Modern processors utilizeparallelism to deliver high performance within a constrained power budget The March of Parallelism 2002 2006 2008 2012 32 nm Tock 2010 2011 2012 2013 22 nm Tick 22 nm Tock Intel® Advanced Vector Extensions AVX2 FMA and integer support AVX 256-bit floating point 1X=128-bit Since 2001 Next Gen Intel® Xeon PhiTM AVX-512 512-bit vectors 8X peak SIMD operations per core over 4 generations 2X 2X 2X 7
- 8. Optimizing Web Runtimesfor Parallelism Web runtimes need to be parallel end-to-end Parse + build DOM JavaScript* Layout Engine Render GPU: parallel CPU: mainly single-threaded 35% 33% 21% 11% Render 35% Layout 33% Other 21% JS 11% •HTML5 runtimes of today are not scalable with number of cores •Need parallelism for both responsiveness and energy efficiency 8
- 9. Parallel Parsing andCompilation Background JIT compilers now in Chrome*, Firefox, Internet Explorer*, Safari* PESPMA 2009 Four threads for JavaScript* parsing and compilation JS and GFX execution Epic* Citadel* profile on Firefox* 43.6 16.6 12.8 6.7 6.4 6.2 4.6 2.2 0.9 Cycle Breakdown by Categories js::compile gfx::compile os::others js::parse js::others browser::others os::mem js::jitted gfx::exec bootstrap launch 4 threads 1 thread 9
- 10. Layout Engine: aperformance bottleneck Mozilla* Firefox* Page-Load Tests Zimbra* Collaboration Suite* ul em {color:blue} CSS rule matching ~33% of the layout HotPar 2010 Browser layout engine is a bottleneck but amenable to parallelism 10 Layout Engine ~42% execution Towards Parallelizing the Browser Layout Engine
- 11. Parallel JavaScript* •Startedat Intel Labs, now with Mozilla* •Extends JavaScript* with a data-parallel API •Designed for multi-core CPUs and GPUs •Simple, portable, and secure Array increment example: A.map(function(a) {return a+1;}); A.mapPar(function(a) {return a+1;}); Sequential Parallel Accelerated animation of 3D avatars: more characters and more realism Parallel JavaScript goal is to enable data-parallelism in web applications 11
- 12. SIMD – SingleInstruction, Multiple Data SIMD operations deliver great performance & power efficiency Scalar Operation Cx Cy Cz Cw = = = = Ax Ay Az Aw Bx By Bz Bw + + + + Cx Cy Cz Cw Ax Ay Az Aw Bx By Bz Bw + = SIMD Operation of Vector Length 4 Intel® Architecture currently has SIMD operations of vector length 4, 8, 16 12
- 13. SIMD - AGap Between JavaScript* and Native SIMD in JavaScript further reduces the performance gap Software and workloads used in performance tests may have been optimized for performance only on Intel microprocessors. Performance tests, such as SYSmark* and MobileMark*, are measured using specific computer systems, components, software, operations and functions. Any change to any of those factors may cause the results to vary. You should consult other information and performance tests to assist you in fully evaluating your contemplated purchases, including the performance of that product when combined with other products. A Google*/Intel/Mozilla* ECMA TC39 Joint Project •Bugzilla*: https://bugzilla.mozilla.org/show_bug.cgi?id=894105 •John McCutchan’s strawman proposal: http://wiki.ecmascript.org/doku.php?id=strawman:simd_number C++ code for list average “Proposed” JavaScript* code SIMD code by ICC 13
- 14. SIMD.JS – TheAPI † Initial support for float32x4 and int32x4 Our SIMD prototype delivers 3x~4x Mandelbrot speedup† Our Firefox* Prototype 14
- 15. Demo: Combining SIMDand Higher-Level Parallelism SIMD speedup is nicely multiplied by WebWorkers† † Source: Intel® Peter Jensen : https://github.com/PeterJensen/mandelbrot WW: Number of WebWorkers Our Chromium* Prototype 15
- 16. SIMD Speedups onour Chromium* Prototype 3.2 3.6 3.8 3.9 4.6 5.0 6.0 9.5 3.2 3.8 3.4 6.1 6.5 5.0 5.6 11.8 6.8 3.1 2.7 4.5 4.2 3.8 5.4 9.3 0 2 4 6 8 10 12 14 Transpose4x4 AOBench Mandelbrot MatrixMultiplication VertexTransform Average ShiftRows Matrix4x4Inverse SIMD x-times faster than non-SIMD 3rd Generation Intel® Core™ i7 processor (3667U)@ 2.00 GHz, 32-bit, Ubuntu* 13 3rd Generation Intel® Core™ i7 processor (3667U)@ 2.00 GHz, 64-bit, Ubuntu* 13 Intel® Atom™ processor Z3770 @ 1.46GHz, Android* 4.4 Excellent early results while still focused on functionality Theoretical speedup limit is 4 SIMD.JS benchmarks: https://github.com/johnmccutchan/ecmascript_simd/tree/master/src/benchmarks 16
- 17. SIMD.JS Proposal andPolyfill API SIMD Number (Google’s John McCutchan & Intel’s Peter Jensen): http://wiki.ecmascript.org/doku.php?id=strawman:simd_number Polyfill API: https://github.com/johnmccutchan/ecmascript_simd float32x4, int32x4, Float32x4Array, Int32x4Array Constructors: float32x4(x,y,z,w) float32x4.zero() float32x4.splat(s) Operations: abs, neg, add, sub, mul, div, clamp, min, max, reciprocal, reciprocalSqrt, scale, sqrt, shuffle, shuffleMix, withX, withY, withZ, withW, lessThan, lessThanOrEqual, equal, notEqual, greaterThanOrEqual, greaterThan, bitsToInt32x4, toInt32x4, … The joint Google*/Intel/Mozilla* SIMD.JS proposal was approved to advance to the next stage of ECMAScript* TC39 standardization stage† † A copy of the TC39 Presentation: http://esdiscuss.org/notes/2014-07/simd-128-tc39.pdf 17
- 18. Emscripten now targetsSIMD.JS Emscripten generates SIMD.JS from C++ SIMD intrinsics & auto-vectorized code Near-native SIMD.JS speedup C/C++ JavaScript* 1.00 2.03 7.18 8.13 0 2 4 6 8 10 Speedup over Scalar JS Scalar JS Scalar C++ SIMD JS SIMD C++ 18
- 19. Crosswalk in Brief Application Runtime Follow us at @xwalk_project crosswalk-project.org Open Source, using Blink* & Chromium* Today on Android* and Tizen* Easy addition of extensible APIs Easy access to device APIs Intel® platform capabilities Latest HTML5 features in packaged web apps Focuses on security, performance and standards compliance Based on web technologies: HTML5, CSS3, JavaScript* Updated & released to the latest Chromium every 6 weeks 19
- 20. Intel® XDK –Cross-platform Development Kit Develop, debug, profile, and build responsive web & hybrid apps Free at http://xdk.intel.com Remote debugging & profiling 20
- 21. •HTML5 - TheNew Lingua Franca? •Exposing the full power of modern hardware to JavaScript* •Bringing Perceptual Computing to the web platform •Supporting JavaScript programming in Internet of Things (IoT) •Summary Agenda 21
- 22. Toward Perceptual Computing† Devices sense & perceive user actions in a natural & intuitive way † Source: Intel® Perceptual Computing SDK: www.intel.com/software/perceptual Speech Recognition Close-Range Tracking Gesture Recognition 2D/ 3D Object Tracking Facial Analysis 22
- 23. Reinventing Everyday Usages Perceptual Computing opens up new dimensions in interacting with machine Learning & Education 3D Scanning and Sharing Scan it Share it Customize & Print it Immersive Collaboration Gaming Out-of-reach Device Input 23
- 24. Demos: Media CaptureDepth Stream Extension† † Source: Intel® Ningxin Hu: https://github.com/huningxin/depth_stream_examples WebRTC Google* Code: http://webrtc.googlecode.com/svn/trunk/samples/js/demos/html/ Magic Xylophone: Soundstep*.com: http://www.soundstep.com/blog/experiments/jsdetection/ 24
- 25. Enabling 3D Cameraon Web Platform 3D Camera •Beyond color: additional per-pixel distance •Intel® RealSense™ on PC & tablets soon Applications •Real-time hand/finger/object tracking •3D scanning •Video conferencing Depth on Web Platform† •Media Capture Depth Stream Extension •Rendering & post-processing: <video>, <canvas>, WebGL* and SIMD.JS •Streaming: transmit as MediaStream via WebRTC RTCPeerConnection † Source: Intel® Ningxin Hu: https://github.com/huningxin/depth_stream_examples 25
- 26. Proposed Media CaptureDepth Stream Extension† † Source: http://w3c.github.io/mediacapture-depth/ Web Application Browser or HTML5 runtime RGB Stream Depth Stream getUserMedia (WebRTC) API 26
- 27. Gaming Wireless Displayfor the Web Unlock exciting new user experiences in HTML5 Presentation † Big Buck Bunny video: http://www.bigbuckbunny.org/ Media Sharing/Casting† 27
- 28. •Connects web contentto screens around you •Hides display connection technologies from the developer •Apple* AirPlay*, Microsoft* PlayTo*, Google* Chromecast*, Miracast*, Intel® Widi •Simple, high level API, easy to use http://webscreens.github.io/presentation-api/ HTML5 Presentation API Proposal† † Source: Intel® Dominik Röttsches New standards-based feature for the cross-platform web 28
- 29. •HTML5 - TheNew Lingua Franca? •Exposing the full power of modern hardware to JavaScript* •Bringing Perceptual Computing to the web platform •Supporting JavaScript programming in Internet of Things (IoT) •Summary Agenda 29
- 30. Intel® XDK IoTEdition Companion Apps Streamlined Workflow Design, Test, and Build Tools •Quick start samples and templates •Built-in editor and emulators •UI Frameworks and Apache Cordova* APIs •Test and debug tools •Integration with Cloud Services APIs Design and build cross-platform companion apps easily for Android*, iOS*, and Windows* 30
- 31. Intel® XDK IoTEdition JavaScript* apps on IoT devices Integrated Development Environment Create, Debug, and Run Tools • JavaScript allows easy on-board app development and deployment for many IoT devices • Use JavaScript to define behavior of IoT device • Deploy, run, debug on IoT device with JavaScript • Integration with cloud, web services, and sensors through JavaScript APIs IoT Device Edit JavaScript app Send app to device Run app remotely Remote debug Development Platform Development System 31
- 32. Internet of Things(IoT) Device (Intel® Galileo): •PWM Led Controller on I2C bus •RGB Led •Node.js with Socket.io server HTML App (Lenovo* K900): •Socket.io connection to IoT device •Change lighting color •Cordova* App Both made using: Demo: Programming Internet of Things using Intel® XDK IoT Edition † Source: Intel® Dan Yocom: http://xdk-software.intel.com/iot_edition_demo_video RGB Lighting† Intel® XDK IoT Edition 32
- 33. •HTML5 - TheNew Lingua Franca? •Exposing the full power of modern hardware to JavaScript* •Bringing Perceptual Computing to the web platform •Supporting JavaScript programming in Internet of Things (IoT) •Summary Agenda 33
- 34. •HTML5 is closingthe gaps with native models •SIMD in JavaScript* enables a large new class of high-performance apps •JavaScript is about to get a lot faster for such domains as gaming •Depth Camera support in HTML5 WebRTC enables exciting use cases •JavaScript is proliferating rapidly in Internet of Things •Intel® XDK supports end-to-end programming for Internet of Things •HTML5 is the application model of the future Summary 34
- 35. Web: The UbiquitousSoftware Platform and the Application Model of the Future Big Data Rich Capabilities & Content Social Contextual Crowdsourced Sensors “Things” 35
- 36. Download Firefox* Nightlyand experience† the benefits of SIMD.JS Leverage the power of SIMD.JS through Intel® XDK and Crosswalk Download Intel® XDK free at http://xdk.intel.com Call to Action † SIMD.JS demos: http://peterjensen.github.io/idf2014-simd 36
- 37. Intel® Developer Zone •Free tools and code samples •Technical articles, forums and tutorials •Connect with Intel and industry experts •Get development support •Build relationships Tools. Knowledge. Community. software.intel.com 37
- 38. Legal Disclaimer INFORMATIONIN THIS DOCUMENT IS PROVIDED IN CONNECTION WITH INTEL PRODUCTS. NO LICENSE, EXPRESS OR IMPLIED, BY ESTOPPEL OR OTHERWISE, TO ANY INTELLECTUAL PROPERTY RIGHTS IS GRANTED BY THIS DOCUMENT. EXCEPT AS PROVIDED IN INTEL'S TERMS AND CONDITIONS OF SALE FOR SUCH PRODUCTS, INTEL ASSUMES NO LIABILITY WHATSOEVER AND INTEL DISCLAIMS ANY EXPRESS OR IMPLIED WARRANTY, RELATING TO SALE AND/OR USE OF INTEL PRODUCTS INCLUDING LIABILITY OR WARRANTIES RELATING TO FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR INFRINGEMENT OF ANY PATENT, COPYRIGHT OR OTHER INTELLECTUAL PROPERTY RIGHT. A "Mission Critical Application" is any application in which failure of the Intel Product could result, directly or indirectly, in personal injury or death. SHOULD YOU PURCHASE OR USE INTEL'S PRODUCTS FOR ANY SUCH MISSION CRITICAL APPLICATION, YOU SHALL INDEMNIFY AND HOLD INTEL AND ITS SUBSIDIARIES, SUBCONTRACTORS AND AFFILIATES, AND THE DIRECTORS, OFFICERS, AND EMPLOYEES OF EACH, HARMLESS AGAINST ALL CLAIMS COSTS, DAMAGES, AND EXPENSES AND REASONABLE ATTORNEYS' FEES ARISING OUT OF, DIRECTLY OR INDIRECTLY, ANY CLAIM OF PRODUCT LIABILITY, PERSONAL INJURY, OR DEATH ARISING IN ANY WAY OUT OF SUCH MISSION CRITICAL APPLICATION, WHETHER OR NOT INTEL OR ITS SUBCONTRACTOR WAS NEGLIGENT IN THE DESIGN, MANUFACTURE, OR WARNING OF THE INTEL PRODUCT OR ANY OF ITS PARTS. Intel may make changes to specifications and product descriptions at any time, without notice. Designers must not rely on the absence or characteristics of any features or instructions marked "reserved" or "undefined". Intel reserves these for future definition and shall have no responsibility whatsoever for conflicts or incompatibilities arising from future changes to them. The information here is subject to change without notice. Do not finalize a design with this information. The products described in this document may contain design defects or errors known as errata which may cause the product to deviate from published specifications. Current characterized errata are available on request. Contact your local Intel sales office or your distributor to obtain the latest specifications and before placing your product order. Copies of documents which have an order number and are referenced in this document, or other Intel literature, may be obtained by calling 1-800-548-4725, or go to: http://www.intel.com/design/literature.htm Intel, Core, Atom, Xeon Phi, RealSense, Look Inside and the Intel logo are trademarks of Intel Corporation in the United States and other countries. *Other names and brands may be claimed as the property of others. Copyright ©2014 Intel Corporation. 38