WASM 入门

简介

WebAssembly（简称WASM）是一种可移植、体积小、加载快、安全的二进制格式，它可以在现代Web浏览器中运行。WASM提供了一个近乎原生的执行环境，并且可以被多种编程语言所编写，包括C/C++、Rust、Go等。

WASM能够让开发者将自己的代码编译成一种高效的二进制格式，然后在浏览器中直接运行。这些代码可以与JavaScript一起使用，并且可以在许多不同的场景下使用，例如游戏、图形应用程序、多媒体处理以及科学计算等领域。

通过使用WASM，开发者可以将应用程序的性能提高数倍，因为WASM的执行速度比JavaScript要快得多。此外，WASM还可以使各种编程语言之间更易于交互和协作，从而促进了跨平台的开发。

WASM 编译器

emcc 是一个将C或C++代码编译成 WebAssembly（WASM）格式的工具链。emcc 是 Emscripten 项目的一部分，而 Emscripten 则是一个完整的工具集，可以将用于原生平台的 C/C++ 代码转换为 JavaScript 或WASM，从而使这些代码能够在Web浏览器中运行。

与传统的 C/C++ 编译器不同，emcc 会将源代码编译成一组WASM模块和JavaScript文件，以便在浏览器上执行。同时，emcc 还提供了一些额外的特性，例如支持使用 OpenGL ES 和 SDL 等库，并且可以将 C/C++ 代码转换为asm.js格式的JavaScript代码，以便在旧版浏览器上执行。

可以看做是，emcc 重用了 GCC 的“语言前端”。

Emscripten 环境配置

Docker 化环境

https://hub.docker.com/r/trzeci/emscripten/

安装

Compile from source 不是必须。

1. 安装依赖

   Emscripten 需要一些依赖项才能正常工作。使用以下命令安装所需的软件包：

   sudo yum install -y git make cmake nodejs \
   java-1.8.0-openjdk-headless               \
   python2

   对于 Emscripten SDK 的某些版本，Python 3也是必需的：

   sudo yum install -y python36

2. 安装

   git clone https://github.com/emscripten-core/emsdk.git
   cd emsdk
   ./emsdk install latest
   ./emsdk activate latest
   source ./emsdk_env.sh

   这将安装最新版本的Emscripten，并激活它以进行使用。最后一行命令会设置环境变量，以便可以从终端访问Emscripten。

3. 测试Emscripten

   emcc --version

   如果一切都设置正确，则应该显示Emscripten的版本信息。

Frequently Happened Issues

GLIBC 2.18

wget http://ftp.gnu.org/gnu/glibc/glibc-2.18.tar.gz
tar -zxvf  glibc-2.18.tar.gz
chown -R root.root glibc-2.18
cd glibc-2.18
mkdir build
cd build/
../configure --prefix=/usr --disable-profile --enable-add-ons --with-headers=/usr/include --with-binutils=/usr/bin
make -j12 && make install

Hello WASM World!

main.c

#include <stdio.h>

int main() {
    printf("Hello WASM World!\n");
    return 0;
}

Compile to WASM

emcc main.c -o index.html

Custom Template HTML

编译后会使用 emcc 内置的模板。

emcc -o out.html --shell-file path/to/custom_shell.html 可以自定义。

Open with Apache/Nginx/Python

Just show.

WASM 网页优化

网页加载速度瓶颈主要出在要下载的大量资源数据，特别是 WebGL 纹理或几何体。编译代码通常比 JavaScript 占用占用更多的空间，但机器代码可以有效压缩。因此，在托管 asm.js 和 WebAssembly 时，必须确保使用 gzip 压缩传输所有内容，现在所有浏览器和 CDN 都内置支持gzip。与未压缩的文件相比，gzip 压缩 .wasm 文件平均可以减少 60-75％ 的文件大小，因此实际上从不会无压缩地提供文件。

要在 CDN 上提供 gzip 压缩的文件，需要在上传到服务器前进行压缩。一些 Web 服务器支持即时压缩文件，但对于静态资产内容，应该避免如此，因为对于服务器 CPU 来说，每次请求就要压缩是一个恐怖的噩梦。调整反代配置，将HTTP响应头设置为：Content-Encoding：gzip ，告诉客户端浏览器应在将数据交给页面本身之前透明地解压缩下载的内容。

为确保 gzip 压缩不会混淆服务的 MIME 类型。

• JavaScript 文件（预压缩或未压缩）使用 Content-Type：application/javascript
• 所有资产文件（.data、.mem）使用 Content-Type：application/octet-stream
• WebAssembly (.wasm) 文件应该使用 Content-Type：application/wasm