WebAssembly（Wasm）介绍-马育民老师

# 介绍

WebAssembly（简称 **Wasm**）是 **W3C 标准化、基于栈式虚拟机的低级二进制指令格式**，是一套跨平台可移植字节码标准，2019年正式成为Web官方标准，2026年标准演进至3.0版本。

### 常见误区

**Wasm不是编程语言**，它是**编译目标**，不能直接手写业务代码；它是JavaScript的**互补技术，而非替代品**。

### 设计目标

1. **高性能**：接近原生机器码执行速度，解决JS动态类型、GC卡顿、解析慢的性能瓶颈；
2. **安全沙箱**：内存隔离、强制校验、无原生系统权限，符合浏览器同源安全模型；
3. **语言中立**：不限定开发语言，C/C++/Rust/Go/AssemblyScript等均可编译为Wasm；
4. **全平台可移植**：一次编译，可运行在浏览器、Node.js、小程序、服务端、IoT、边缘设备；
5. **轻量化**：二进制文件体积极小，网络传输、解码速度远超JS文本文件。

### 与JavaScript的关系
- JS负责：DOM操作、UI渲染、网络请求、定时器、页面交互、业务逻辑胶水层；
- Wasm负责：**计算密集型核心**（图像处理、3D物理、音视频编解码、加密、大数据运算）；
- 互通机制：通过**导入/导出**双向调用，Wasm无法直接操作浏览器Web API，必须桥接JS。

# 两大代码格式

Wasm存在两种一一对应的表示形式：
### 1. 二进制格式 `.wasm`（生产环境）
- 机器可读、二进制字节流；
- 体积压缩、浏览器极速解码验证；
- 网络传输、线上运行唯一格式。

### 2. 文本格式 `.wat`（调试/手写汇编）
人类可读的类汇编文本，用于调试、手写极简Wasm模块，可通过wabt工具互转`.wasm`。
极简示例（两数相加）：
```wat
(module
  (func $add (param i32 i32) (result i32)
    local.get 0
    local.get 1
    i32.add
  )
  (export "add" (func $add))
)
```
编译后生成`.wasm`二进制文件。

# 底层架构原理
### 1. 栈式虚拟机（Stack VM）
Wasm执行引擎基于**隐式操作栈**，所有指令仅对栈中数据入栈/出栈运算：
1. 无CPU寄存器概念，架构极简，跨芯片（x86/ARM/RISC-V）适配成本极低；
2. 类型严格区分：仅支持固定数值类型 `i32/i64/f32/f64`，无动态对象；
3. 编译期完成类型校验，运行时无类型判断开销，JIT优化路径极短。

### 2. 五大核心模块组件（Module）
每个`.wasm`模块由5个基础资源构成，可导出给JS、导入JS函数：

| 组件 | 作用 |
|------|------|
| Function 函数 | Wasm核心执行逻辑，强类型参数返回值，可导入/导出 |
| Memory 线性内存 | 连续、可扩容的一维字节数组，模拟C/C++堆内存；JS与Wasm数据交换唯一载体 |
| Table 函数表 | 存储函数引用指针，支持动态函数间接调用（插件、回调场景） |
| Global 全局变量 | 模块全局数值，可变/不可变，JS可读写 |
| Import/Export 导入导出 | 双向通信接口：Wasm导入JS API、导出计算函数供JS调用 |

### 线性内存模型（关键）

1. 一块连续字节缓冲区，单位64KB页面，可动态扩容；
2. Wasm只能读写自身内存，**无法直接访问JS堆、DOM、系统内存**，天然内存隔离；
3. JS通过`WebAssembly.Memory`视图（Uint8Array等）读写内存，实现字符串、数组等复杂数据互通；
4. 无自动GC：C/C++手动malloc/free、Rust所有权自动回收，避免JS垃圾回收卡顿。

### 完整执行流程

```
高级语言源码（C/Rust/AssemblyScript）
    ↓ 工具链编译（LLVM后端）
.wasm 二进制文件
    ↓ JS fetch/import 加载二进制流
浏览器V8/SpiderMonkey引擎：
    1. 解码二进制（毫秒级完成，远快JS解析）
    2. 安全校验（内存越界、非法指令、类型错误拦截）
    3. 编译为机器码（JIT）
    ↓ 实例化（分配内存、初始化全局、绑定导入函数）
Wasm Instance 运行实例
    ←→ 双向调用 JS 函数
```

# 优缺点

### 优势

1. **极致计算性能**
   数值密集运算比纯JS快数倍~上百倍；无动态类型、无对象隐式转换、无GC停顿，性能稳定可预测。

