WebAssembly wa实战

在前端使用wa调用c、go等语言

一般可以使用js多进程，在一个进程计算，然后postMessage结果，由浅入深，这里暂时不使用多线程处理wasm
会使用arrayBuffer, js中用存储二进制数据
wa不能进行界面的渲染，主要用于前端对于复杂计算过慢的优化，如可视化数据量大，需要计算

我们通过一个简单的案例教会你使用wa，可以用于你在开发时前端遇到的计算瓶颈

int add(int a,int b){
  return a + b;
}

int square(int x,int y){
  return x * y;
}

将c编译成wasm，前端就可以调用了在线编译
前端代码

利用wa提供的前端你接口进行编译和实例化，这里只进行基础入门，如果涉及到内存申请等操作的，请查看wa文档

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

</body>
<script>
    fetch('./webAssembly.wasm')
        .then(res=>res.arrayBuffer()) //将返回的对象转换成二进制数组
        .then(WebAssembly.instantiate) 
        //.then(a=>{console.log(a)})  //编译和实例化 ?? 有多少都会去编译吗
        /*
         * 感觉FileReader也可以
         * 两个函数转换成二进制文件后占用空间由89字节变成了118字节, 当大量使用的时候会不会造成网络问题
         *
         * 上面相当于
         *  .then(buffer=>WebAssembly.comple(buffer))  //编译
         *  .then(module=>{
         *      //这样需要开辟内存空间, c中的内存是手工管理的, 如果需要使用, 这里要申请内存
         *      //new WebAssembly.Memary({initlal:256})
         *      //变量映射表 WebAssembly.Table()  将js的变量和c变量进行映射
         *       return new WebAssembly(module);
         *  })
         */
        .then(mod=>mod.instance)
        .then(res=>{
            const {add,square} = res.exports; //导出 解构赋值, 转换使用, 对应了c中的两个函数名
            console.log(add(1,2))
        })
</script>
</html>