什么是 Web 端推理？
深度学习模型不再只能跑在服务器或云端，现在可以直接在浏览器里运行。这种做法属于“端智能”（Edge AI）：模型随网页下载到用户设备，在本地完成推理。
为什么要在浏览器里跑模型？
- 体验更好：本地计算，结果几乎实时。
- 部署简单：一份前端代码即可覆盖 PC、手机、小程序等多端。
- 节省成本：减少云端算力投入，服务器费用更低。
- 隐私与离线：数据不出本机，弱网甚至离线场景也能用。
需要克服的难题
- 设备性能有限：浏览器的 CPU／GPU 和内存各不相同。
- 模型体积受限：超大模型难以下载也难运行。
- API 不统一：各浏览器对 WebGL／WebGPU／WASM 的支持程度不同。
浏览器里的计算能力
| 方案 | 运行在 | 特点 | 兼容性 |
|---|---|---|---|
| 原生 JavaScript | CPU | 最通用，但速度最慢 | ★★★★★ |
| WebAssembly (WASM) | CPU | C/C++/Rust 编译后可用，明显提速 | ★★★★☆ |
| WASM‑SIMD / Threads | CPU | 指令级并行 & 多线程 | ★★★☆☆ |
| WebGL | GPU | 本为图形渲染，可做并行计算 | ★★★★☆ |
| WebGPU | GPU | 下一代标准，性能最好 | ★★☆☆☆（实验阶段） |
性能：WebGPU > WebGL ≈ WASM‑Threads > WASM > JS
兼容：JS > WebGL > WASM > WASM‑Threads > WebGPU
主流 Web 推理引擎
| 引擎 | 生态 / 特点 | 支持后端 |
|---|---|---|
| TensorFlow.js | Google；训练 + 推理一站式 | WASM / WebGL / WebGPU(实验) |
| ONNX Runtime Web | 微软；通吃各框架的 ONNX 模型 | WASM / WebGL / WebGPU(实验) |
| WebDNN | 东京大学；极致性能 | WASM / WebGPU |
| TVM | 端到端编译器；从 0.7 起主推 WebGPU | WASM / WebGPU |
| 其他：mxnet.js、mnn.js、ant‑tfjs 等 | 面向特定场景 | 视引擎而定 |
目前多数引擎主力优化 WASM 与 WebGL，WebGPU 仍在测试。
性能示例（浏览器内跑 MNIST）
| 后端 | TensorFlow.js | ONNX Runtime Web | WebDNN |
|---|---|---|---|
| JS | 1500 ms | 1500 ms | – |
| WASM | 500 ms | 135 ms | – |
| WebGL | 37 ms | 40 ms | 200 ms |
测试环境：Intel i7 + Chrome 91，仅作趋势参考
认识 ONNX & ONNX Runtime（ORT）
- ONNX：开源模型交换格式，让不同深度学习框架互通。
- ORT：官方推理引擎，支持 CPU、CUDA、TensorRT、ROCm、OpenVINO 等多种硬件。
- 优势：跨平台、高性能、社区活跃，还提供 ORT Training 用于模型微调加速。
ORT JavaScript 家族
| 场景 | 包名 | 用途 |
|---|---|---|
| 浏览器 | onnxruntime-web | WASM / WebGL / WebGPU |
| Node.js / Electron | onnxruntime-node | 服务器或桌面应用 |
| React Native | onnxruntime-react-native | iOS / Android 本地推理 |
在浏览器里跑一个矩阵乘法模型
import * as ort from 'onnxruntime-web';
// 1) 创建 Session 并加载模型
const session = await ort.InferenceSession.create('./model.onnx');
// 2) 准备输入
a = new ort.Tensor('float32', Float32Array.from([1,2,3,4]), [2,2]);
b = new ort.Tensor('float32', Float32Array.from([5,6,7,8]), [2,2]);
// 3) 执行推理
const { c } = await session.run({ a, b });
console.log(c.data); // 输出结果
若要使用 WebGPU：
import * as ort from 'onnxruntime-web/webgpu';
Webpack 打包 .wasm 提示
plugins: [
new CopyPlugin({
patterns: [{ from: 'node_modules/onnxruntime-web/dist/*.wasm', to: '[name][ext]' }]
})
]
如果你的静态资源放在 CDN，请用 ort.env.wasm.wasmPaths 手动指定路径。
小结
Web 端推理已经可以胜任实时图像、语音等任务。ONNX 这种通用格式让训练与部署不再受框架限制。随着 WebGPU 的完善，在浏览器里直接跑大模型将越来越常见。
