WebAssembly Disentangled

This talk gives a rough overview over the internal structure of a WebAssembly module. It describes the sections in a WebAssembly module and their purpose. A recording of this talk is available on YouTube: https://youtu.be/OekKui_QOpU

Transcript

1. Proprietary + Confidential WebAssembly Disentangled Andreas Haas V8 Team @v8js
2. webassembly.github.io/spec/
3. const fetchPromise = fetch("fibonacci.wasm"); const {instance} = await WebAssembly.instantiateStreaming(fetchPromise); const result = instance.exports.fibonacci(42); Basic instantiation Source: https://developers.google.com/web/updates/2018/04/loading-wasm
4. fibonacci.wasm code 00001010... Where is the function fibonacci? export ... "fibonacci", function, 2 ... ? instance.exports.fibonacci(42);
5. fibonacci.wasm code 00001010... export ... "fibonacci", function, 2 ... instance.exports.fibonacci(42); Informally: use valueOf of JavaScript objects to create WebAssembly values Drop unneeded parameters Use 0 for missing parameters instance.exports.fibonacci(a, b, c); instance.exports.fibonacci(); How to call WebAssembly functions
6. fibonacci.wasm code 00001010... type How many parameters are needed? function ... 2, int32, float32, 1, int32 ... 4, 2, 1, 0, 2 signature • number of parameters • parameter types • number of returns (0 or 1) • return types function section • number functions • signature index for each function
7. fibonacci.wasm code 00001010... import How can WebAssembly call JavaScript? "myImport", "myFunc", function const fetchPromise = fetch("fibonacci.wasm"); const f = _ => 5; WebAssembly.instantiateStreaming(fetchPromise, {myImport: {myFunc: f}}); const g = (a, b) => a + b; WebAssembly.instantiateStreaming(fetchPromise, {myImport: {myFunc: g}}); function also defines the signature of imports type
8. • Also WebAssembly functions can be imported ◦ Signatures have to match ◦ Calls are nearly as fast as internal calls What about calling from WebAssembly to WebAssembly? WebAssembly instance WebAssembly instance call ? call ? with WebAssembly.Table
9. fibonacci.wasm code 00001010... table WebAssembly.Table anyfunc, has_maximum, 10, 20 export "myTab", table, 0 element initializes the table const table = instance.exports.myTab;
10. second.wasm code 00001010... import WebAssembly.Table (2) "myImports", "myTab", table element add more entries to the table const fibInstance = ...; // first instance const table = fibInstance.exports.my_tab; const promise = fetch("second.wasm"); const {instance} = await WebAssembly.instantiateStreaming( promise, {myImports: {myTab: table}});
11. • WebAssembly.Table can also contain JavaScript functions • Calls through WebAssembly.Table are slower (indirect calls) ◦ Signature is checked at runtime • AnyRef proposal: Allow WebAssembly to store arbitrary JavaScript objects in tables WebAssembly.Table (3)
12. fibonacci.wasm code 00001010... memory WebAssembly.Memory has_maximum, 10, 20 // 64KiB pages export "myMem", memory, 0 data initializes the memory import "myImports", "myMem", memory
13. fibonacci.wasm code 00001010... global Other sections int64, mutable, 10 export "myGlobal", global, 5 start function function executed at the end of instantiation import "myImports", "myGlobal", global
14. nocode.wasm Do we need the code section? export "print", function, 0 import "myImports", "myFun", function type 2, int32, float32, 1, int32 const fetchPromise = fetch("nocode.wasm"); const {instance} = await WebAssembly.instantiateStreaming( fetchPromise, {my_imports: {my_fun: console.log}}); const result = instance.exports.print(42); > 42 function 0, 0
15. Proprietary + Confidential Thank You @v8js