WebAssembly入门（1）

1.WebAssembly概念

官网定义

WebAssembly（缩写为 Wasm）是一种基于堆栈的虚拟机的二进制指令格式。Wasm 被设计为编程语言的可移植编译目标，支持在 Web 上为客户端和服务器应用程序进行部署。

WebAssembly是W3C组织开发的一项网络标准，对于浏览器而言，Wasm提供了一种途径，让各种语言编写的代码以接近原生的速度在Web中运行。

JavaScript是一种解释型语言，解释性语言每次执行时都需要把源码转换一次才能指向，非常耗费时间和性能，WebAssembly是一种类汇编语言，具有紧凑的二进制格式，它被设计为可以与JavaScript协同运行，相互调用。这样可以在同一个应用中兼顾WebAssembly的高性能和JavaScript的灵活性。

目前的主流浏览器：Chrome、Edge、Safari、Firefox、Opera 都已经支持。

相关链接：

官网：https://webassembly.org/

开发指南：WebAssembly | MDN (mozilla.org)

2.编译环境搭建（Windows）

c++的代码需要通过Emscripten工具编译为.wasm文件，使用JS加载wasm文件调用函数功能。

2.1 Windows下安装Emscripten

Emscripten官网：Main — Emscripten 3.1.52-git (dev) documentation

安装Emscripten需要先安装ptyhon和git环境。配置好基础环境后就可以开始安装Emscripten。

（1）从github克隆emsdk项目到本地

git clone https://github.com/emscripten-core/emsdk.git

（2）更新emsdk版本。官方的步骤是执行emsdk.bat,但会报错，无法执行，所有参照linux的步骤操作。

cd emsdk
./emsdk update
git pull

（3）安装最新版的emsdk,网络不好的情况下需要多次执行，直到输出Done installing SDK

./emsdk install --global latest

(4)安装完成，执行激活

./emsdk activate latest

(5)设置环境变量，该脚本只在终端生效，关闭终端后就不生效了。可将emsdk目录下的upstream\emscripten配置到系统环境变量中。

./emsdk_env.bat

（6）安装完成后的验证方法,执行以下命令不报错。

emcc -v
emcc --clear-cache

2.2 环境变量配置

将emsdk\upstream\emscripten 目录配置到系统环境变量中。打开cmd 输入emcc -v 命令进行测试，可正常输入软件版本信息，则配置完成。

2.3 HelloWrold编译测试

(1)创建一个hello.c的文件，写入以下代码

#include <stdio.h>

int main(){
    printf("Hello,World!\n");
}

(2)执行emcc命令编译为wasm,生成hello.html、hello.js和hello.wasm文件。

emcc hello.c -s WASM=1 -o hello.html

• -s WASM=1 — 指定我们想要的 wasm 输出形式。如果我们不指定这个选项，Emscripten 默认将只会生成 asm.js
• -o hello.html — 指定这个选项将会生成 HTML 页面来运行我们的代码，并且会生成 wasm 模块，以及编译和实例化 wasm 模块所需要的“胶水”js 代码，这样我们就可以直接在 web 环境中使用了。

(3)查看显示结果

执行emrun命令，启动web服务器生成html页面。

emrun --no_browser --port 8080 hello.html