WebAssembly profile

Official description: WebAssembly is a low-level assembler like language with a compact binary format that runs close to native performance and provides a compilation target for languages such as C/C ++/rust/ Go so that they can run in Web browsers. It is designed to coexist with JavaScript, allowing the two to work together.

Opacity:

WebAssembly is a new strongly typed programming language that has a separate virtual machine runtime in the browser. Other programming languages can compile source code into WebAssembly binary bytecode in wASM format (not machine code) using a specific WebAssembly compiler. The WASM format is intermediate code similar to Java code compiled into a. Class file, and can be used with and mixed with JS (you can call JS from WebAssembly as well as WebAssembly from JS).

WebAssembly Reference: developer.mozilla.org/zh-CN/docs/…

Wat and wASM binary bytecode supplement. Wasm is a WebAssembly binary format, and the WebAssembly tool chain has a readable text format. Wat or. Wast. Because. Wasm itself is a binary format, you cannot see the code or the generated intermediate code. You need to view the intermediate code in. Wat or. Using github.com/webassembly…

How does C/C ++ code compile into.wASM bytecode

Can use Emscripten compiler to compile c/c + + code into WebAssembly format binary bytecodes Emscripten official: emscripten.org/index.html

C code to compile online demos: wasdk. Making. IO/WasmFiddle /

How do I load and run. Wasm code

WebAssembly is not currently integrated

The only way to do this currently is to create an ArrayBuffer containing the WebAssembly module binaries and compile it using webAssembly.instantiate ().

Wasm bytecode

Suppose you have a WebAssembly module called Simple. wasm on your network. We can easily fetch it using the fetch() global function, which returns a promise that can be parsed as a Response object. We can convert the response to a typed array using the arrayBuffer() function, which returns a promise that can be parsed as a typed array. Finally, we compile and instantiate the typed array in one step using the webassembly.instantiate () function.

Code Example 1

fetch('module.wasm').then(response =>
   response.arrayBuffer()
).then(bytes =>
  WebAssembly.instantiate(bytes, importObject)
).then(results => {
  // Do something with the compiled results!
});

Copy the code

Code Example 2 (encapsulating a generic load method)

// Encapsulates a generic load method
function fetchAndInstantiate(url, importObject) {
  return fetch(url).then(response =>
    response.arrayBuffer()
  ).then(bytes =>
    WebAssembly.instantiate(bytes, importObject)
  ).then(results =>
    results.instance
  );
}
Copy the code

// Reuse general loading method, simple and practical
fetchAndInstantiate('module.wasm', importObject).then(function(instance) {
  ...
})
Copy the code

Let’s assume that our module is called simple.wasm. 1. Create an instance of XMLHttpRequest() and use its open() method to open a request — set the request method to GET and declare the path to the file we want to retrieve. The key is to use the responseType property to set the responseType to ‘arraybuffer’. 3. Next use xmlHttprequest.send () to send the request. 4. After the response has been downloaded, we use the onload event handler to call a function where we get the array cache from the Response property and pass it to WebAssembly.instantiate() just like we did with Fetch.

Sample code:

request = new XMLHttpRequest();
request.open('GET'.'simple.wasm');
request.responseType = 'arraybuffer';
request.send();

request.onload = function() {
  var bytes = request.response;
  WebAssembly.instantiate(bytes, importObject).then(results => {
    results.instance.exports.exported_func();// Invoke the exported_func() method in simple.wasm
  });
};
Copy the code