WebAssembly JavaScript API

, WebAssembly JavaScript API, wasm- web-.

1. wasm-! simple.wasm .

2. , wasm- HTML- index.html ( HTML ).

3. , , ( WebAssembly wasm):

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

4. import - $i imports.imported_func. JavaScript-, wasm-. <script></script> HTML-, :

   js

   var importObject = {
     imports: { imported_func: (arg) => console.log(arg) },
   };
   

wasm-

Firefox 58 - () WebAssembly . WebAssembly.compileStreaming() WebAssembly.instantiateStreaming(). , - , (Response) ArrayBuffer .

(. instantiate-streaming.html GitHub ) instantiateStreaming() wasm-, JavaScript , , . .

:

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

WebAssembly- exported_func, JavaScript- imported_func, (42), WebAssembly. , WebAssembly, !

wasm-

, WebAssembly.compile / WebAssembly.instantiate.

-, ArrayBuffer wasm-.

:

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://".

[]

Firefox, wasm- , wasm ( , , , ..). . WebAssembly debugging with Firefox DevTools -.

WebAssembly, , (Linear Memory), . , . C/C++ .

C/C++ , , WebAssembly ( ) , WebAssembly. web- ( WebAssembly) .

JavaScript-, WebAssembly ArrayBuffer c . - . , WebAssembly.Memory(), ().

.

HTML ( HTML ) memory.html. <script></script> .

1. , :

   js

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

   (initial) (maximum) 64KB. , 640KB, 6.4MB.

   WebAssembly getter/setter buffer, ArrayBuffer. , 42 , :

   js

   new Uint32Array(memory.buffer)[0] = 42;
   

   :

   js

   new Uint32Array(memory.buffer)[0];
   

2. - , , , JavaScript-.

Memory.prototype.grow(), ( 64KB) WebAssembly:

memory.grow(1);

, , WebAssembly.RangeError. , .

, . , . , JavaScript- WebAssembly c WebAssembly.Memory , ( Instance.prototype.exports).

, , WebAssembly- , , JavaScript- , wasm- .

1. memory.wasm .

   : memory.wat.

2. memory.html , wasm-:

   js

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

3. , , (mem), accumulate() . , :

   js

   var i32 = new Uint32Array(memory.buffer);
   
   for (var i = 0; i < 10; i++) {
     i32[i] = i;
   }
   
   var sum = results.instance.exports.accumulate(0, 10);
   console.log(sum);
   

, Uint32Array buffer (Memory.prototype.buffer), .

, JavaScript . :

• JavaScript- .
• , WebAssembly.

WebAssembly - , JavaScript WebAssembly . , , , , .

, , . WebAssembly, WebAssembly - - . .

C/C++, . C/C++, , , . , , .

, WebAssembly , . , , .

Table.prototype.set(), , Table.prototype.grow(), , . "- " , . Table.prototype.get() JavaScript- wasm-.

- WebAssembly, : 0 13, 1 42.

1. table.wasm .

   : table.wat.

2. HTML table.html.

3. , , wasm-, <script> :

   js

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

4. - , :

   js

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

, , . , Table.prototype.get(), .

WebAssembly , JavaScript WebAssembly (WebAssembly.Module) . , . WebAssembly JavaScript-, WebAssembly.Global(), :

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

, 2 :

• , 2 , :

  • value: , , WebAssembly i32, i64, f32, f64.
  • mutable: , .

• , . .

? , i32 0.

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

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

function assertEq(msg, got, expected) {
  output.innerHTML += `Testing ${msg}: `;
  if (got !== expected)
    output.innerHTML += `FAIL!<br>Got: ${got}<br>Expected: ${expected}<br>`;
  else output.innerHTML += `SUCCESS! Got: ${got}<br>`;
}

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 0N (. ).
• 0 1 - " " /++ . WebAssembly 0N .
• 0-N - , .

, .

- WebAssembly JavaScript API WebAssembly JavaScript, , , . .

• webassembly.org
• WebAssembly
• WebAssembly Mozilla Research