背景
2019年12月5日，W3C WebAssembly 工作组发布 WebAssembly 正式推荐标准（W3C Recommendation），为 Web 带来一种支持代码在浏览器中运行的新语言。
webassembly实际上已经提出很多年了，今年12月w3c终于发布了正式推荐标准，所以开始学习和研究一下。
按照目前的理解，webassembly并不是JavaScript的替代品，它能做的事情其实就是下面几点：
让一些非浏览器的能使用的语言，可以在浏览器中运行，如c、go、rust等。
可以更高效率的进行一些计算操作，尽管各个语言库里面好像也有操作dom的库，但是目前看，操作dom并不是webassembly所擅长的事情。
所以按照目前的理解，要了解webassembly，过程首先是根据教程，把webassembly的运行框架搭建起来（我选择了rust），然后是搞清楚JavaScript和webassembly相互调用的边界在哪里，最后再深入学习rust相关语法，以及rust在编写webassembly的时候的代码都应该怎么写。
本文就先进行第一步和第二步，搭建运行环境，初步了解JavaScript和webassembly的边界。
安装rust
安装rust基础工具
官方给出的安装方式如下
curl https://sh.rustup.rs -sSf | sh
但是在国内这样直接安装会非常非常非常慢，所以我们需要配置国科大的源(使用zsh的，把bashrc换成zshrc即可)
# 编辑文件
$ vim ~/.bashrc
# 在文件中加入以下两句
export RUSTUP_DIST_SERVER=https://mirrors.ustc.edu.cn/rust-static
export RUSTUP_UPDATE_ROOT=https://mirrors.ustc.edu.cn/rust-static/rustup
# 接下来运行命令使文件生效
$ source ~/.bashrc
运行完上述命令后，再运行 curl https://sh.rustup.rs -sSf | sh 就可以正常安装了。
对于新手来说，一路选择默认安装选项即可。
安装后，再配置一下cargo的源，后面使用cargo就都可以使用国内源了。
编辑~/.cargo/config文件（如果没有就手动创建）
[registry]
index="https://mirrors.ustc.edu.cn/crates.io-index/"
[source.crates-io]
registry="https://github.com/rust-lang/crates.io-index"
replace-with='ustc'
[source.ustc]
registry="https://mirrors.ustc.edu.cn/crates.io-index/"
安装生成工具
cargo-generate 是一个用于快速生成 WASM 项目的脚手架，运行
cargo install cargo-generate即可进行安装。wasm-pack 用于将 Rust 项目打包成单个 WASM 文件（类似 Webpack），运行
cargo install wasm-pack进行安装
准备webassembly开发环境
- 准备一个空目录，新建package.json如下
{
"name": "hello-rust",
"version": "0.1.0",
"main": "index.js",
"scripts": {
"build": "webpack --config webpack.config.js",
"start": "webpack-dev-server --open"
},
"devDependencies": {
"hello-wasm-pack": "^0.1.0",
"webpack": "^4.16.3",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.5",
"copy-webpack-plugin": "^4.5.2"
}
}
- 新建webpack.config.js
const CopyWebpackPlugin = require("copy-webpack-plugin");
const path = require('path');
module.exports = {
entry: "./bootstrap.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "bootstrap.js",
},
mode: "development",
plugins: [
new CopyWebpackPlugin(['index.html'])
],
};
- 创建index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>hello rust</title>
</head>
<body>
<script src="./bootstrap.js"></script>
</body>
</html>
- 创建 bootstrap.js
import("./index.js")
- 创建index.js
// var wasm = require('./wasm-app-demo/pkg/wasm_app_demo'); //引用pkg里面的js文件
import * as wasm from './wasm-app-demo/pkg/wasm_app_demo_bg.wasm'; //直接引用wasm文件
function fib(i) {
if (i === 0) return 0;
if (i === 1) return 1;
return fib(i - 1) + fib(i - 2);
}
console.time('wasm');
console.log(wasm.fib(45));
console.timeEnd('wasm');
console.time('js');
console.log(fib(45));
console.timeEnd('js');
- 编写并构建wasm文件
上面几步创建好了wasm的使用代码，里面已经有了对wasm的引用，但是代码我们还没有创建，下面我们就来新建wasm相关的代码。
首先在根目录通过创建工具创建一套rust的模板代码：
cargo generate --git https://github.com/rustwasm/wasm-pack-template
根据命令提示，创建名称为 wasm-app-demo的rust代码文件夹，创建好后，目录如下：
其中pkg和target文件夹，刚新建出来是没有的。
我们这个时候编辑src/lib.rs文件为如下内容：
extern crate wasm_bindgen;
use wasm_bindgen::prelude::*;
#[wasm_bindgen]
pub fn fib(i: u32) -> u32 {
match i {
0 => 0,
1 => 1,
_ => fib(i-1) + fib(i-2)
}
}
这是一个计算斐波那契数列的递归函数，里面代码的具体含义，我们先不在这里过多深入。
现在我们在 wasm-app-demo 文件夹下运行wasm-pack build命令来编译我们的wasm文件。
命令成功后，我们在wasm-app-demo文件夹下会发现pkg文件夹，内容如下：
其中生成了js，ts和wasm文件。我们没有使用typescript，所以不需要ts的文件， js和wasm文件我们都可以来使用，是一样的。在上面的index.js里面已经都写了不同的用法。
运行代码
在根目录运行 npm i ， 再运行 npm start 即可看到效果。
wasm代码是在chrome浏览器运行的，可以看出其实也没有快多少；但是在Firefox里面效果会明显一些，大概是50% js的时间。
搭建环境和写本文的时候，参考了如下文章：
