前端 WebAssembly 结合

WebAssembly 在前端不是用来取代 JavaScript 的，它的正确定位是：**把计算密集、或者已有 C/C++/Rust 存量代码的那部分逻辑，编译成浏览器能直接执行的二进制模块，JavaScript 继续负责 DOM 和业务调度**。判断要不要上 Wasm 只看一条——这段代码有没有稳定的热点计算，且 JS 优化到极限仍然不够快。

WebAssembly 和 JavaScript 到底什么关系？

结论：Wasm 是 JavaScript 的协处理器，不是替代品。

WebAssembly（缩写 Wasm，一种栈式虚拟机的二进制指令格式）在 2019 年 12 月 5 日成为 W3C 正式推荐标准。四大浏览器早在 2017 年就落地了 MVP：Chrome 57、Firefox 52（均为 2017 年 3 月）、Safari 11（2017 年 9 月）、Edge 16（2017 年 10 月）。

关键在于分工：Wasm 模块没有 DOM 权限，不能直接碰 document，所有页面交互都要经过 JS glue（胶水代码，编译器自动生成的 JS 包装层）。所以「用 Wasm 重写整个前端」是伪命题，真正可行的是把 JSON.parse、图像解码、加解密、物理计算这类纯函数搬进去。

前端怎么把 WebAssembly 接进来？分几步？

结论：主流三条路径——Rust + wasm-bindgen、C/C++ + Emscripten、AssemblyScript；新项目优先前两条。

Rust 路线：

cargo install wasm-pack
wasm-pack build --target web --release

产出 pkg/*.wasm 加 .js 绑定和 .d.ts 类型声明，前端直接 import init from './pkg/app.js'。

C/C++ 路线：

emcc add.c -O3 -s WASM=1 -s MODULARIZE=1 -s EXPORT_ES6=1 -o add.js

加载模块推荐用流式编译：

const { instance } = await WebAssembly.instantiateStreaming(fetch('/app_bg.wasm'));
instance.exports.add(1, 2);

注意 instantiateStreaming 要求服务器返回 Content-Type: application/wasm，否则会抛错退回 instantiate(arrayBuffer)，编译时机就从「边下载边编译」退化成「下载完再编译」。

哪些场景值得用，哪些纯属给自己找麻烦？

结论：图像/音视频处理、加解密、压缩、物理模拟、已有 C++ 引擎移植值得用；DOM 操作、表单校验、普通业务逻辑不要用。

有实据的案例：ffmpeg.wasm 把整套音视频转码搬到浏览器；SQLite 官方从 3.41.0 版本（2023 年 2 月）起直接提供 WASM 构建；Figma 用 C++ 写的渲染器编译成 Wasm，官方公布加载速度提升约 3 倍；Unity、Unreal 导出的网页游戏底层也是 Wasm。

反过来说，一个只做字符串拼接的 Wasm 模块，反而比原生 JS 慢——因为每次 JS 调用 Wasm 导出函数都有固定的跨边界开销，省下的那点计算时间补不回来。

性能优化必须盯住哪几点？

结论：瓶颈通常不在计算本身，而在 JS 与 Wasm 的边界调用次数和数据拷贝。

• 减少调用：一次传 TypedArray，比在 JS 里循环调用一万次导出函数快一个量级。
• 内存模型：WebAssembly.Memory 以 64 KiB 为一页，wasm32 寻址上限 4 GiB（65536 页），超出要用 memory64 提案。
• 多线程：依赖 SharedArrayBuffer，页面必须带上这两个响应头才能启用：

  Cross-Origin-Opener-Policy: same-origin
  Cross-Origin-Embedder-Policy: require-corp
  

• SIMD：128 位定长 SIMD 从 Chrome 91、Firefox 89、Safari 16.4 起默认开启，向量化后的图像处理常见有数倍提升。
• 体积：用 Binaryen 的 wasm-opt -Oz 压缩；一个空的 wasm 模块只有 8 字节（魔数 0x00 61 73 6D 加版本号），但带上标准库和绑定胶水后通常从几 KB 涨到几 MB，这是首屏最大的风险点。

一句话收束：前端引入 WebAssembly 的正确姿势，是先用 Profiler 找到 JS 的算力天花板，再把那一块换成 Wasm，其余部分继续用 JavaScript 写，边界上的数据拷贝和模块体积才是真正要反复权衡的地方。