当我们在一个Web应用中使用WebAssembly，最终的目的要么是执行wasm模块的入口程序（通过start指令指定的函数），要么是调用其导出的函数，这一切的前提需要创建一个通过WebAssembly.Instance对象表示的wasm模块实例(源代码)。

一、wasm模块实例化总体流程

二、利用WebAssembly.Module创建实例

三、通过字节内容创建创建实例

四、利用XMLHttpRequest加载wasm模块

五、极简编程方式

一、wasm模块实例化总体流程

虽然编程模式多种多样，但是wasm模块的实例化总体采用如下的流程：

  • 步骤一：下载wasm模块文件；
  • 步骤二：解析文件并创建通过WebAssembly.Module类型表示的wasm模块；
  • 步骤三：根据wasm模块，结合提供的导入对象，创建通过WebAssembly.Instance类型表示的模块实例。

二、利用WebAssembly.Module创建实例

我们照例通过一个简单的实例来演示针对wasm模块加载和模块实例创建的各种编程模式。我们首先利用WebAssembly Text Format（WAT）形式定义如下一个wasm程序，定义的文件名为app.wat。如代码所示，我们定义了一个用于输出指定浮点数（i64）绝对值的导出函数absolute。绝对值通过f64.abs指令计算，具体得输出则通过导入的print函数完成。

  1. (module
  2.    (func $print (import "imports" "print") (param $op f64) (param $result f64))
  3.    (func (export "absolute") (param $op f64)
  4.       (local.get $op)
  5.       (f64.abs (local.get $op))
  6.       (call $print)
  7.    )
  8. )

我们通过指定wat2wasm （源代码压缩包种提供了对应的.exe）命令（wat2wasm app.wat –o app.wasm)编译app.wat并生成app.wasm后，定义如下这个index.html页面，作为宿主程序的JavaScript脚本完全按照上面所示的步骤完成了针对wasm模块实例的创建。

  1. <html>
  2.     <head></head>
  3.     <body>
  4.         <div id="container"></div>
  5.         <script>
  6.             var print = (op, result) => document.getElementById("container").innerText = `abs(${op}) = ${result}`;
  7.            fetch("app.wasm")
  8.                 .then((response) => response.arrayBuffer())
  9.                 .then(bytes => {
  10.                     var module = new WebAssembly.Module(bytes);
  11.                     var instance = new WebAssembly.Instance(module, {"imports":{"print": print}});
  12.                     instance.exports.absolute(-3.14);
  13.                 })
  14.         </script>
  15.     </body>
  16. </html>

具体来说，我们调用fetch函数将app.wasm文件下载下来后，我们将获得的字节内容作为参数调用构建函数创建了一个WebAssembly.Module对象。然后将这个Module对象和创建的导入对象（{"imports":{"print": print}}）作为参数调用构造函数创建了一个WebAssembly.Instance对象，该对象正是我们需要的wasm模块实例。我们从模块实例中提取并执行导出的absolute函数。导入的print函数会将绝对值计算表达式以如下的形式输出到页面中。

除了调用构造函数以同步（阻塞）的方式根据WebAssembly.Module对象创建WebAssembly.Instance对象外，我们还可以调用WebAssembly.instantiate静态方法以异步的方式“激活”wasm模块实例，它返回一个Promise<WebAssembly.Instance>对象。

  1. var print = (op, result) => document.getElementById("container").innerText = `abs(${op}) = ${result}`;
  2. fetch("app.wasm")
  3.     .then((response) => response.arrayBuffer())
  4.     .then(bytes => {
  5.         var module = new WebAssembly.Module(bytes);
  6.         return WebAssembly.instantiate(module, { "imports": { "print": print } });
  7.     })
  8.     .then(instance => instance.exports.absolute(-3.14));

三、通过字节内容创建创建实例

静态方法WebAssembly.instantiate还提供了另一个重载，我们可以直接指定下载wasm模块文件得到的字节内容作为参数。这个重载返回一个Promise<WebAssembly.WebAssemblyInstantiatedSource>对象，WebAssemblyInstantiatedSource对象的instance属性返回的正是我们需要的wasm模块实例。

  1. var print = (op, result) => document.getElementById("container").innerText = `abs(${op}) = ${result}`;
  2. fetch("app.wasm")
  3.     .then((response) => response.arrayBuffer())
  4.     .then(bytes => WebAssembly.instantiate(bytes, {"imports":{"print": print}}))
  5.     .then(result =>result.instance.exports.absolute(-3.14));

