Comparing performance of WebAssembly with JavaScript in different aspect of this technologies

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

20. S - Expression
WAT?

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

26. WebAssembly key features

27. HOW ENGINE WORKS
JS
WebAssembly

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

49. STREAMING COMPILING

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

54. SPEEDUP
times
Chrome 69

55. SPEEDUP
times
Firefox 62

56. SPEEDUP
times
Safari 11.11

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

63. Source Map
https://github.com/mozilla/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)

71. CONVERT IMAGES
Times
Iterations

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

77. CONVERT IMAGES
Timetoconvert400imagesinseconds
Workers

78. CONVERT IMAGES
Timetoconvert400imagesinseconds
Workers

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

84. WEBASSEMBLY RIGHT NOW

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?