WebAssembly JavaScript API

WebAssembly JavaScript API Wasm

1. Wasm ! simple.wasm

2. Wasm index.html HTML

3. Wasm WebAssembly Wasm

   wat

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

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

   js

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

WebAssembly

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

GitHub instantiate-streaming.html instantiateStreaming() Wasm JavaScript

1

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++ WebAssembly WebAssembly Memory WebAssembly postMessage()

JavaScript Memory ArrayBuffer ( SharedArrayBuffer) ArrayBuffer Memory Memory () WebAssembly.Memory()

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

2. js

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

   initial maximum WebAssembly 64KB 640KB 6.4MB

   WebAssembly ArrayBuffer buffer / 42

   js

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

   WebAssembly true

   js

   data.getUint32(0, true);
   

3. JavaScript 2

Memory.prototype.grow() WebAssembly

memory.grow(1);

Memory RangeError

: ArrayBuffer byteLength Memory.prototype.grow() buffer ( byteLength ) ArrayBuffer ArrayBuffer

JavaScript WebAssembly WebAssembly.Memory Memory 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. instance Instance 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 Memory buffer (Memory.prototype.buffer) Uint32Array

JavaScript Memory 2

• JavaScript
• Memory WebAssembly

WebAssembly Table JavaScript WebAssembly Memory

WebAssembly WebAssembly 1

C/C++ C/C++

WebAssembly

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

WebAssembly 2 (013142) table.wasm

1. table.wasm

   : table.wat

2. HTML template table.html

3. Wasm HTML body <script>

   js

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

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 1 WebAssembly.Module /

JavaScript WebAssembly WebAssembly.Global()

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

2

• 2

  • value: WebAssembly (i32, i64, f32, f64)
  • mutable:

0 mutable i32

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

• 1 N 1 N
• 1 0 1 WebAssembly 1 0 N (Multiple Memories )
• 1 0 1 C WebAssembly 1 0 N
• 1 0 N

WebAssembly

WebAssembly JavaScript API WebAssembly JavaScript JavaScript

• webassembly.org
• WebAssembly
• WebAssembly on Mozilla Research