The key to loading and executing WebAssembly is to load the .wasm file correctly and interact with JavaScript. 1. Use fetch() to load the module with WebAssembly.instantiateStreaming() or WebAssembly.compile(), and choose instantiateStreaming() first to improve efficiency; 2. Pass functions, memory and other resources to WASM through importObject, and call the export method under instance.exports in JS; 3. Pay attention to CORS configuration, parameter type matching, debugging means and performance optimization, such as multiplexing of Module and Instance. Follow the standard process and pay attention to details, the H5 pages can be successfully integrated into WebAssembly.

The loading and execution of WebAssembly in H5 pages is actually not mysterious. As long as you understand the basic process, you can integrate smoothly in the project. The key is how to correctly load the .wasm file and call the methods in it through JavaScript.

From the perspective of actual development, let’s talk about the points that need to be paid attention to in this process.

How to correctly load .wasm file

The WebAssembly module usually exists in the form of a .wasm file. The most common way to load it in the H5 page is to use fetch() to get the file contents and then compile the module via WebAssembly.instantiateStreaming() or WebAssembly.compile() .

It is recommended to use instantiateStreaming() first, because it can be parsed and compiled directly from the response stream, which is more efficient:

 fetch('example.wasm')
  .then(response => 
    WebAssembly.instantiateStreaming(response, importObject)
  )
  .then(results => {
    const instance = results.instance;
    // You can start calling the exported method in wasm});

If you have certain limitations (such as preprocessing responses required), you can also get the ArrayBuffer first and then compile:

 fetch('example.wasm')
  .then(response => response.arrayBuffer())
  .then(bytes => WebAssembly.compile(bytes))
  .then(module => WebAssembly.instantiate(module, importObject))
  .then(results => {
    const instance = results.instance;
  });

Note: When requesting across domains, make sure that the server configuration allows CORS, otherwise an error will be reported.

How to interact with JavaScript

The WebAssembly module can receive functions, memory and other resources from JavaScript through importObject, and can also export functions for JS call.

For example, provide a print function in JS for WASM to use:

 const importObject = {
  env: {
    print: arg => console.log("WASM says:", arg)
  }
};

And in the WASM module, this function can be declared and called:

 (import "env" "print" (func $print (param i32)))

Conversely, if WASM exports a function, such as add , you can call it like this:

 instance.exports.add(2, 3); // Assume that add is a function of two i32 parameters

Note: The parameter type must match, otherwise an error may occur or an unexpected result may be returned.

Frequently Asked Questions and Debugging Suggestions

1. Module loading failed

   • Check that the network request is successful and check whether the console has a 404 or MIME type error.
   • Make sure the server does not have the wrong Content-Type set (although the browser generally does not force it, it is best to set it to application/wasm ).

2. An error occurred while calling the function

   • Most of the reason is that the parameter type does not match or the function is not exported.
   • Check the .wasm corresponding .wat file to confirm the export function name and signature.

3. Debugging difficulty

   • At present, WASM cannot directly interrupt debugging like JS, but it can use Emscripten to add the -g parameter to preserve debugging information.
   • Do more log output auxiliary troubleshooting in the JS layer.

4. Performance is not as expected

   • WASM startup has compile time overhead and is suitable for long-term running tasks.
   • If you create instances frequently, consider reusing existing Module and Instance.

Basically that's it. Using WebAssembly in H5 is not complicated, but some details are easy to ignore, especially the part that interacts with JS. As long as you follow the standard process, most problems can be solved.

The above is the detailed content of H5 WebAssembly Module Loading and Execution. For more information, please follow other related articles on the PHP Chinese website!