WebAssembly 实战 —— 前端提速的黑科技

WebAssembly 早在 2015 年就开始萌芽，直到 2018 年才得到各大浏览器的广泛支持

从最初的狂热到现在的冷静，WebAssembly（简称 wasm ）到底给前端开发带来了什么？

一、什么是 WebAssembly

首先必须明确一点，wasm 不是一个新的框架或者库，而是一种全新的语法，和 HTML、CSS、JavaScript 平级

但 wasm 的出现绝不是要让它成为一门新的编程语言（不需要手写 .wasm 文件，所以不用想着取代 JavaScript）

而是被设计为一个编译目标（就像 windows 系统中的 .exe 文件），为诸如 C、C++ 和 Rust 等语言提供一个高效的编译目标

所以 WebAssembly 只是提供了在浏览器上 (or node.js) 运行非 JavaScript 编程语言的能力

事实上，大多数编写 wasm 的开发人员并不是纯前端工程师

二、实战

WebAssembly 有两种文件格式：.wasm 和 .wat

其中 .wasm 文件以二进制的可执行文件，是编译后的结果

而 .wat 是一种文本格式（就像 .js 文件），可用于 debug，最终需要编译为 .wasm 文件

上文已经说过， WebAssembly 被设计为一个编译目标，所以不需要手写 .wat 文件

而是通过编译工具将 C / C++ / Rust 编译为 .wasm

// .wat 文件长这个样子:

(module
  (func $fac (param f64) (result f64)
    local.get 0
    f64.const 1
    f64.lt
    if (result f64)
      f64.const 1
    else
      local.get 0
      local.get 0
      f64.const 1
      f64.sub
      call $fac
      f64.mul
    end)
  (export "fac" (func $fac)))

1. Rust → WebAssembly

接下来就感受一下将 Rust 编译为 WebAssembly 的过程

首先需要安装 Rust 环境，建议查看官方文档的介绍，如果是 macOS 或者 Linux 可以直接运行这一行代码：

curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

安装结束后可以通过 cargo --version 检查是否安装成功

然后安装构建工具 wasm-pack

cargo install wasm-pack

准备就绪，接下来在合适的目录下创建项目：

cargo new --lib hello-wasm

这里的 Cargo.toml 就相当于前端应用的 package.json，接下来将 Cargo.toml 改为这样：

[package]
name = "hello-wasm"
version = "0.1.0"
edition = "2021"

[lib]
crate-type = ["cdylib"]

[dependencies]
wasm-bindgen = "0.2"

然后将 src/lib.rs 的内容改为：

extern crate wasm_bindgen;

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn fib_recursive(n: usize) -> usize {
    if n <= 2 {
        return 1;
    } else {
        return fib_recursive(n - 2) + fib_recursive(n - 1);
    }
}

现在我们已经使用 Rust 实现了一个斐波拉契数列的累加函数 fib_recursive（虽然是通过未优化的递归实现的）

接下来在项目的根目录下执行 wasm-pack build，生成 .wasm 文件

2. 在 node 环境中使用 wasm

上面已经编译出了 .wasm 文件，可以直接读取

// index.js

const fs = require('fs');

const src = new Uint8Array(fs.readFileSync('./pkg/hello_wasm_bg.wasm'));

WebAssembly.instantiate(src)
  .then((result) => {
    const { fib_recursive } = result.instance.exports;
    console.log('fib_recursive(10) ====> ', fib_recursive(10));
  })
  .catch((e) => console.error(e));

接着在 node 环境中执行 index.js

3. 在 web 项目中使用 wasm

目前 <script type='module'> 或 ES6 import 语句还不支持 wasm

// 或者使用 vite-plugin-wasm 等插件

在 web 端可以通过 fetch 或 XMLHttpRequest 来加载 wasm

这里以 React 项目为例：

import React, { useEffect } from 'react';

// pkg 位于 public 目录下
const WASM_PKG_PATH = '/pkg/hello_wasm_bg.wasm';

// 加载并实例化 wasm
function fetchAndInstantiate(url, importObject) {
  return fetch(url)
    .then((response) => response.arrayBuffer())
    .then((bytes) => WebAssembly.instantiate(bytes, importObject))
    .then((results) => results.instance);
}

const Demo = () => {
  useEffect(() => {
    fetchAndInstantiate(WASM_PKG_PATH).then((result) => {
      const { fib_recursive } = result.exports;
      console.log('fib_recursive(10) ====> ', fib_recursive(10));
    });
  }, []);

  return <h1>Hello WebAssembly</h1>;
};

export default Demo;

4. 性能对比

接下来在 node 环境对比一下 js 与 wasm 的性能差异

// 测试函数, 对比 n = 40 的情况下函数执行的时间
export default function testing(fn, n = 40) {
  const timer = 'testing';
  console.time(timer);
  const result = typeof fn === 'function' && fn(n);
  console.log('计算结果：', result);
  console.timeEnd(timer);
}

先用 js 实现上面的斐波那契数列累加函数（依然是未优化的递归版本）

// js-fib.js

function jsFibRecursive(n) {
  return n <= 2 ? 1 : jsFibRecursive(n - 2) + jsFibRecursive(n - 1);
}

testing(jsFibRecursive);

然后改为 rust 编译的 wasm 版本

// rust-fib.js

const fs = require('fs');
const src = new Uint8Array(fs.readFileSync('./pkg/hello_wasm_bg.wasm'));

WebAssembly.instantiate(src)
  .then((result) => {
    const { fib_recursive } = result.instance.exports;
    testing(fib_recursive);
  })
  .catch((e) => console.error(e));