Downloaded 21 times
Uploaded byAlexandr Skachkov
WebAssembly vs JavaScript: What is faster?
- WebAssembly is a new low-level compilation target that runs at native speed by taking advantage of common hardware capabilities available on a web platform. - While WebAssembly is very fast for pure computations, calling JavaScript from WebAssembly can lead to slowdowns. Interacting with the DOM or host APIs may also be slower than native code. - WebAssembly is best suited for applications that require a lot of computation, are developed with a focus on performance, and have minimal interactions with JavaScript or the DOM. This includes porting existing C/C++ libraries and algorithms to the web.
WebAssembly vs JavaScript: What is faster?
- 1. WEBASSEMBLY VS JAVASCRIPT: WHATIS FASTER? Oleksandr Skachkov @alSkachkov
- 2. . • Itera’s FrontEndTech Lead • WebKit contributor: • Arrow function • Async iterator & generators • Promise.finally • Twitter: @alSkachkov ABOUT ME
- 3. • What wasbefore • WebAssembly key features • Is WebAssembly really fast? • WebAssembly now
- 4. JavaScript one ofthe most popular language
- 9. TRIES TO REPLACEJS asm.js
- 10. SMART PEOPLE SAYS Alwaysbet on JS & WASM
- 11. Always bet onJS WASM?
- 13. • Announced in17 June 2015 • Supported by major Browsers • Developed by WebAssembly Working Group (W3C) • Draft specific published 15 Feb 2018 WebAssembly – New Hope
- 14. What is WebAssembly(aka WASM)?
- 15. WebAssembly is buildtarget
- 17. safe, portable, low-levelcode format designed for efficient execution and compact representation https://webassembly.github.io/spec/intro
- 18. C - Sourcecode
- 19. RUST - Sourcecode
- 20.
- 21.
- 23. Will WebAssembly replaceJavaScript? Not now J
- 24. but WebAssembly willtransform web
- 25. WASM WILL BRINGTO WEB •New languages •Predictable high performance
- 26.
- 27.
- 28.
- 29. LOADING text format <script> blocking load binaryformat fetch non blocking load
- 30. PARSING text format lazy parsing mainthread no streaming API binary format S – expression background threads streaming API
- 31.
- 32. 5 4 32 1
- 33. 5 4 32 1
- 34. PARSING text format lazy parsing mainthread no streaming API binary format S – expression background threads streaming API
- 35. COMPILATION + OPTIMIZATION mainthread optimization after execution background threads offline optimization
- 36. EXECUTION slow at start threads- workers no native threads GC close to native speed threads – workers native threads - future no GC now
- 37. EXECUTION many types access toJS functions access to DOM access to Host API only 4 primitive types access to JS functions no access to DOM no access to Host API
- 38. INTERACTION WITH JAVASCRIPT Wecan use JS function in WASM and WASM function in JS
- 39.
- 40. WHAT IS PERFROMANCEFOR US • LOAD • COMPILE • EXECUTION
- 41. WebAssembly module isdownloaded over Network Size really matter
- 42. WASM module sizeexpected to be smaller than js, but
- 43. SIZE OF “HELLOWORLD”
- 44. SIZE OF “HELLOWORLD” • JavaScript – 98 bytes • pure wasm – wasm 110 bytes + js 321 bytes • Rust ⇒ wasm – wasm 16Kb - 600Kb + js 2 Kb • C ⇒ emcc ⇒ wasm – wasm 22 Kb + js 99 Kb • C#(Blazor/Mono) ⇒ wasm ~ 2 Mb • ReactJS 16.2.0 + React DOM – 97 KB
- 45. WebAssembly is expectedto be fast in compiling
- 46. COMPILING Let’s take moduleand find speed in Mb per second : • JavaScript – 16.5 Mb • WebAssembly – 12.4 Mb
- 47.
- 48. Streaming compiling isexpected even more faster
- 49.
- 50. SUMMARY • Size ofWebAssembly module depends on compiler • WebAssembly compilation is slower to js in Mb/s • WebAssembly has streaming compilation that compile module during network delays • WebAssembly might be parsed out of main thread
- 51. WebAssembly is expectedto be fast in execution
- 52.
- 53. Speedup of theMath operations
- 54.
- 55.
- 56.
- 57. What if calljs function from WebAssembly
- 58. 0, 1, 1,2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233 Fibonaccinumber
- 59.
- 60.
- 61.
- 62.
- 63.
- 64.
- 65.
- 66. CRYPTO - PBKDF2 PBKDF2- Password-Based Key Derivation Function 2 • JS: asmcrypto.js https://github.com/asmcrypto/asmcrypto.js • Native: Browser Web Crypto API • WASM: Rust module with rust-crypto package
- 67.
- 68.
- 69. Convert images https://developer.mozilla.org/en-US/docs/WebAssembly/existing_C_to_wasm Google SeniorDeveloper Advocate @DasSurma
- 70. CONVERT IMAGES • Canvas+ JS: From JPEG to BITMAP by Canvas API and to WEBP by JS (lib webpjs) • Canvas + WASM: From JPEG to BITMAP by Canvas API and to WEBP by WASM (lib libwebp) • Full WASM: JPEG to WEBP by WASM (libs: libjpeg, libwebp)
- 71.
- 72.
- 73. INTERACTION WITH JS PerformanceTab in Chrome Developer Tools https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/
- 74. INTERACTION WITH JS PerformanceTab in Chrome Developer Tools https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/
- 75. Can WebAssembly befaster to Host API? sometimes, if we use WebWorkers
- 76. Can WebAssembly befaster to Host API? sometimes, if we use WebWorkers
- 77.
- 78.
- 79.
- 80. CONVERT IMAGES • CanvasAPI works in main thread and blocks it • WebAssembly does not block main thread
- 81. SUMMARY • WebAssembly hasvery good performance on pure mathematics • Call JS from WebAssembly lead to slow down of the performance • Host API might be slower then WebAssembly in edge cases(!)
- 82. Is WebAssembly slowand useless
- 83. WHAT PROJECT FITSTO WEBASSEMLBY • Requires a lot of computations • Is developed with WebAssembly and high performance in mind • Has small amount of interactions with JavaScript or DOM • Has big C/C++ code base and high performance is not a goal • Fast enough for Browser
- 84.
- 85. CAN WE USEWEBASSEMBLY? Yes we can
- 86. How can weuse WebAssembly?
- 87. USAGE SCENARIOS INWEB • Write faster version of the specific application • Using existing C libraries in browser • Reuse algorithm from service side • Distribute whole application as wasm • Secure your algorithms J
- 88. BUILD TARGET FOR •C/C++ • Rust • C# - Mono and CoreRT • Go • BrainFuck • Even more: https://github.com/appcypher/awesome-wasm-langs
- 89. Ethereum Figma design UnityGoogle Earth Web Audio Modules
- 90. RESOURCES • Articles: • https://hacks.mozilla.org/category/webassembly/ •https://pspdfkit.com/blog/ • ategory/webassembly/ • Site: http://webassembly.org/ • Github: https://github.com/WebAssembly/ • Twitter: @WasmWeekly - WebAssemblyWeekly
- 91. EXAMPLES • PDF Viewer:https://web-preview.pspdfkit.com/standalone • Game: http://webassembly.org/demo/Tanks/ • Garden for Mozilla: https://s3.amazonaws.com/mozilla- games/ZenGarden/EpicZenGarden.html (Unreal Engine 4) • WebSight: https://websightjs.com/ • AutoCAD: https://web.autocad.com/
- 92.
- 93.