Recap Modern WebAssembly in CDS 2019

Transcript

1. chrome://modern-webassembly

2. None

3. WebAssembly?

4. aka, WASM [਋ই્]

5. https://blog.logrocket.com/webassembly-how-and-why-559b7f96cd71 WebAssembly? - ਢীࢲ ز੘ೞח ࢜۽਍ ঱য - ׮ܲ ঱য۽

   ࠗఠ ஹ౵ੌ - ୭੸ച غҊ ੌҙࢿ ੓ח ࢿמ - ੗߄झ௼݀౟ܳ ؀୓ ೞ૑ ঋ਺

6. WebAssembly

7. https://blog.logrocket.com/webassembly-how-and-why-559b7f96cd71 WebAssembly? - ਢীࢲ ز੘ೞח ࢜۽਍ ঱য - ׮ܲ ঱য۽

   ࠗఠ ஹ౵ੌ - ୭੸ച غҊ ੌҙࢿ ੓ח ࢿמ - ੗߄झ௼݀౟ܳ ؀୓ ೞ૑ ঋ਺

8. wasm-pack build WAT .wasm

9. None

10. WebAssembly Instructions Stack 0 0 (I32, i32) -> (i32) 1

    (I64, i64) -> () 0 Type 0 1 Type 1 0 Code for Func 0 1 Code for Func 1 1 3 4 5 6 8 0 1 2 3 4 $type0 Memory Type Function Code $func0 i32.store
 i32.load 2 7 ArrayBuffer i32.add
 get_local $p1
 get_local $p1 pop push

11. Value Types i32, i64, f32, f64 Linear Memory Access ii32.load,

    i64.load, f32.load, f64.load, i64.store, f32.store, f64.store, and more Local, Global Variable get_local, set_local, tee_local, get_global, set_global Control constructs and instructions nop, block, loop, if, else, br, br_if, br_table, return, end Calls call, call_indirect Constants i32.const, i64.const, f32.const, f64.const, Operators i32.add, i32.sub, i32.mul, f32.add, f32.sub, f32.mul, f32.div, f32.abs, f64.add, f64.sub, and more

12. https://hacks.mozilla.org/2017/07/memory-in-webassembly-and-why-its-safer-than-you-think/

13. https://hacks.mozilla.org/2017/07/memory-in-webassembly-and-why-its-safer-than-you-think/

14. https://hacks.mozilla.org/2017/07/memory-in-webassembly-and-why-its-safer-than-you-think/

15. https://hacks.mozilla.org/2017/07/memory-in-webassembly-and-why-its-safer-than-you-think/

16. https://hacks.mozilla.org/2017/07/memory-in-webassembly-and-why-its-safer-than-you-think/

17. https://hacks.mozilla.org/2017/07/memory-in-webassembly-and-why-its-safer-than-you-think/

18. https://hacks.mozilla.org/2017/07/memory-in-webassembly-and-why-its-safer-than-you-think/

19. https://blog.logrocket.com/webassembly-how-and-why-559b7f96cd71 WebAssembly? - ਢীࢲ ز੘ೞח ࢜۽਍ ঱য - ׮ܲ ঱য۽

    ࠗఠ ஹ౵ੌ - ୭੸ച غҊ ੌҙࢿ ੓ח ࢿמ - ੗߄झ௼݀౟ܳ ؀୓ ೞ૑ ঋ਺

20. https://www.youtube.com/watch?v=njt-Qzw0mVY

21. https://www.youtube.com/watch?v=njt-Qzw0mVY

22. None

23. Javascript
 Source Code Ignition
 (JS Interpreter) TurboFan
 (Optimization Compiler) Deoptimize

    Optimize
 (Profile Data) Bytecode Optimized
 Code Collecting
 Information Profiling Data Javascript Pipeline

24. Liftoff
 (WebAssembly baseline compiler) Hot Swap Execution
 Immediately WASM TurboFan


    (Optimization Compiler) Off-thread
 Optimization WebAssembly Pipeline
25. None
26. None
27. None

28. https://developers.google.com/web/updates/2019/02/hotpath-with-wasm

29. https://developers.google.com/web/updates/2019/02/hotpath-with-wasm

30. WebAssembly? - ਢীࢲ ز੘ೞח ࢜۽਍ ঱য - ׮ܲ ঱য۽ ࠗఠ

    ஹ౵ੌ - ୭੸ച غҊ ੌҙࢿ ੓ח ࢿמ - ੗߄झ௼݀౟ܳ ؀୓ ೞ૑ ঋ਺

