WebAssembly

概述

WebAssembly (Wasm) 是浏览器中的低级字节码格式，提供接近原生的性能。

一、使用场景

场景	例子
计算密集	图像/视频处理、加密
游戏	Unity WebGL、Unreal
移植现有代码	C/C++/Rust 库
代码保护	核心算法加密

二、加载与调用

// 方式一：fetch + instantiate
const response = await fetch('module.wasm');
const buffer = await response.arrayBuffer();
const { instance } = await WebAssembly.instantiate(buffer, {
  env: {
    log: (n) => console.log(n)
  }
});

instance.exports.add(1, 2);

// 方式二：streaming (推荐)
const { instance } = await WebAssembly.instantiateStreaming(
  fetch('module.wasm'),
  importObject
);

三、与 JavaScript 交互

// 导出函数
const add = instance.exports.add;
add(1, 2); // 调用 Wasm 函数

// 共享内存
const memory = new WebAssembly.Memory({ initial: 1, maximum: 10 });
const view = new Uint8Array(memory.buffer);

// 传递字符串 (需要编码)
const encoder = new TextEncoder();
const bytes = encoder.encode('hello');
view.set(bytes, 0);

四、工具链

语言	工具
C/C++	Emscripten
Rust	wasm-pack
Go	TinyGo
AssemblyScript	直接 TypeScript

Rust 示例

// lib.rs
#[no_mangle]
pub extern "C" fn fibonacci(n: u32) -> u32 {
    if n <= 1 { n } else { fibonacci(n - 1) + fibonacci(n - 2) }
}

wasm-pack build --target web

五、性能对比

// JavaScript
function fib(n) {
  if (n <= 1) return n;
  return fib(n - 1) + fib(n - 2);
}

// Wasm 通常快 2-10 倍 (计算密集场景)

---

面试高频题

Q1: Wasm 比 JS 快多少？

计算密集场景快 2-10 倍，DOM 操作反而更慢。

Q2: Wasm 可以操作 DOM 吗？

不能直接操作，需要通过 JS 中转。

Q3: Wasm 适合什么场景？

图像处理、加密、游戏引擎、移植原生库。