WebAssemblyWasm通俗讲解一句话WebAssembly (Wasm) 是运行在浏览器里的「二进制高性能代码」JS 是解释型脚本Wasm 是编译后的二进制指令速度接近原生 C/C。类比JavaScript像 Python边解释边跑性能一般WebAssembly像 exe 程序提前编译好浏览器虚拟机直接执行计算速度飞快能干什么浏览器里跑重型计算图像、视频解码、游戏、3D、AI 模型语言跨平台C/C/Rust/Go →编译→Wasm在浏览器、Node.js、Cloud‑Wasm 容器运行和 JS 互相调用JS 负责页面交互Wasm 负责重活计算Wasm不能直接操作 DOM只能通过 JS 做桥梁运行流程C/C/Rust源码 → 编译器(Emscripten) → .wasm二进制文件 ↓ 浏览器下载wasm → 实例化 → JS调用wasm函数极简可运行示例JS Wasm不需要装复杂的 C 编译器直接手写一份 wasm 文本 (.wat).wat是 WebAssembly 可读文本格式可以编译成.wasm1. 新建文件add.wat(module ;;导出一个add加法函数接收两个i32整数返回和 (func $add (param $a i32) (param $b i32) (result i32) local.get $a local.get $b i32.add ) (export add (func $add)) )含义导出加法函数add(a,b)ab2. 把 wat 转为 wasm在线转换工具不用本地装工具 webassembly.studio 或者 wat2wasm 命令wabt 工具wat2wasm add.wat -o add.wasm3.HTML 页面加载 wasmJS 调用它 (index.html)!DOCTYPE html html body script //读取并实例化wasm文件 fetch(./add.wasm) .then(res res.arrayBuffer()) .then(bytes WebAssembly.instantiate(bytes)) .then(result { //拿到导出的add函数 const {add} result.instance.exports; //调用Wasm里面的加法函数 const sum add(10, 20); console.log(Wasm计算结果,sum); //输出 30 }) /script /body /html启动一个本地 web 服务器打开 html不能直接双击打开文件浏览器跨域限制npx serve .打开页面控制台打印Wasm计算结果 30加法运算并不是 JS 算的而是 WebAssembly 二进制代码计算出来常用开发路线对比表格语言编译器输出 WasmRustwasm‑pack.wasm前端最主流C/CEmscripten(emcc).wasm js 胶水文件GoGo 内置编译器.wasm现实业务例子Figma、抖音网页版视频解码、游戏引擎、浏览器运行大模型 (LLM)底层大量使用 WasmRust WebAssembly 完整 Demo加法示例1、环境准备1.1 安装 Rust官网Install Rust - Rust Programming Language 安装完校验rustc --version cargo --version1.2 安装 wasm-packRust→Wasm 打包工具cargo install wasm-pack2、新建项目cargo new wasm-add-demo cd wasm-add-demo修改Cargo.toml[package] name wasm-add-demo version 0.1.0 edition 2021 [lib] crate-type [cdylib] [dependencies] wasm-bindgen 0.23、Rust 源码 src/lib.rsuse wasm_bindgen::prelude::*; // 导出函数给JavaScript调用 #[wasm_bindgen] pub fn add(a: i32, b: i32) - i32 { a b } #[wasm_bindgen] pub fn multiply(a:i32,b:i32)-i32{ a*b }4、编译打包生成 Wasmwasm-pack build --target web编译成功后输出产物在pkg/文件夹 里面包含wasm_add_demo_bg.wasm二进制 wasm 文件wasm_add_demo.js胶水 JS 模块5、编写前端 index.html和 pkg 文件夹同级!DOCTYPE html html langzh-CN head meta charsetUTF-8 titleRust‑Wasm Demo/title /head body script typemodule //导入wasm胶水模块 import init, {add,multiply} from ./pkg/wasm_add_demo.js; //初始化wasm await init(); //调用Rust写的函数 const res1 add(100, 200); const res2 multiply(6,7); console.log(add(100,200) , res1); console.log(multiply(6,7) , res2); /script /body /html6、启动本地 web 服务器必须不能双击打开 htmlnpx serve .浏览器打开控制台输出add(100,200) 300 multiply(6,7) 42目录结构wasm-add-demo/ ├─pkg/ # wasm编译产物 ├─src/ │ └─lib.rs # Rust源代码 ├─Cargo.toml └─index.html # 前端页面补充知识点#[wasm_bindgen]宏 Rust 与 JS 之间的桥梁负责类型转换--target web输出原生 ES 模块适合浏览器直接加载如果要给 Vue/React 项目使用目标参数改为--target bundler一、Wasm 在浏览器 Network (网络面板) 特征✅完全可以抓到1. 抓到的文件就是.wasm二进制文件例如wasm_add_demo_bg.wasmNetwork 面板特征文件后缀:.wasmResponse‑Header Content‑Type:Content-Type: application/wasm这是 Wasm 独有的 MIME 类型非常标志性预览 (Preview) 面板:乱码因为它是二进制文件不是文本不能像 JS、JSON 一样可读。请求发起者一般由你的 js 胶水文件发起获取二、Network 面板截图对照文字描述打开浏览器 F12 →Network→筛选All/Fetch/XHR你会看到三条请求index.html→ htmlwasm_add_demo.js→ js 胶水文件wasm_add_demo_bg.wasm→ wasm 二进制本体小提示.wasm请求不是 XHR它是通过fetch()下载所以在 Fetch/XHR 分类里面可以看见。三、Wasm 和普通 JS 在网络层面区别表格项目JavaScript(.js)WebAssembly(.wasm)Content‑Typeapplication/javascriptapplication/wasm文件内容可读文本代码二进制字节预览乱码加载方式浏览器直接解析执行下载后交给WebAssemblyAPI 实例化网络抓包能否看到源码能直接看到源码抓到也看不懂是编译后的二进制四、加载完整网络时序你 Rust 示例的请求流程浏览器请求index.html ↓ html加载js模块 pkg/wasm_add_demo.js ↓ js代码执行 init() →内部发起fetch下载 *.wasm二进制文件 ↓ 浏览器拿到wasm二进制 → WebAssembly.instantiate()实例化 ↓ JS就可以调用Rust导出的 add() multiply() 函数五、怎么判断一个网站有没有用 WebAssembly两种方法网络面板法 (F12‑Network)看有没有后缀.wasmContent‑Type:application/wasm调试器 (Debugger / 源代码面板)看有没有.wasm文件六、容易踩坑的现象wasm 文件被缓存了刷新看不到请求解决勾选网络面板上方「Disable cache禁用缓存」再刷新页面双击打开 html 本地文件浏览器禁止加载 wasm跨域 / 本地文件限制 所以必须启动本地 web 服务器npx serve .七、补充抓包拿到 .wasm 之后能不能逆向可以反编译但是看不到原始 Rust 源代码只能得到可读性很差的 Wasm 汇编文本 (.wat)。 工具wasm2watwabt 工具集将二进制还原成可读 wat 文本。