WebAssembly

WebAssembly

突破 JavaScript 性能边界——在浏览器中以接近原生速度运行 C/C++/Rust 代码

接近原生性能
语言无关
浏览器原生支持
WASI 系统接口
10 核心章节
4大 主流浏览器支持
W3C 官方标准

为什么学 WebAssembly?

WebAssembly(简称 Wasm)是 W3C 于 2019 年正式发布的 Web 标准,是继 HTML、CSS、JavaScript 之后,第四种浏览器原生支持的语言格式。它不是一门编程语言,而是一种可移植的二进制指令格式——你可以用 C、C++、Rust、Go、AssemblyScript 等语言编写代码,然后编译成 .wasm 文件,在浏览器中以接近原生 CPU 的速度执行。

Wasm 的核心价值在于:JavaScript 是动态解释型语言,即使经过 JIT 优化也有上限;而 Wasm 直接运行二进制指令,在数值计算、图像处理、密码学等 CPU 密集型任务中,性能可达 JS 的 5-20 倍。谷歌 Earth、Figma、Adobe Photoshop Web 版都重度使用 Wasm。

更重要的是,Wasm 不再局限于浏览器。通过 WASI(WebAssembly System Interface),Wasm 可以在服务器端、边缘计算节点运行,成为下一代通用计算格式——「一次编译,到处运行」的愿景正在实现。

核心特性

WebAssembly 重新定义了 Web 应用的性能边界

二进制格式

紧凑的二进制格式,传输体积小,解析速度比 JS 快,接近原生执行效率。

🔒

安全沙箱

运行在内存沙箱中,线性内存模型,无法直接访问宿主内存,安全隔离。

🔗

JS 互操作

通过 WebAssembly.instantiate() 与 JavaScript 双向调用,共享内存,无缝协作。

🌐

多语言编译

C/C++(Emscripten)、Rust(wasm-pack)、Go、AssemblyScript 均可编译到 Wasm。

🖥️

WASI 标准

WebAssembly System Interface 让 Wasm 模块可在服务端安全访问文件、网络、时钟。

🧩

组件模型

新一代 Wasm 组件模型,通过 WIT 接口定义跨语言组件组合,构建可互操作生态。

课程目录

10 章系统掌握 WebAssembly,从原理到实战

Chapter 01

WebAssembly 概念:二进制格式与运行时

Wasm 诞生背景(asm.js 的局限)、.wasm 与 .wat 格式、安全模型、与 JS 的关系、四大浏览器支持时间线。

概念二进制格式运行时
Chapter 02

WAT:WebAssembly 文本格式

WAT 模块结构(module/func/export/import)、类型系统(i32/i64/f32/f64)、控制流、wat2wasm 编译、内存布局。

WATS表达式指令集
Chapter 03

Rust 编译到 Wasm:wasm-pack 实战

wasm-pack 工具链、#[wasm_bindgen] 宏、编译目标选择、pkg/ 目录结构、在 HTML 中加载、体积优化(wasm-opt)。

Rustwasm-packwasm-bindgen
Chapter 04

C/C++ 编译:Emscripten 工具链

Emscripten SDK 安装、emcc 编译 C 到 Wasm、ccall/cwrap 调用 C 函数、EM_JS 内联 JS、文件系统模拟、-O3 优化。

C/C++Emscriptenemcc
Chapter 05

JavaScript 互操作:调用与内存共享

WebAssembly.instantiate()、WebAssembly.Memory 线性内存、Table 函数引用、字符串传递、SharedArrayBuffer 与线程。

JS互操作线性内存SharedArrayBuffer
Chapter 06

浏览器中的 Wasm 性能分析

Chrome DevTools Wasm 调试、DWARF 源码映射、performance.now() 对比、V8 Turbofan JIT、内存分配优化、避免跨界开销。

性能分析调试V8
Chapter 07

Node.js 与服务端 Wasm 运行

Node.js 加载 Wasm 模块、@wasmer/wasi npm 包、Fastify 中使用 Wasm、Cloudflare Workers 边缘计算、Deno Wasm 支持。

Node.js服务端边缘计算
Chapter 08

WASI:WebAssembly 系统接口

WASI 规范(POSIX-like syscalls)、wasmtime/wasmer 运行时、wasi-sdk 编译 C、文件/网络/时钟访问控制、Spin 微服务。

WASIwasmtime系统接口
Chapter 09

组件模型:wit-bindgen 详解

Wasm 组件模型规范、WIT 接口类型定义、wit-bindgen 生成绑定、Guest/Host 接口设计、跨语言组件组合实战。

组件模型WITwit-bindgen
Chapter 10

实战:图像处理与密码学库

Rust + wasm-pack 图像处理(灰度/模糊/边缘检测)、C + Emscripten 密码学(libsodium)、性能对比、Vite 插件集成。

图像处理密码学实战