WebAssembly是现在解决性能问题的老大吧？

万事真是开头难开始第一步就是环境的搭建，具体的原理可以参考之前文章

环境搭建

所需环境

node
git
python
Emscripten（emcc，编译器）

是将c/c++文件编译为wasm文件

安装下载

前三项估计大多数开发者都是有的，需要说明的是python版本我选择的是2.7.18 最主要的Emscripten步骤如下

mkdir webassemblytest
cd webassemblytest , git clone github.com/juj/emsdk.g…
cd emsdk
emsdk.bat update
git pull
emsdk.bat install latest(可能会失败但是再来一次就好)
emsdk.py activate latest
e:path\webassemblytest\emsdk\emsdk_env.bat
emcc-v

安装成功.png

至此基本都安装完成，可以写个c++demo来测试下了

cdemo编译

写好c demo

 #include <stdio.h>
        int main(int argc, char**argv){
        printf("Hello World!\n");
        }

编译

emcc hello_world.c -o test.html (可根据后缀名输出不同格式文件)
编译完成如图

编译完成.png

运行html

emrun --no_browser --port 8080 test_.html
调试如图看到刚才c++写的打印已经到控制台了

调试.png

wasm文件在JavaScript的使用

c++代码

#include <emscripten.h>

extern "C" {
  EMSCRIPTEN_KEEPALIVE
  int add(int a, int b) {
    return a + b;
  }
}

在编译时，Emscripten会自动将标记为导出的函数生成为WebAssembly导出函数。

在JavaScript中调用WebAssembly模块（Wasm）需要经过以下步骤：

加载WebAssembly模块：使用WebAssembly.instantiate()或WebAssembly.instantiateStreaming()函数加载WebAssembly模块。这些函数会异步加载模块并返回一个Promise对象。

fetch('module.wasm')
  .then(response => response.arrayBuffer())
  .then(buffer => WebAssembly.instantiate(buffer))
  .then(module => {
    // WebAssembly模块加载完成
    const instance = module.instance;
    // 调用模块的导出函数等
  })
  .catch(error => {
    // 处理错误
  });

调用WebAssembly导出函数：一旦WebAssembly模块加载完成，你可以通过实例对象访问WebAssembly模块的导出函数和全局变量。通过使用实例的导出对象，可以调用WebAssembly模块中定义的函数。

const instance = ...; // WebAssembly模块的实例对象

// 调用WebAssembly模块的导出函数
instance.exports.functionName(arguments);

请注意，根据WebAssembly模块中导出函数的签名，你可能需要进行适当的类型转换和处理。

以下是一个简单的示例，展示了如何加载WebAssembly模块并调用其导出函数：

fetch('module.wasm')
  .then(response => response.arrayBuffer())
  .then(buffer => WebAssembly.instantiate(buffer))
  .then(module => {
    const instance = module.instance;
    
    // 调用WebAssembly导出函数
    const result = instance.exports.add(5, 3);
    console.log(result); // 输出：8
  })
  .catch(error => {
    console.error(error);
  });

小结

WebAssembly确实是性能王者，常见的一些音视频编辑之类的都能看到wasm文件，比如pc版本的b站剪影爱奇艺腾讯等剪辑网站都是wasm。以后wasm解决性能问题会越来越多。

WebAssembly的开发环境搭建