简介和背景

什么是 WebAssembly？

WebAssembly 是一种新的编码方式，可以在现代的网络浏览器中运行 － 它是一种低级的类汇编语言，具有紧凑的二进制格式，可以接近原生的性能运行，并为诸如 C / C ++等语言提供一个编译目标，以便它们可以在 Web 上运行。它也被设计为可以与 JavaScript 共存，允许两者一起工作。

Wasm 与 JavaScript 的比较

Webassembly Javascript
它是由W3C、Mozilla、微软、谷歌和苹果开发的。 而它是由Netscape开发的。
Webassembly允许在浏览器上执行用c或c++编写的应用程序，它提供了一个虚拟机，在Javascript的环境中运行。 而它不是为支持本地应用程序而设计的，但它不是为面向基础设施而设计的，以同意其对象。
在网络浏览器中，它的加载时间较快，因为它只需要加载已经编译好的文件。 而加载JavaScript则比webassembly慢，因为浏览器需要加载所有叙述性的”.js “文件。
webassembly的代码执行比Javascript快(30%)。 而Javascript的代码执行速度较慢。
它不是一种编程语言。类汇编语言 它是一种编程语言。
它通过一个小尺寸的二进制格式来传递输出。 Javascript则是以人类可读的格式进行输出。
它只是更快。 它是高度灵活的
因为它是强类型的，所以可以用手查看、调试和编写代码。 另一方面，它是动态类型的，因为它不需要在使用变量之前明确声明这些变量。

Wasm 的优势和局限性

优势

  • 性能 : WebAssembly 是静态强类型低级语言，通过利用常见的硬件能力，WebAssembly 代码在不同平台上能够以接近本地速度运行。此外，WebAssembly 是一个轻量的二进制格式，提供了友好的高效冷启动，轻量部署能力。
  • 跨平台、可移植 : WebAssembly 是一个可移植、体积小、语言和平台无关的二进制格式，开发者可以使用各种自身熟悉的语言开发，生成的 WebAssembly 作为平台无关的应用发布形式；发布的 WebAssembly 模块可以在众多平台上运行，例如浏览器、后端、终端设备、移动设备、IoT等都有广阔的应用场景。
  • 沙箱环境 : WebAssembly 运行在一个独立的沙箱中，一方面可以避免了数据的泄露和侧信道攻击，另一方面恶意代码只能影响自身沙箱环境而不会影响应用本身。
  • 标准化 : W3C WebAssembly Working Group 制定相关的标准，可以保证标准的通用性和各厂商的兼容性。
  • 网络安全 : WebAssembly 的设计原则是与其他网络技术和谐共处并保持向后兼容，WebAssembly 被限制运行在一个安全的沙箱执行环境中，像其他网络代码一样，它遵循浏览器的同源策略和授权策略。
  • 灵活的开发模式 : WebAssembly 制定了标准化的中间指令格式，开发者可以使用多种不同的开发语言，如 C/C++，Java/Kotlin, TypeScript, Rust 等，利用工具链可以转化为统一的 WebAssembly 的中间指令格式。

局限性

  • 技术栈负担重：对于开发者来说，为了满足项目中不同部分的需求，需要采用不同的语言来开发，开发者需要掌握多种不同类型的语言
  • 协作问题：大型软件需要解决不同开发语言的协作问题(交互和集成)，不同语言的交互一般需要语言特定的 FFI，而没有统一的集成方式和接口(组合爆炸💥问题)；交互过程中会引入额外的损耗(内存和性能)

编写第一个 Wasm 模块

选择一种编程语言（如 C、C++ 或 Rust）

这里使用c++
在网站WebAssembly Explorer使用下面的代码生成一个wasm模块

C++ 代码被编译成了 WAT 格式（ WebAssembly text format ）的文本。

1
2
3
4
5
6
7
8
9
10
11
12
13

int num1 = 0;

int get_num() {
  return num1;
}

int add_fun (int a, int b)
{
  num1++;
  return a + b;
}

JavaScript与Wasm交互

js调用它的步骤：

  1. 通过网络加载wasm文件，它的响应头（Content-Type:application/wasm），必须已二进制的方式加载

  2. 使用WebAssembly全局变量对数据处理

  3. 获取处理后的对象，这个对象是一个module对象，通过export获取方法

1
2
3
4
5
6
7
8
9
10

fetch(wasmpath)
    .then((response) => response.arrayBuffer())
    .then((buffer) => WebAssembly.compile(buffer)) // Buffer converted to Web Assembly
    .then((module) => {
      const module = new WebAssembly.Instance(res);
      // module = {
      //   exports: {memory: Memory, xxxxfun: function}
      // }
    });

WebAssembly 对象

MDN WebAssembly

WebAssembly.compile(bufferSource) 把 WebAssembly 二进制代码编译为一个 WebAssembly.Module ，不进行实例化。

WebAssembly.instantiate(module, importObject) 用于编译和实例化 WebAssembly 代码的主 API，返回一个 Module 和它的第一个Instance实例。

Wasm与JavaScript之间的数据传递

查看代码演示