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