31. WebAssembly Javascript

32. WebAssembly ??

33. https://github.com/ragingwind/wasm-hnpwa

34. None
35. None
36. None

37. Demo

38. WebAssembly

39. Implicit Caching Liftoff
 (WebAssembly baseline compiler) Hot Swap Execution
 Immediately

    WASM TurboFan
 (Optimization Compiler) Off-thread
 Optimization https://www.youtube.com/watch?v=kZrl91SPSpc

40. Implicit Caching Liftoff
 (WebAssembly baseline compiler) Hot Swap Execution
 Immediately

    WASM TurboFan
 (Optimization Compiler) Off-thread
 Optimization HTTP Cache Loads Optimized Module https://www.youtube.com/watch?v=kZrl91SPSpc New Session

41. Implicit Caching

42. Implicit Caching WebAssembly HTTP Cache Keep your URLs stable

43. https://www.youtube.com/watch?v=kZrl91SPSpc Startup Time

44. SharedArrayBuffer Threads Worker
 CPU Core WASM Instance Worker
 CPU Core

    WASM Instance Worker
 CPU Core WASM Instance https://www.youtube.com/watch?v=kZrl91SPSpc atomic.wait atomic.notify

45. Threads in C https://github.com/ragingwind/wasm-hello-world/tree/master/clang-thread

46. Threads in Rust https://github.com/ragingwind/wasm-hello-world/tree/master/rust-thread worker.js lib.rs

47. Threads in Rust https://github.com/ragingwind/wasm-hello-world/tree/master/rust-thread

48. https://medium.com/google-earth/performance-of-web-assembly-a-thread-on-threading-54f62fd50cf7 Threads

49. https://www.youtube.com/watch?v=kZrl91SPSpc Threads

50. Threads https://www.youtube.com/watch?v=kZrl91SPSpc

51. ✅ ❌ Threads

52. SIMD Single Instruction, Multiple Data

53. None

54. https://github.com/google/mediapipe/blob/master/mediapipe/docs/web.md Chrome Canary with #enable-webassembly-simd

55. https://www.youtube.com/watch?v=kZrl91SPSpc

56. https://www.youtube.com/watch?v=kZrl91SPSpc

57. https://www.youtube.com/watch?v=kZrl91SPSpc

58. https://www.youtube.com/watch?v=kZrl91SPSpc

59. https://www.youtube.com/watch?v=kZrl91SPSpc

60. Tooling Updates - Native LLVM + WASM (clang +Binaryen) -

    Asyncify, Using asynchronous APIs - Debugging, WAT format, Source map, Native debugging

61. Native LLVM Backend https://www.youtube.com/watch?v=kZrl91SPSpc

62. Native LLVM Backend https://www.youtube.com/watch?v=kZrl91SPSpc

63. https://dassur.ma/things/c-to-webassembly/

64. Native LLVM Backend https://v8.dev/blog/emscripten-llvm-wasm

65. Native LLVM Backend https://v8.dev/blog/emscripten-llvm-wasm

66. Tooling Updates - Native LLVM + WASM (clang +Binaryen) -

    Asyncify, Using asynchronous APIs - Debugging, WAT format, Source map, Native debugging

67. Asyncify https://www.youtube.com/watch?v=kZrl91SPSpc

68. Asyncify https://www.youtube.com/watch?v=kZrl91SPSpc

69. $ emcc example.c -O3 -o a.html -s ASYNCIFY -s 'ASYNCIFY_IMPORTS=["do_fetch"]'

    Asyncify

70. Tooling Updates - Native LLVM + WASM (clang +Binaryen) -

    Asyncify, Using asynchronous APIs - Debugging, WAT format, Source map, Native debugging

71. WAT Debugging

72. Sourcemap, Native Debugging $ rustc -g --target wasm32-unknown-unknown -O ./src/lib.rs

    -o ./pkg/square.wasm

73. WebAssembly

74. None

75. https://hacks.mozilla.org/2019/11/announcing-the-bytecode-alliance/

76. https://github.com/WebAssembly/interface-types/blob/master/proposals/interface-types/Explainer.md Interface Types

77. https://hacks.mozilla.org/2019/08/webassembly-interface-types/

78. WebAssembly