WebAssembly vs JavaScript: What is faster?
5 likes1,498 views
- 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: WHAT IS FASTER? Oleksandr Skachkov @alSkachkov
- 2. . • Itera’s FrontEnd Tech Lead • WebKit contributor: • Arrow function • Async iterator & generators • Promise.finally • Twitter: @alSkachkov ABOUT ME
- 3. • What was before • WebAssembly key features • Is WebAssembly really fast? • WebAssembly now
- 4. JavaScript one of the most popular language
- 9. TRIES TO REPLACE JS asm.js
- 10. SMART PEOPLE SAYS Always bet on JS & WASM
- 11. Always bet on JS WASM?
- 13. • Announced in 17 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 build target
- 17. safe, portable, low-level code format designed for efficient execution and compact representation https://webassembly.github.io/spec/intro
- 18. C - Source code
- 19. RUST - Source code
- 21. fast to load Byte code
- 23. Will WebAssembly replace JavaScript? Not now J
- 24. but WebAssembly will transform web
- 25. WASM WILL BRING TO WEB •New languages •Predictable high performance
- 28. LOADING
- 29. LOADING text format <script> blocking load binary format fetch non blocking load
- 30. PARSING text format lazy parsing main thread no streaming API binary format S – expression background threads streaming API
- 31. 3 2 1
- 32. 5 4 3 2 1
- 33. 5 4 3 2 1
- 34. PARSING text format lazy parsing main thread no streaming API binary format S – expression background threads streaming API
- 35. COMPILATION + OPTIMIZATION main thread 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 to JS 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 We can use JS function in WASM and WASM function in JS
- 39. IS WEBASSEMBLY REALLY FAST?
- 40. WHAT IS PERFROMANCE FOR US • LOAD • COMPILE • EXECUTION
- 41. WebAssembly module is downloaded over Network Size really matter
- 42. WASM module size expected to be smaller than js, but
- 43. SIZE OF “HELLO WORLD”
- 44. SIZE OF “HELLO WORLD” • 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 expected to be fast in compiling
- 46. COMPILING Let’s take module and find speed in Mb per second : • JavaScript – 16.5 Mb • WebAssembly – 12.4 Mb
- 47. COMPILING
- 48. Streaming compiling is expected even more faster
- 50. SUMMARY • Size of WebAssembly 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 expected to be fast in execution
- 52. Simple cases
- 53. Speedup of the Math operations
- 57. What if call js function from WebAssembly
- 58. 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233 Fibonaccinumber
- 59. SLOWDOWNtimes
- 60. Complex case
- 61. Only 4 types
- 62. Source Map
- 64. SOURCE MAP
- 65. Crypto
- 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. CRYPTO - PBKDF2
- 68. Convert images
- 69. Convert images https://developer.mozilla.org/en-US/docs/WebAssembly/existing_C_to_wasm Google Senior Developer 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)
- 72. Why?
- 73. INTERACTION WITH JS Performance Tab in Chrome Developer Tools https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/
- 74. INTERACTION WITH JS Performance Tab in Chrome Developer Tools https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/
- 75. Can WebAssembly be faster to Host API? sometimes, if we use WebWorkers
- 76. Can WebAssembly be faster to Host API? sometimes, if we use WebWorkers
- 79. Why?
- 80. CONVERT IMAGES • Canvas API works in main thread and blocks it • WebAssembly does not block main thread
- 81. SUMMARY • WebAssembly has very 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 slow and useless
- 83. WHAT PROJECT FITS TO 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
- 85. CAN WE USE WEBASSEMBLY? Yes we can
- 86. How can we use WebAssembly?
- 87. USAGE SCENARIOS IN WEB • 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 Unity Google 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. THANKS!
- 93. QUESTIONS?