四、利用XMLHttpRequest加载wasm模块

fetch函数是我们推荐的用于下载wasm模块文件的方式，不过我们一定义要使用传统的XMLHttpRequest对象也未尝不可。上面的三种激活wasm模块实例的方式可以采用如下的形式来实现。

  1. var print = (op, result) => document.getElementById("container").innerText = `abs(${op}) = ${result}`;
  2. const request = new XMLHttpRequest();
  3. request.open("GET", "app.wasm");
  4. request.responseType = "arraybuffer";
  5. request.send();
  6.  
  7. request.onload = () => {
  8.     var bytes = request.response;
  9.     var module = new WebAssembly.Module(bytes);
  10.     var instance = new WebAssembly.Instance(module, {"imports":{"print": print}});
  11.     instance.exports.absolute(-3.14);
  12. };

上面演示的利用创建的WebAssembly.Module对象和导入对象调用构造函数创建WebAssembly.Instance的同步形式。下面则是将二者作为参数调用静态方式WebAssembly.instantiate以异步方式激活wasm模块实例的方式。

  1. var print = (op, result) => document.getElementById("container").innerText = `abs(${op}) = ${result}`;
  2. const request = new XMLHttpRequest();
  3. request.open("GET", "app.wasm");
  4. request.responseType = "arraybuffer";
  5. request.send();
  6.  
  7. request.onload = () => {
  8.     var bytes = request.response;
  9.     WebAssembly
  10.         .instantiate(request.response, {"imports":{"print": print}})
  11.         .then(result => result.instance.exports.absolute(-3.14));
  12. };

下面演示WebAssembly.instantiate静态方法的另一个重载。

五、极简编程方式

其实我们有“异步到位”的方式，那就是按照如下的形式执行静态方法WebAssembly.instantiateStreaming。该方法的第一个参数用于提供下载.wasm模块文件的PromiseLike<Response>对象，第二个参数则用于指定导入对象。该方法同样返回一个Promise<WebAssembly.WebAssemblyInstantiatedSource>对象，WebAssemblyInstantiatedSource的instance属性返回的正是我们所需的wasm模块实例。

  1. var print = (op, result) => document.getElementById("container").innerText = `abs(${op}) = ${result}`;
  2. WebAssembly
  3.     .instantiateStreaming(fetch("app.wasm"), {"imports":{"print": print}})
  4.     .then(result => result.instance.exports.absolute(-3.14))

WebAssembly核心编程[1]:wasm模块实例化的N种方式的更多相关文章

  1. VB 核心编程及通用模块开发 笔记1

    前言:学习任何编程语言.编程工具的目的不外乎解决生活问题,能够快速.高效解决问题的方式就是不错的方式,至于选择什么“工具”,众位看官看着办,本人虽然有过3年vb开发经验,但是一直没有深入学习,现已购买 ...

  2. 【Spring】的【bean】管理（XML配置文件）【Bean实例化的三种方式】

    Bean实例化的三种方式 说明:通过配置文件创建对象就称为Bean实例化. 第一种:使用类的无参构造创建(重点) 实体类 package com.tyzr.ioc; public class User ...

  3. Java并发编程：线程间协作的两种方式：wait、notify、notifyAll和Condition

    Java并发编程:线程间协作的两种方式:wait.notify.notifyAll和Condition 在前面我们将了很多关于同步的问题,然而在现实中,需要线程之间的协作.比如说最经典的生产者-消费者 ...

  4. Spring中bean实例化的三种方式

    之前我已经有好几篇博客介绍Spring框架了,不过当时我们都是使用注解来完成注入的,具体小伙伴可以参考这几篇博客(Spring&SpringMVC框架案例).那么今天我想来说说如何通过xml配 ...

  5. 19、Java并发编程：线程间协作的两种方式：wait、notify、notifyAll和Condition

    Java并发编程:线程间协作的两种方式:wait.notify.notifyAll和Condition 在前面我们将了很多关于同步的问题,然而在现实中,需要线程之间的协作.比如说最经典的生产者-消费者 ...

  6. Spring bean管理器 bean实例化的三种方式

    bean实例化的三种方式实现 第一种:使用类的无参数构造方法创建(常用 重要) 第一种实例化方式最常用,实例化类时会通过调用无参构造方法创建.示例代码如下: package spring.com.Us ...

  7. python 模块调用的几种方式

    在python里面又很多模块,或者引用第三方模块,python 模块调用的几种方式,下面详细解说 1,import 模块名 2,from 模块 import  模块里面的小功能 3,from  模块 ...

  8. spring实例化bean三种方式

    我看了这篇博文<https://www.cnblogs.com/zhanglei93/p/6221546.html>,以及自己实践总结了关于spring实例化bean对象的3种方式. 一. ...

  9. Bean实例化的三种方式

    1. 构造器实例化 spring容器通过bean对应的默认的构造函数来实例化bean. 2. 静态工厂方式实例化 首先创建一个静态工厂类,在类中定义一个静态方法创建实例. 静态工厂类及静态方法: pu ...

  10. spring学习(03)之bean实例化的三种方式

    bean实体例化的三种方式 在spring中有三中实例化bean的方式: 一.使用构造器实例化:(通常使用的一个方法,重点) 二.使用静态工厂方法实例化: 三.使用实例化工厂方法实例化 第一种.使用构 ...

