目录

导语 自从 JS 创建到现在，每 10 年都会有新的变化，下一个 10 年的爆点在哪，可能就是 WebAssembly ！本文将带你抓住爆点，10 分钟掌握 webassembly ～

# 了解 WebAssembly

# 什么是 WebAssembly？

官网定义：WebAssembly/wasm WebAssembly 或者 wasm 是一个可移植、体积小、加载快并且兼容 Web 的全新格式（二进制）。是由主流浏览器厂商组成的 W3C 社区团体 制定的一个新的规范。

# 发展历史

章节配图
  • 1995 年，大神布兰登·艾奇（Brendan Eich），仅仅花了 10 天 就将伟大的 JavaScript 撸出来了，引起了轰动。但是Js 的设计初衷是想设计出一个面向非专业编程人员和网页设计师的解释型语言。由于时间太短，细节考虑的不够周全，导致留下很多坑，所以后来很长一段时间，JavaScript 的执行速度一直备受诟病。
  • 2008 年，浏览器的性能大战打响，众多浏览器引入了即时（JIT）编译使得 JavaScript 运行速度快了一个量级。但是对于 JavaScript 这种弱数据类型的语言来说，要实现一个完美的 JIT 非常难。因为 Javascript 是一个没有类型的语言，而且像+这样的符号又能够重载，譬如这样的代码：
const sum = (a, b, c) => a + b + c;

这是 一个求和函数，可以直接放在浏览器的控制台下运行，如果传参都是整数时，结果是整数相加的结果：如，答案是 6。但是，如果至少有一个是字符串，则结果是按照字符串拼接出的结果，如 console.log(sum('1',2,3))，答案是 "123"。也就是说，JIT 在遇到第一个 sum 时会编译成整数相加的机器码；但是在碰到第二个 sum 调用时，不得不重新编译一遍。这样一来，JIT 带来的效率提升便被抵消了。 随着 JS 达到了性能天花板，在当前复杂运算及游戏面前已完全力不从心。无法满足一些大型 web 项目开发，于是三大浏览器巨头分别提出了自己的解决方案：

微软的 TypeScript 谷歌的 Dart 火狐的 asm.js
特点 通过为 JS 加入静态类型检查来改进 JS 松散的语法，提升代码健壮性 为浏览器引入新的虚拟机去直接运行 Dart 程序以提升性能 取 JS 的子集，通过避免 JS 引擎某些难以优化的机制和模式（主要是垃圾回收和类型判断），达到引擎运行优化的目的，文件类型是文本
缺点 只是解决了 JS 语法松散的问题，但还是需要编译成 JS 去运行，对性能没有明显提升 Dart 只能在 内嵌 V8 的 Chrome 浏览器中支持，目前主要应用在 flutter 场景中 asm.js 只是 JavaScript，因此必须完全符合 JavaScript 规范，逃不过需要编译成机器码步骤（耗时）
中心思想 实现一个强类型的语言，然后把它编译成 Javacript 实现一个强类型的语言，然后把它编译成 Javacript 每当遇到变量时，在注释中加上类型，然后 JS 引擎在解析时自动识别注释中的类型，这样相当于 JS 变成了一种强类型的语言
章节配图

我们熟知的四大主流浏览器厂商 Google Chrome、Apple Safari、Microsoft Edge 和 Mozilla FireFox ,觉得 Mozilla FireFox 所推出的 asm.js 很有前景，为了让大家都能使用，于是他们就共同参与开发，基于 asm.js 制定一个标准，也就是 WebAssembly。

  • 2015 年， WebAssembly 首次发布，并可直接在浏览器中运行
  • 2017 年 3 月份， 四大厂商均宣布已经于最新版本的浏览器中支持了 WebAssembly 的初始版本，这意味着 WebAssembly 技术已经实际落地
  • 2019 年，被正式加入 Web 的标准大家庭中

# WebAssembly 影响

  • 大幅度提高 Javascript 的性能，同时也不损失安全性。Webapp 和 原生 App 的性能差距变得很小。
  • 基本之前需要插件来提高速度的技术已经没有必要了， 网页应用的移植性会变得更好。
  • WebAssembly 可以允许任何语言编译到它制定的 AST tree， 相当于使用其他高级语言写的代码可以直接在网页上运行。

# 工作原理

章节配图

WebAssembly 的工作原理简要来说是将 C，C++, Rust 等静态语言通过编译器的程序编译成浏览器能够运行的 wasm 二进制文件，当浏览器加载 wasm 文件后编译为本地机器码后运行。

为什么能提升当前 js 的性能？

正常的 JS：在浏览器中，对 JavaScript 源码进行解析，生成抽象语法树或者字节码（parse），JIT 编译器会对生成的代码进行编译优化，当然后当发生去优化时，再去重新编译优化，最后执行。

WebAssembly：则省去了比较耗时的解析和编译的过程，是直接生成的二进制可执行机器码进行执行。

# 浏览器支持

章节配图

由图可见，无论是 PC、移动端还是服务器，都已经开始支持 WebAssembly 了，这也说明 WebAssembly 已经开始普及～

# 实战演练

# 语言选择

实战开始：首先确认你选择开发的语言：

  • 当你在用 C/C++之类的语言编写模块时，你可以使用 Emscripten 来将它编译到 WebAssembly。
  • 当你使用 Rust 语言编写模块时，需要一个额外工具 wasm-pack。它会把代码编译成 WebAssembly 并制造出正确的 npm 包
  • 当你使用 Java 语言来编写模块时，据说 TeaVM 可以将 JVM 字节码翻译成
  • JavaScript，还能翻译成 WebAssembly，现在还不成熟
  • 当你使用 php 语言来编写模块时，php2wasm 可以接把 PHP 代码编译成 wasm，现在还不成熟
  • 如果你还想保持 js 的编写风格，那就用 typescript 来编写吧，用 assemblyscript 来生成 wasm

