python wasm_webAssembly
What WebAssembly ?WebAssembly简称WASM，是一种以安全有效的方式运行便携式程序的新技术，主要针对Web平台。与ASM.js类似，WASM的目标是低级别的抽象，适合作为更高级别程序的中间表示 - 即WebAssembly代码旨在由编译器生成而不是由人类编写。在W3C社区组包括来自最大的网络浏览器的公司，包括谷歌，微软，苹果和Mozilla做这件事，而令人兴奋的代表。
WebAssembly是一种新的适合于编译到Web的，可移植的，大小和加载时间高效的格式，是一种新的字节码格式。它的缩写是”.wasm”，.wasm 为文件名后缀，是一种新的底层安全的“二进制”语法。它被定义为“精简、加载时间短的格式和执行模型”，并且被设计为Web 多编程语言目标文件格式。
这意味着浏览器端的性能会得到极大提升，它也使得我们能够实现一个底层构建模块的集合.
webAssembly的优势
webassembly相较于asm.js的优势主要是涉及到性能方面。根据WebAssembly FAQ的描述：在移动设备上，对于很大的代码库，asm.js仅仅解析就需要花费20-40秒，而实验显示WebAssembly的加载速度比asm.js快了20倍，这主要是因为相比解析 asm.js 代码，JavaScript 引擎破译二进制格式的速度要快得多。
主流的浏览器目前均支持webAssembly。
Safari 支持 WebAssembly的第一个版本是 11
Edge 支持 WebAssembly的第一个版本是 16
Firefox 支持 WebAssembly的第一个版本是 52
chrome 支持 WebAssembly的第一个版本是 57
使用WebAssembly，我们可以在浏览器中运行一些高性能、低级别的编程语言，可用它将大型的C和C++代码库比如游戏、物理引擎甚至是桌面应用程序导入Web平台。
开发前准备工作
操作系统MAC系统
安装工具git 、node 、python 、cmake、emsdk
git
已经默认装
node
python
cmake
为了可以在命令行中使用，需要执行一下命令。
sudo “/Applications/CMake.app/Contents/bin/cmake-gui” –install
emsdk
Emscripten 的底层是 LLVM 编译器，理论上任何可以生成 LLVM IR(Intermediate Representation)的语言，都可以编译生成 asm.js。 但是实际上，Emscripten 几乎只用于将 C / C++ 代码编译生成 asm.js。
** C/C++ ** ⇒ ** LLVM ** ==> ** LLVM IR ** ⇒ ** Emscripten ** ⇒ ** asm.js **
1
2
3
4
5
6
7
8
9
10git clone https://github.com/juj/emsdk.git
cd emsdk
./emsdk update
./emsdk install latest
./emsdk activate latest
source ./emsdk_env.sh
浏览器支持Chrome: 打开 chrome://flags/#enable-webassembly，选择 enable。
Firefox: 打开 about:config 将 javascript.options.wasm 设置为 true。
开始编程
编写C代码
创建** example.c ** 文件，并写入如下代码
1
2
3
4
5
6// example.c
float add(float a,float b){
return a+b;
}
编译出wasm
** bash 执行命令： **
1emcc -s EXPORTED_FUNCTIONS="['_add]" example.c -s WASM=1 -s SIDE_MODULE=1 -s BINARYEN_ASYNC_COMPILATION=0 -o example.wasm
调用wasmjs调用wasm中导出的module
** loader模块编写 **
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28function loadWebAssembly(path, imports = {}){
return fetch(path)
.then(response => response.arrayBuffer())
.then(buffer => WebAssembly.compile(buffer))
.then(module => {
//针对wasm所需的import处理，importObject
imports.env = imports.env || {}
imports.env = imports.env || {}
imports.env.DYNAMICTOP_PTR = imports.env.DYNAMICTOP_PTR || 0;
imports.env.tempDoublePtr = imports.env.tempDoublePtr || 0;
imports.env.ABORT = imports.env.ABORT || 0;
imports.global = imports.global || { NaN: 1, Infinity: 2 };
imports.env.abortStackOverflow = imports.env.abortStackOverflow || new Function();
imports.env.nullFunc_X = imports.env.nullFunc_X || new Function();
// 开辟内存空间
imports.env.memoryBase = imports.env.memoryBase || 0
if (!imports.env.memory) {
imports.env.memory = new WebAssembly.Memory({ initial: 256 })
}
// 创建变量映射表
imports.env.tableBase = imports.env.tableBase || 0
if (!imports.env.table) {
imports.env.table = new WebAssembly.Table({ initial: 2, element: 'anyfunc' })
}
// 创建 WebAssembly 实例
return new WebAssembly.instantiate(module, imports)
})
}
html片段1
2
3
4
5
6
7
8
9
10
11
12
13取随机数
const wasm = loadWebAssembly('example.wasm');
let myButton = document.getElementsByClassName('mybutton')[0];
const x = 1.22;
const y = 2.11;
myButton.onclick = function (){
wasm.then(module => {
console.log('wasm-计算：' + module.exports._add(x, y));
console.log('js-计算：' + (x + y));
});
}
WebAssembly组成部分实际上** WebAssembly **被称为 “模块”，因为使用WebAssembly，”程序”和”库”之间没有区别 - 只有”模块”，每个模块都可以与其他模块绑定和通信，每个模块都可以具有”模块”主功能。
必选部分Type：在模块中定义的函数的函数声明和所有引入函数的函数声明。
Function：给出模块中每个函数一个索引。
Code：模块中每个函数的实际函数体。
可选部分Export：使函数、内存、表(tables)、全局变量等对其他 WebAssembly 或 JavaScript 可见，允许动态链接一些分开编译的组件，即 .dll 的WebAssembly 版本。
Import：允许从其他 WebAssembly 或者 JavaScript 中导入指定的函数、内存、表或者全局变量。
Start：当 WebAssembly 模块加载进来的时候，可以自动运行的函数(类似于 main 函数)。
Global：声明模块的全局变量。
Memory：定义模块用到的内存。
Table：使得可以映射到 WebAssembly 模块以外的值，如映射到 JavaScript 的对象。这在间接函数调用时很有用。
Data：初始化导入的或者局部内存。
Element：初始化导入的或者局部的表。
遇到的坑
无法导入环境变量在执行 source ./emsdk_env.sh 命令时失败，无法添加环境变量
思路：脚本实现不了，就不要使用提供的脚本命令，手动添加也可以。最终是要在任何窗口中都能执行命令。
手动添加环境变量，一般都是添加在当前用户区，和windows理念一样。
1
2
3
4
5
6
7
8
9
10
11PATH="/Library/Frameworks/Python.framework/Versions/3.7/bin:${PATH}"
export PATH=/Users/liuzhipan/emsdk:$PATH
export PATH=/Users/liuzhipan/emsdk/clang/e1.38.8_64bit:$PATH
export PATH=/Users/liuzhipan/emsdk/node/8.9.1_64bit/bin:$PATH
export PATH=/Users/liuzhipan/emsdk/emscripten/1.38.8:$PATH
alias python='/Library/Frameworks/Python.framework/Versions/3.7/bin/python3.7'
export EMSDK=/Users/liuzhipan/emsdk
export EM_CONFIG=/Users/liuzhipan/.emscripten
export BINARYEN_ROOT=/Users/liuzhipan/emsdk/clang/e1.38.8_64bit/binaryen
export EMSCRIPTEN=/Users/liuzhipan/emsdk/emscripten/1.38.8
export PATH=$PATH:$EMSDK:$EM_CONFIG:$BINARYEN_ROOT:$EMSCRIPTEN
仿照这份环境变量修改对应目录-路径即可。
vim ~/.bash_profile //添加上述的环境变量
source ~/.bash_profile // 刷新当前用户环境变量缓冲，使其生效
实例化module失败构建出来包之后，发现importObject提供的资源缺少导致实例化module失败。
思路：官网提供的大部分都是env对象
1
2
3
4
5// 开辟内存空间
imports.env.memoryBase = imports.env.memoryBase || 0
if (!imports.env.memory) {
imports.env.memory = new WebAssembly.Memory({ initial: 256 })
}
1
2
3
4
5// 创建变量映射表
imports.env.tableBase = imports.env.tableBase || 0
if (!imports.env.table) {
imports.env.table = new WebAssembly.Table({ initial: 2, element: 'anyfunc' })
}
** 问题关键 **
可是我导出来的wasm-module不止这几个。
1
2
3
4
5
6
7
8
9
10
11
12(import "env" "memory" (memory $env.memory 256))
(import "env" "table" (table $env.table 2 anyfunc))
(import "env" "memoryBase" (global $env.memoryBase i32))
(import "env" "tableBase" (global $env.tableBase i32))
(import "env" "DYNAMICTOP_PTR" (global $env.DYNAMICTOP_PTR i32))
(import "env" "tempDoublePtr" (global $env.tempDoublePtr i32))
(import "env" "ABORT" (global $env.ABORT i32))
(import "global" "NaN" (global $global.NaN f64))
(import "global" "Infinity" (global $global.Infinity f64))
(import "env" "abortStackOverflow" (func $env.abortStackOverflow (type $t0)))
(import "env" "nullFunc_X" (func $env.nullFunc_X (type $t0)))
(func $f2 (type $t1) (param $p0 i32) (result i32)
** 处理方案： **
所以要对多导出来的资源进行处理。
这些都是实例化module需要提供的import.加入对应的字段即可处理！
1
2
3
4
5
6imports.env.DYNAMICTOP_PTR = imports.env.DYNAMICTOP_PTR || 0;
imports.env.tempDoublePtr = imports.env.tempDoublePtr || 0;
imports.env.ABORT = imports.env.ABORT || 0;
imports.global = imports.global || { NaN: 1, Infinity: 2 };
imports.env.abortStackOverflow = imports.env.abortStackOverflow || new Function();
imports.env.nullFunc_X = imports.env.nullFunc_X || new Function();
还有一种更简洁的。
使用wasm-gc去处理。