WebAssembly · 完整白皮书 | 编程语言全景手册

📌 第一部分：WebAssembly 概览与定位

1.1 定义与全称

WebAssembly（简称 Wasm）是由 W3C 制定的二进制指令格式，于 2017 年首次发布。WebAssembly 允许 C/C++、Rust、Go 等语言编译为可在浏览器中高效运行的二进制代码，性能接近原生。

1.2 核心定位

WebAssembly 的核心定位是 Web 平台的高性能计算引擎。它提供了：

接近原生的执行性能
安全的沙箱隔离
跨语言编译（C/C++、Rust、Go、Python 等）
与 JavaScript 无缝互操作
可移植性（浏览器/服务器/边缘）
模块化设计
WASI（系统接口）扩展

1.3 主要应用领域

游戏开发： 3D 游戏引擎（Unity、Unreal）
视频/图像编辑： 浏览器端媒体处理
科学计算： 数值模拟、数据分析
CAD/3D 建模： 复杂渲染
区块链： 智能合约执行（EOS、Polkadot）
边缘计算： 轻量级应用部署
服务器端： 使用 WASI

1.4 知名案例

Unity： 支持导出 WebAssembly
Figma： 使用 WebAssembly 提高性能
Adobe： Photoshop 使用 WebAssembly
Cloudflare： 使用 WebAssembly 运行边缘计算
国内： 字节跳动、阿里巴巴

⚙️ 第二部分：核心概念

2.1 WebAssembly 模块结构

模块（Module）： 编译后的二进制文件（.wasm）
内存（Memory）： 线性内存，可被 JavaScript 访问
表（Table）： 函数指针表
导入/导出（Import/Export）： 与 JavaScript 交互
指令集： 低级别的二进制指令

2.2 编译流程

# 编译流程
源代码 (C/C++/Rust/Go)
        ↓
   LLVM IR
        ↓
   WebAssembly 字节码 (.wasm)
        ↓
     浏览器/运行时

⚙️ 第三部分：代码实现

3.1 C/C++ 示例

// add.c
#include 

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

EMSCRIPTEN_KEEPALIVE
int factorial(int n) {
    if (n <= 1) return 1;
    return n * factorial(n - 1);
}

// 编译命令
// emcc add.c -o add.js -s EXPORTED_FUNCTIONS="[\"_add\", \"_factorial\"]"

3.2 Rust 示例

// lib.rs
use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn add(a: i32, b: i32) -> i32 {
    a + b
}

#[wasm_bindgen]
pub fn factorial(n: i32) -> i32 {
    if n <= 1 { 1 } else { n * factorial(n - 1) }
}

// 编译命令
// wasm-pack build --target web

3.3 Go 示例

// main.go
package main

import "syscall/js"

func add(this js.Value, args []js.Value) interface{} {
    a := args[0].Int()
    b := args[1].Int()
    return a + b
}

func factorial(this js.Value, args []js.Value) interface{} {
    n := args[0].Int()
    result := 1
    for i := 2; i <= n; i++ {
        result *= i
    }
    return result
}

func main() {
    c := make(chan struct{})
    js.Global().Set("add", js.FuncOf(add))
    js.Global().Set("factorial", js.FuncOf(factorial))
    <-c
}

// 编译命令
// GOOS=js GOARCH=wasm go build -o main.wasm

3.4 JavaScript 加载 Wasm

// 使用原生 WebAssembly API
async function loadWasm() {
    // 加载 .wasm 文件
    const response = await fetch("add.wasm");
    const bytes = await response.arrayBuffer();

    // 实例化模块
    const { instance } = await WebAssembly.instantiate(bytes, {
        env: {
            console_log: (ptr) => {
                console.log("Wasm log:", ptr);
            }
        }
    });

    // 调用导出函数
    const result = instance.exports.add(10, 20);
    console.log("10 + 20 =", result);

    const fact = instance.exports.factorial(5);
    console.log("5! =", fact);

    return instance;
}

// 使用 ESM 方式
import init, { add, factorial } from "./pkg/hello_wasm.js";

async function run() {
    await init();
    console.log("10 + 20 =", add(10, 20));
    console.log("5! =", factorial(5));
}

3.5 在线演示（HTML）

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>WebAssembly 演示</title>
</head>
<body>
    <h1>WebAssembly 计算器</h1>
    <div>
        <input id="num1" value="10" />
        <span>+</span>
        <input id="num2" value="20" />
        <button id="calculate">计算</button>
        <span id="result">结果: </span>
    </div>

    <script type="module">
        import init, { add } from "./pkg/hello_wasm.js";

        await init();

        document.getElementById("calculate").addEventListener("click", () => {
            const a = parseInt(document.getElementById("num1").value);
            const b = parseInt(document.getElementById("num2").value);
            const result = add(a, b);
            document.getElementById("result").textContent = `结果: ${result}`;
        });
    </script>
</body>
</html>

3.6 WASI（系统接口）

// Rust WASI 示例（运行在浏览器外）
use std::fs::File;
use std::io::{Read, Write};

fn main() {
    // 文件操作（WASI 支持）
    let mut file = File::open("input.txt").unwrap();
    let mut contents = String::new();
    file.read_to_string(&mut contents).unwrap();

    let output = contents.to_uppercase();

    let mut out_file = File::create("output.txt").unwrap();
    out_file.write_all(output.as_bytes()).unwrap();

    println!("文件处理完成!");
}

// 编译命令
// cargo build --target wasm32-wasi

// 运行
// wasmtime target/wasm32-wasi/debug/wasi-example.wasm

3.7 性能对比

// 性能测试示例
console.time("JavaScript");
for (let i = 0; i < 1000000; i++) {
    jsAdd(i, i);
}
console.timeEnd("JavaScript");

console.time("WebAssembly");
for (let i = 0; i < 1000000; i++) {
    wasmAdd(i, i);
}
console.timeEnd("WebAssembly");

// 典型结果:
// JavaScript: ~50ms
// WebAssembly: ~5ms (快 10 倍)

⚖️ 第四部分：WebAssembly vs JavaScript

对比项	WebAssembly	JavaScript
执行方式	二进制字节码	源码解释/JIT
性能	接近原生	快
语言生态	C/C++/Rust/Go	JS/TS
DOM 操作	需通过 JS	原生
调试	较困难	完善
适用场景	计算密集型	通用 Web

🧠 第五部分：学习建议

前置知识

JavaScript、C/C++/Rust 基础

基础入门

WebAssembly 概念、编译流程、浏览器加载

核心进阶

WAT 文本格式、内存管理、与 JS 互操作

高级方向

WASI、多线程、优化、边缘计算

🎯 总结升华

WebAssembly 是 Web 平台的"性能引擎"。

它用 接近原生的性能、跨语言支持、安全沙箱 让 Web 应用可以运行计算密集型任务。WebAssembly 是 Web 技术的未来方向。

"WebAssembly 让 Web 应用跑得更快、更强。" 🚀

🔖 相关标签

📄 本文档为 WebAssembly 完整白皮书 · 最后更新于 2026年06月28日

📑 本文目录