1.定义
WebAssembly
是一个可移植、体积小、加载快并且兼容 Web 的全新二进制格式;可以通过C/C++/Rust等静态语言编译生成,后缀名为.wasm;可以通过Web API在浏览器中加载、解析和运行。通过定义我们了解一下内容:
以下是一个 .wasm 的文本格式,可以整体感知一下:
(module
(type $t0 (func))
(type $t1 (func (param i32 i32) (result i32)))
(func $__wasm_call_ctors (type $t0)
nop)
(func $addTwo (type $t1) (param $p0 i32) (param $p1 i32) (result i32)
local.get $p0
local.get $p1
i32.add)
(global $__dso_handle i32 (i32.const 0))
(export "__wasm_call_ctors" (func $__wasm_call_ctors))
(export "addTwo" (func $addTwo))
(export "__dso_handle" (global 0))
(export "__wasm_apply_data_relocs" (func $__wasm_call_ctors)))
我们使用C 语言定义一个简单的add.c 文件计算两数之和
//add.c
#include <stdio.h>
int addTwo(int a, int b) {
return a + b;
}
不同的语言转换成 WebAssembly 文件所需编译器不同,我们以C/C++为例,其使用的是emscripten, 可去github上下载和安装
# 下载地址
git clone https://github.com/juj/emsdk.git
#安装
cd emsdk
./emsdk install latest
./emsdk activate latest
#让环境生效
source ./emsdk_env.sh
#确认是否安装成功
emcc --version
接着使用 emcc 转换文件
emcc add.c -O3 -s WASM=1 -s SIDE_MODULE=1 -s EXPORTED_FUNCTIONS='["addTwo"]' -o add.wasm
也可以使用WasmFiddle(https://wasdk.github.io/WasmFiddle/)在线转换。
现在浏览器还不支持使用类似js文件的加载方式进行.wasm 文件加载。可以使用XHR
或Fetch
fetch('./add.wasm')
.then(res => {return res.arrayBuffer()})
.then(WebAssembly.instantiate)
.then(module => {
console.log(module);
const sum = module.instance.exports.addTwo(1, 2);
console.log(sum)
})
我们使用 js 调用和使用 WebAssembly方式调用递归方式实现斐波那契数列函数对比。先简单回顾下斐波那契数列函数
function Fibonacci(n){
return n <= 1 ? 1 : Fibonacci(n - 1) + Fibonacci(n - 2);
}
同样我们使用C语言实现然后生成fib.wasm,测试两种不同方式结果如下:
我们可以看出复杂的运算或者处理,用WebAssembley更合适。
WebAssembly 的出现,并不是为了取代JavaScript。其主要有两个作用:
现在已经有线上项目比如视频剪辑、游戏、md5计算等相关应用在线上使用,一个实际的例子,VE云剪辑就是 Worker + WebAssembly的应用。
本文简述WebAssembly的定义,使用和性能,因为业务场景有限,笔者还并未用在实际项目中,如果你已经在使用了,欢迎留言沟通交流呀。
[1]官网: https://webassembly.org/
[2]应用场景: https://www.techug.com/post/webassembly-application-example.html
[3]WebAssembly 在 Web 端视频的应用: https://segmentfault.com/a/1190000038330781
[4]md5实践: https://juejin.cn/post/6931155704594038792