随机推荐

  1. AtCoder ABC 181 个人题解（本场GJ x 3）

    补题链接:Here A - Heavy Rotation 对 \(N\) 进行奇偶判断,奇数穿 Black .偶数穿 White B - Trapezoid Sum 前 \(n\) 项和公式:\(S_ ...

  2. vivo悟空活动中台-打造 Nodejs 版本的MyBatis

    经典的架构设计可以跨越时间和语言,得以传承. -- 题记 一.背景 悟空活动中台技术文章系列又和大家见面了,天气渐冷,注意保暖. 在往期的系列技术文章中我们主要集中分享了前端技术的方方面面,如微组件的 ...

  3. vue学习笔记 八、toRef的使用

    系列导航 vue学习笔记 一.环境搭建 vue学习笔记 二.环境搭建+项目创建 vue学习笔记 三.文件和目录结构 vue学习笔记 四.定义组件(组件基本结构) vue学习笔记 五.创建子组件实例 v ...

  4. Bash 常用命令总结

    基础常用命令 某个命令 --h,对这个命令进行解释 某个命令 --help,解释这个命令(更详细) man某个命令,文档式解释这个命令(更更详细)(执行该命令后,还可以按/+关键字进行查询结果的搜索) ...

  5. plsqll连接Oracle的两种方式

    第一种方式:配置tnsnames.ora 找到plsql软件根目录 下的配置文件

  6. java进阶(15)--DecimalFormat、BigDecimal

    一.DecimalFormat(数字格式化) 1.数字格式化的表示: (#) 代表任意数字 (,)代表千分位 (.)代表小数 (0)代表不够时补0 2.示例

  7. Go socket 编程源码解析(上)

    0. socket 介绍 Liunx 中一切皆文件.通过文件描述符和系统调用号可以实现对任何设备的访问.同样的,socket 也是一种文件描述符.通过 socket 可以建立网络传输.对于 TCP 和 ...

  8. cs 保研经验贴 | 英语口试

    很多夏令营都有英语面试环节.但这其实是有迹可循的,多说几遍就熟练了. 无论是笔试面试,还是联系导师 联系 hr,这种自我推销的事情,都会越做越熟练的.希望发表也是如此吧-(来自博零菜鸟的碎碎念-) 目 ...

  9. WPF Prism框架Region失效了？

    站长最近转载了痕迹的Prism 8系列博文,不知道你对该框架是否有一定了解了?不了解,可以看看本号转载的系列: WPF Prism框架合集(2.创建Prism应用程序) WPF Prism框架合集(3 ...

  10. 【ThreadX-USBX】Azure RTOS USBX概述

    Azure RTOS USBX是高性能USB主机,设备和移动(OTG)嵌入式堆栈.Azure RTOS USBX与Azure RTOS ThreadX完全集成,并且可用于所有ThreadX支持的处理器 ...