网站ssl证书怎么做,网页版梦幻西游探案任务攻略,烟台公司网站建设,深圳大事件当我们在一个Web应用中使用WebAssembly#xff0c;最终的目的要么是执行wasm模块的入口程序#xff08;通过start指令指定的函数#xff09;#xff0c;要么是调用其导出的函数#xff0c;这一切的前提需要创建一个通过WebAssembly.Instance对象表示的wasm模块实例(源代码…当我们在一个Web应用中使用WebAssembly最终的目的要么是执行wasm模块的入口程序通过start指令指定的函数要么是调用其导出的函数这一切的前提需要创建一个通过WebAssembly.Instance对象表示的wasm模块实例(源代码)。 一、wasm模块实例化总体流程 虽然编程模式多种多样但是wasm模块的实例化总体采用如下的流程 步骤一下载wasm模块文件 步骤二解析文件并创建通过WebAssembly.Module类型表示的wasm模块 步骤三根据wasm模块结合提供的导入对象创建通过WebAssembly.Instance类型表示的模块实例。 二、利用WebAssembly.Module创建实例 我们照例通过一个简单的实例来演示针对wasm模块加载和模块实例创建的各种编程模式。我们首先利用WebAssembly Text FormatWAT形式定义如下一个wasm程序定义的文件名为app.wat。如代码所示我们定义了一个用于输出指定浮点数i64绝对值的导出函数absolute。绝对值通过f64.abs指令计算具体得输出则通过导入的print函数完成。 (module(func $print (import imports print) (param $op f64) (param $result f64))(func (export absolute) (param $op f64)(local.get $op)(f64.abs (local.get $op))(call $print))
) 我们通过指定wat2wasm 源代码压缩包种提供了对应的.exe命令wat2wasm app.wat –o app.wasm)编译app.wat并生成app.wasm后定义如下这个index.html页面作为宿主程序的JavaScript脚本完全按照上面所示的步骤完成了针对wasm模块实例的创建。 htmlhead/headbodydiv idcontainer/divscriptvar print (op, result) document.getElementById(container).innerText abs(${op}) ${result};fetch(app.wasm).then((response) response.arrayBuffer()).then(bytes {var module new WebAssembly.Module(bytes);var instance new WebAssembly.Instance(module, {imports:{print: print}});instance.exports.absolute(-3.14);})/script/body
/html 具体来说我们调用fetch函数将app.wasm文件下载下来后我们将获得的字节内容作为参数调用构建函数创建了一个WebAssembly.Module对象。然后将这个Module对象和创建的导入对象{imports:{print: print}}作为参数调用构造函数创建了一个WebAssembly.Instance对象该对象正是我们需要的wasm模块实例。我们从模块实例中提取并执行导出的absolute函数。导入的print函数会将绝对值计算表达式以如下的形式输出到页面中。 除了调用构造函数以同步阻塞的方式根据WebAssembly.Module对象创建WebAssembly.Instance对象外我们还可以调用WebAssembly.instantiate静态方法以异步的方式“激活”wasm模块实例它返回一个PromiseWebAssembly.Instance对象。 var print (op, result) document.getElementById(container).innerText abs(${op}) ${result};
fetch(app.wasm).then((response) response.arrayBuffer()).then(bytes {var module new WebAssembly.Module(bytes);return WebAssembly.instantiate(module, { imports: { print: print } });}).then(instance instance.exports.absolute(-3.14));
三、通过字节内容创建创建实例 静态方法WebAssembly.instantiate还提供了另一个重载我们可以直接指定下载wasm模块文件得到的字节内容作为参数。这个重载返回一个PromiseWebAssembly.WebAssemblyInstantiatedSource对象WebAssemblyInstantiatedSource对象的instance属性返回的正是我们需要的wasm模块实例。 var print (op, result) document.getElementById(container).innerText abs(${op}) ${result};
fetch(app.wasm).then((response) response.arrayBuffer()).then(bytes WebAssembly.instantiate(bytes, {imports:{print: print}})).then(result result.instance.exports.absolute(-3.14)); 四、利用XMLHttpRequest加载wasm模块 fetch函数是我们推荐的用于下载wasm模块文件的方式不过我们一定义要使用传统的XMLHttpRequest对象也未尝不可。上面的三种激活wasm模块实例的方式可以采用如下的形式来实现。 var print (op, result) document.getElementById(container).innerText abs(${op}) ${result};
const request new XMLHttpRequest();
request.open(GET, app.wasm);
request.responseType arraybuffer;
request.send();request.onload () {var bytes request.response;var module new WebAssembly.Module(bytes);var instance new WebAssembly.Instance(module, {imports:{print: print}});instance.exports.absolute(-3.14);
}; 上面演示的利用创建的WebAssembly.Module对象和导入对象调用构造函数创建WebAssembly.Instance的同步形式。下面则是将二者作为参数调用静态方式WebAssembly.instantiate以异步方式激活wasm模块实例的方式。 var print (op, result) document.getElementById(container).innerText abs(${op}) ${result};
const request new XMLHttpRequest();
request.open(GET, app.wasm);
request.responseType arraybuffer;
request.send();request.onload () {var bytes request.response;WebAssembly.instantiate(request.response, {imports:{print: print}}).then(result result.instance.exports.absolute(-3.14));
}; 下面演示WebAssembly.instantiate静态方法的另一个重载。 var print (op, result) document.getElementById(container).innerText abs(${op}) ${result};
const request new XMLHttpRequest();
request.open(GET, app.wasm);
request.responseType arraybuffer;
request.send();request.onload () {var bytes request.response;WebAssembly.instantiate(request.response, {imports:{print: print}}).then(result result.instance.exports.absolute(-3.14));
}; 五、极简编程方式 其实我们有“一步到位”的方式那就是按照如下的形式执行静态方法WebAssembly.instantiateStreaming。该方法的第一个参数用于提供下载.wasm模块文件的PromiseLikeResponse对象第二个参数则用于指定导入对象。该方法同样返回一个PromiseWebAssembly.WebAssemblyInstantiatedSource对象WebAssemblyInstantiatedSource的instance属性返回的正是我们所需的wasm模块实例。 var print (op, result) document.getElementById(container).innerText abs(${op}) ${result};
WebAssembly.instantiateStreaming(fetch(app.wasm), {imports:{print: print}}).then(result result.instance.exports.absolute(-3.14)) 文章转载自Artech 原文链接https://www.cnblogs.com/artech/p/17994560/wasm_loading 体验地址引迈 - JNPF快速开发平台_低代码开发平台_零代码开发平台_流程设计器_表单引擎_工作流引擎_软件架构
