WebAssembly JavaScript API

WebAssembly Javascript API wasm

1. wasm simple.wasm

2. wasm index.html HTML

3. wasm WebAssembly wasm

   wasm

   (module
     (func $i (import "my_namespace" "imported_func") (param i32))
     (func (export "exported_func")
       i32.const 42
           call $i))
   

4. $i my_namespace.imported_func wasm JavaScript HTML <script></script>

   js

   const importObject = {
     my_namespace: { imported_func: (arg) => console.log(arg) },
   };
   

WebAssembly

Firefox 58 WebAssembly WebAssembly.compileStreaming() WebAssembly.instantiateStreaming() / Response ArrayBuffer

GitHub instantiate-streaming.html instantiateStreaming() Wasm JavaScript

WebAssembly.instantiateStreaming(fetch("simple.wasm"), importObject).then(
  (obj) => obj.instance.exports.exported_func(),
);

WebAssembly exported_func JavaScript imported_func WebAssembly 42 WebAssembly

Wasm

WebAssembly.compile()/WebAssembly.instantiate()

/ Wasm ArrayBuffer

fetch("simple.wasm")
  .then((response) => response.arrayBuffer())
  .then((bytes) => WebAssembly.instantiate(bytes, importObject))
  .then((results) => {
    results.instance.exports.exported_func();
  });

wasm

Firefox 54+ Wasm wasm://

[]

WebAssembly WebAssembly

WebAssembly C/C++

C/C++ C/C++ WebAssembly WebAssembly WebAssembly postMessage() Window Worker

JavaScript Memory ArrayBuffer SharedArrayBuffer ArrayBuffers Web Memory WebAssembly.Memory() shared

1. HTML memory.html <script></script>

2. js

   const memory = new WebAssembly.Memory({ initial: 10, maximum: 100 });
   

   WebAssembly 64KB 640KB 6.4MB

   WebAssembly ArrayBuffer getter / setter 42

   js

   const data = new DataView(memory.buffer);
   data.setUint32(0, 42, true);
   

   true WebAssembly

   js

   data.getUint32(0, true);
   

3. JavaScript

Memory.prototype.grow() WebAssembly

memory.grow(1);

RangeError

ArrayBuffer byteLength Memory.prototype.grow() getter ArrayBuffer byteLength ArrayBuffer

JavaScript WebAssembly.Memory WebAssembly Instance.prototype.exports

WebAssembly memory.wasm

1. memory.wasm

   memory.wat

2. memory.html wasm

   js

   WebAssembly.instantiateStreaming(fetch("memory.wasm"), {
     js: { mem: memory },
   }).then((results) => {
     // 
   });
   

3. accumulate() mem

   js

   const summands = new DataView(memory.buffer);
   for (let i = 0; i < 10; i++) {
     summands.setUint32(i * 4, i, true);
   }
   const sum = results.instance.exports.accumulate(0, 10);
   console.log(sum);
   

Memory.prototype.buffer DataView

JavaScript

• JavaScript
• WebAssembly

WebAssembly JavaScript WebAssembly

WebAssembly WebAssembly

C/C++ C/C++

WebAssembly

Table.prototype.set() Table.prototype.grow() JavaScript wasm JavaScript Table.prototype.get()

WebAssembly 0 13 1 42 table.wasm

1. table.wasm

   table.wat

2. HTML table.html.

3. wasm HTML body <script>

   js

   WebAssembly.instantiateStreaming(fetch("table.wasm")).then((results) => {
     // 
   });
   

4. js

   const tbl = results.instance.exports.tbl;
   console.log(tbl.get(0)()); // 13
   console.log(tbl.get(1)()); // 42
   

Table.prototype.get()

WebAssembly JavaScript WebAssembly.Module /

JavaScript WebAssembly WebAssembly.Global()

const global = new WebAssembly.Global({ value: "i32", mutable: true }, 0)

• • value WebAssembly i32i64f32 f64
  • mutable

i32 0

Global.value 42 global.wasm incGlobal() 43 1

const output = document.getElementById("output");

function assertEq(msg, got, expected) {
  const result =
    got === expected
      ? `SUCCESS! Got: ${got}\n`
      : `FAIL!\nGot: ${got}\nExpected: ${expected}\n`;
  output.innerText += `Testing ${msg}: ${result}`;
}

assertEq("WebAssembly.Global exists", typeof WebAssembly.Global, "function");

const global = new WebAssembly.Global({ value: "i32", mutable: true }, 0);

WebAssembly.instantiateStreaming(fetch("global.wasm"), { js: { global } }).then(
  ({ instance }) => {
    assertEq(
      "getting initial value from wasm",
      instance.exports.getGlobal(),
      0,
    );
    global.value = 42;
    assertEq(
      "getting JS-updated value from wasm",
      instance.exports.getGlobal(),
      42,
    );
    instance.exports.incGlobal();
    assertEq("getting wasm-updated value from JS", global.value, 43);
  },
);

WebAssembly WebAssembly

• N N
• 0-1 WebAssembly 0-N
• 0-1 C WebAssembly 0-N
• 0-N

WebAssembly JavaScript API JavaScript WebAssembly JavaScript WebAssembly

• webassembly.org
• WebAssembly
• Mozilla Research WebAssembly