2. **复用海量原生代码库**
   直接移植成熟C/C++库：FFmpeg音视频、OpenCV图像处理、Unity/Unreal游戏引擎、加密算法、物理引擎，无需JS重写。

3. **极强安全隔离**
   沙箱双层防护：模块加载强制校验、内存地址空间隔离；无法直接发起系统调用，恶意代码难以逃逸浏览器沙箱。

4. **跨端统一运行时**
   一套wasm文件同时跑：Chrome/Firefox/Safari、Node、Electron、微信小程序、云函数、嵌入式设备Wasm Runtime（Wasmtime/Wasmer）。

5. **极小包体积**
   二进制压缩率极高，同等逻辑比JS文本小30%~80%，减少网络加载耗时。

### 局限性

1. **无法直接操作Web API/DOM**
   所有DOM、网络、Canvas、文件操作必须调用JS桥接；高频互调会产生性能损耗，适合**重计算、少交互**场景。

2. **复杂数据交互繁琐**
   仅原生支持数字类型；字符串、对象、数组需要拷贝到线性内存，序列化/反序列化存在开销。

3. **开发调试门槛高于JS**
   - C/C++需要配置Emscripten编译环境；Rust需要学习所有权；AssemblyScript接近TS但生态有限；
   - 报错栈不直观，断点调试工具不如JS成熟。

4. **轻量场景收益低**
   简单循环、表单处理等轻逻辑，Wasm加载、实例化的初始化开销会抵消计算速度优势，得不偿失。

5. **生态相比JS单薄**
   Web前端基础设施（框架、UI组件）均基于JS，Wasm仅作为底层计算模块配套使用。

# 主流开发语言

### 1. C / C++ — Emscripten（最成熟）
适用：移植现有C++库、游戏、多媒体、图形处理

- 底层基于Clang+LLVM，将C/C++编译为Wasm；
- 内置胶水JS，封装内存、文件系统、浏览器API桥接；

### 2. Rust — wasm-pack（现代首选，内存安全）

适用：新项目、加密、高安全需求、无内存泄漏场景

- Rust官方原生支持wasm编译目标`wasm32-unknown-unknown`；
- 工具`wasm-pack`一键打包，自动生成JS绑定代码；

### 3. AssemblyScript（前端零门槛）

适用：前端开发者快速上手，语法完全对齐TypeScript

- 直接写类TS代码，编译为Wasm，无需学习系统语言；
- 局限：生态不如Rust/C++，底层能力较弱。

### 4. Go / Zig / Kotlin / Python

- Go：tinygo编译wasm，适合并发轻量模块；
- Zig：无运行时、极小二进制体积；
- Pyodide：完整Python解释器编译为Wasm，网页运行Python。

# 使用场景

### 前端浏览器场景
1. **3D游戏/渲染**：Unity/Unreal编译Wasm网页游戏、WebGL物理引擎；
2. **多媒体处理**：FFmpeg-Wasm前端视频转码、音视频滤镜、图片压缩（OpenCV）；
3. **加密/安全计算**：RSA/AES哈希、钱包加密算法，避免JS性能与安全隐患；
4. **大型文档处理**：前端解析PDF/Word/Excel、CAD图纸渲染；
5. **AI前端推理**：TensorFlow Lite Wasm、ONNX Runtime，浏览器本地运行模型；
6. **编辑器**：VS Code Web版内核、语法解析器编译为Wasm。

### 非Web跨平台场景（Wasm通用运行时）

1. **服务端**：轻量云函数、微服务，替代容器，启动速度远快Docker；
2. **小程序**：微信/抖音小程序支持Wasm，提升图片、音视频性能；
3. **IoT/边缘设备**：体积极小，低资源嵌入式设备运行；
4. **桌面端**：Electron、Tauri内嵌Wasm核心模块；
5. **沙箱插件**：软件插件隔离运行（IDE、浏览器扩展）。

### 推荐使用
- 海量数值循环、矩阵运算、图像处理、视频编解码；
- 需要移植成熟C/C++/Rust底层库；
- 前端本地AI推理、加密哈希、3D物理模拟；
- 服务端轻量隔离微服务、边缘设备程序。

### 不推荐使用
- 简单页面交互、DOM频繁操作、小型表单业务；
- 频繁JS/Wasm双向传复杂对象（大量序列化开销）；
- 仅几十行轻量逻辑，初始化开销抵消收益。

原文出处：http://malaoshi.top/show_1GW3gx1zec2q.html