WebAssembly进阶，vue3 使用 WebAssembly，及 WebAssembly vs JavaScript 的性能对比

目录

核心使用步骤

.c文件.cpp文件编译

使用 Emscripten 转译文件

页面中引入.wasm文件中的函数

WebAssembly vs JavaScript 的性能对比

性能对比关键点：

具体场景

实际案例分析

---

如果对WebAssembly不熟悉可以前往：WebAssembly最详教程，进行WebAssembly基础学习

WebAssembly 关键概念

• 模块：表示一个已经被浏览器编译为可执行机器码的 WebAssembly 二进制代码。一个模块是无状态的，并且像一个二进制大对象（Blob）一样在 Window 和 Worker 之间进行共享（通过 postMessage() 函数）。一个模块能够像一个 ES 的模块一样声明导入和导出。
• 内存：一个可变长的 ArrayBuffer。本质上是连续的字节数组，WebAssembly 的低级内存存取指令可以对它进行读写操作。
• 表格：一个可变长的类型化数组。表格中的项存储了不能作为原始字节存储在内存里的对象的引用（为了安全和可移植性的原因）。
• 实例：一个模块及其在运行时使用的所有状态，包括内存、表格和一系列导入值。一个实例就像一个已经被加载到一个拥有一组特定导入的特定的全局变量的 ES 模块。

核心使用步骤

.c文件.cpp文件编译

#include<stdio.h>

#include <emscripten/emscripten.h>

#ifdef __cplusplus
extern "C" {
#endif

int  EMSCRIPTEN_KEEPALIVE fib(int m)
{
	if (m==1||m==2)
	return 1;
	int a=1,b=1,aw=0;
	while(m>=2)
	{
		aw=aw+a;
		a=b;
		b=aw;
		m=m-1;
	}
	return aw;
 } 
int main()
{
 } 


#ifdef __cplusplus
}
#endif

注意事项：

1. 默认情况下，Emscri