← 返回博客

在浏览器中运行 AI：WebAssembly 与 WebGPU 如何改变图片处理

发布：2026-10-15

浏览器 AI 的新时代

2020 年以前，在浏览器中运行神经网络几乎是不可想象的——需要下载几百 MB 的模型文件，推理速度慢到无法使用。如今，得益于 WebAssembly 和 WebGPU 两大技术，AI 推理已经可以在你的浏览器标签页中实时完成，无需安装任何软件，图片永远不离开你的设备。

WebAssembly（WASM）：跨平台的字节码

WebAssembly 是一种低级字节码格式，浏览器可以将其编译为机器码并以接近原生的速度执行。AI 推理框架（如 ONNX Runtime Web）将 C++ 编写的推理引擎编译为 WASM，在浏览器中提供与桌面应用相近的计算能力。

WASM 的核心优势

• 跨平台：同一份代码在 Windows、Mac、Linux、Android、iOS 上都能运行，无需针对每个平台单独编译
• 安全沙箱：在浏览器安全模型内运行，无法访问文件系统或系统资源
• 生态成熟：SIMD 指令集加速数值计算，多线程支持充分利用多核 CPU

WASM 的局限

• 内存限制：受浏览器内存配额约束（通常 2-4GB），不适合超大模型
• 无 GPU 加速：纯 CPU 计算，矩阵运算速度远不如 GPU

WebGPU：浏览器中的 GPU 计算

WebGPU 是 WebGL 的继任者，提供对现代 GPU 的计算着色器访问。AI 模型的核心运算是矩阵乘法，这天然适合 GPU 的数千个并行计算单元。WebGPU 带来了 5-20 倍的推理加速。

WebGPU 浏览器支持（2026 年）

浏览器	状态	版本
Chrome (桌面)	稳定	113+
Edge (桌面)	稳定	113+
Safari (桌面)	稳定	18+
Firefox	稳定	141+
Chrome (Android)	实验性	121+

性能对比实测

以 Real-ESRGAN 放大 1024×768 图片为基准（桌面 Intel i7 + RTX 3060）：

后端	耗时	加速比
WASM 单线程	~45 秒	1×
WASM 多线程 (4核)	~15 秒	3×
WebGPU (集成显卡)	~3 秒	15×
WebGPU (RTX 3060)	~1 秒	45×

本站的实践架构

卷卷的小工具同时使用两种技术，根据设备能力自动选择：

• 抠图（U²-Net）：ONNX Runtime Web + WASM 后端，模型仅 2.4MB，所有设备可用
• 放大（Real-ESRGAN）：WebGPU 优先（Chrome/Edge/Safari 桌面版自动加速），不支持时回退 WASM
• 智能精修（MobileSAM）：量化 WASM，首次下载 23MB 后由浏览器缓存

隐私优势

浏览器端推理意味着图片永远不离开你的设备。即使断网，抠图功能依然完全可用。这是本站的核心设计理念——云端通道不可用时，本机处理作为免费兜底。

未来展望

• WebNN API：浏览器原生神经网络 API，直接调用设备 NPU（神经网络处理单元），速度有望再提升 10 倍
• 模型量化：INT4/INT8 量化使模型缩小 4-8 倍，精度损失控制在 1% 以内
• 更大的模型：随着 WebGPU 内存配额提升（4GB+），SAM 完整版等大模型有望在浏览器中运行