确认好你要选择的语言语种，应该总有一款适合你的～～如果还不够，请移位这里

# 环境准备

根据官网的引导，使用 C/C++来编写部分代码，并在浏览器中运行，以下均是在 MacOS 环境下进行的操作。

首先搭建 Emscripten

  1. 没有升级过 python 环境的同学，电脑会有个默认的版本 python2.7.x，此时需要到 phthon 官网下载最新的 python 版本进行安装
  2. 在应用程序中，双击“install Certificates.command”，否则会出现证书验证异常，导致无法后续步骤
  3. 后续步骤如下
#通过一个 git 克隆获取 emscripten
git clone https://github.com/juj/emsdk.git
#下载，安装并激活 sdk，这个步骤可能需要一点时间
cd emsdk
./emsdk install latest
./emsdk activate latest
#让环境生效
source ./emsdk_env.sh
#确认安装的内容可以正常运行
emcc --version
章节配图

OK，可以进行代码编写了

# 样例编写

  1. 用 C 语言编写的斐波那契数列（递归）：
#include <stdio.h>
int fib(int n) {
  return n <= 1
    ? 1
    : fib(n - 1) + fib(n - 2);
}
  1. 编译生成 wasm
emcc fib.c -O3 -s WASM=1 -s SIDE_MODULE=1 -s EXPORTED_FUNCTIONS='["_fib"]' -o fib.wasm

（注：emcc就是Emscripten编译器指令，fib.c是输入文件，-s SIDE_MODULE=1表示这就是一个模块， -s EXPORTED_FUNCTIONS 表示导出的接口函数，-o fib.wasm`是输出的文件，更多的命令字可参考官网）

通过以上命令可生成名字为 fib 的 wasm 文件，可在 js 中进行引用，并且调用。

  1. 如何加载 wasm 直接引用到页面中，官网是推荐两种，一个是 fetch，一个是 XMLHttpRequest，本文以 fetch 为例，在 html 页面中引入上面的文件，如下：
fetch('你引入wasm路径')
  .then((res) => {
    return res.arrayBuffer();
  }) //引入到内存中,使其在array buffer中可用
  .then(WebAssembly.instantiate) //编译和实例化 WebAssembly 代码
  .then((module) => {
    //写你引用此模块的目的
  });

将 fib.c 生成的 fib.wasm 后，在 html 中引用如下：

fetch('./wasm/fib.wasm')
  .then((res) => {
    return res.arrayBuffer();
  })
  .then(WebAssembly.instantiate)
  .then((module) => {
    // console.log(module.instance.exports.fib(value))
    let res = module.instance.exports.fib(value);
    $('#result').text(res);
    let endtime = new Date().getTime();
    $('#period').text(endtime - starttime);
  });

以上，环境和相关 demo 已经写好了，下面来看一下 webassembly 的执行性能

# 性能比较

在 demo 页面中同样用 js 写了一个递归的方法，和同时引用 fib.wasm，做了以下性能比较

章节配图

为了减少误差性，在代码中分别用 js 和 wasm 做定时请求 N 次，来看他们的耗时，如下图所示：

章节配图

可以看到，同样是计算 40 的递归算法，js 时间基本上都是在 1270ms 左右，而编译生成的 wasm 基本上都在 680ms 左右，也就是说在处理 40 的递归下，性能提升至原来的 1.87 倍。

同时，为了进行性能上的对比，对递归数做了不同的取值，来看请求结果及耗时，如下图所示：

章节配图

可以看到，递归数越大，也就是运算层次越多，webassembly 相比于 JS 的优势就越明显，也就是在比较复杂的 JS 运算或者处理中，用 webassembly 会更合适。

# 如何同 JS 互通

交互离不开相互调用，在浏览器中，了解到了在 js 中如何调用 webassembly 中的接口，那在 webassembly 中如何引用 js 相关函数呢？下面简单和您介绍下。

# 方法调用

Emscripten 提供两种方法让 C/C++调用 JavaScript：

  • 使用 emscriptenrunscript() 运行 js 脚本，一种是写“内联 JavaScript”。

emscripten_run_script(“alert(‘hi’)”);

  • 用 EM_ASM() 和其他相关宏写内联JavaScript，稍快，这个是推荐的写法
#include <emscripten.h>
int main() {
  EM_ASM(
    alert('hello world!');
    throw 'all done';
  );
  return 0;
}

# 示例 demo

#include

命令行，生成可执行的 html 文件：

emcc test.c -s WASM=1 -o test.html

运行结果：

章节配图
章节配图

可以看到，无论是哪种引用方式，都可以运行出你想要的结果。

# 总结

  • 一句话：体积小，速度快，二进制文件，执行效率高

  • 适用场景 在浏览器中使用视频、游戏、AR、AI 等比较合适使用 WebAssembly，如果 将服务器上的加密，想要放在 web 端用这个实现也可以

  • 市场现状 flv.js 用 WebAssembly 重写后性能有很大提升；AutoCAD， Google Earth，用 WebAssembly 都开始支持了 web 版本等等

  • 突破

  • 很多静态语言转成 wasm 的生态工具还不完善不成熟，都还处于起步阶段；另外学习资料太少，还需要更多的人去探索去踩坑。

10 分钟入门 WebAssembly (opens new window)