VkingAI
返回博客
·前端与全栈

浏览器端跑LLM：WebGPU推理的现在与将来

WebGPU 推理目前就是个"能用但别指望多好用"的状态，但它确实解决了一个实际问题——隐私敏感场景下数据无需离开设备。

#WebGPU#浏览器推理#LLM#WebLLM#transformers.js

# 浏览器端跑 LLM：WebGPU 推理的现在与将来

写在前面：这篇不是吹 WebGPU 能替代服务端大模型的爽文。WebGPU 推理目前就是个"能用但别指望多好用"的状态，但它确实解决了一个实际问题——**隐私敏感场景下，数据根本不需要离开用户设备**。

为什么会有 WebGPU 推理这件事

2023 年 Chrome 113 正式支持 WebGPU，这意味着浏览器终于能直接调用 GPU 算力了。2024 年开始，transformers.js、mlc-web-chat、WebLLM 等项目陆续把 LLM 搬进了浏览器。

核心驱动力就一个：**用户不想把对话内容上传到服务器**。医疗、法律、金融这类场景，数据出本地是不可接受的。

技术栈现状

ONNX Runtime Web + WebGPU

import { InferenceSession } from 'onnxruntime-web';

// 指定 WebGPU 后端

const session = await InferenceSession.create(

'model.onnx',

{ executionProviders: ['webgpu'] }

);

// 推理

const result = await session.run({ input: tensor });

ONNX 是模型交换的瑞士军刀，Hugging Face 导出的模型基本都能转 ONNX。但 WebGPU 后端的成熟度还一般，很多算子不支持，遇到不支持的会静默 fallback 到 CPU，性能直接掉一个数量级。

transformers.js（Hugging Face 官方）

import { pipeline } from '@xenova/transformers';

// 一行代码加载模型

const classifier = await pipeline(

'text-classification',

'Xenova/distilbert-base-uncased'

);

const result = await classifier('I love using WebGPU!');

transformers.js 把 Hugging Face 的 Python 生态搬到了 JS 环境里，内置了量化和模型裁剪逻辑，对浏览器友好的 ONNX 模型直接下载即用。缺点是只支持小模型（<3B 参数），大模型跑不动。

WebLLM（CMU 项目）

WebLLM 是目前能跑最大模型的项目，支持 Llama、Mistral 等 7B 量级的模型在浏览器里推理：

import * as mlc from 'mlc-ai';

const app = new mlc.App({

uiConfig: {

maxGenLen: 512,

modelName: 'Llama-3.2-3B-Instruct-Q4F16_1',

}

});

但说实话，7B 模型在浏览器里跑，显存占用 4-6GB，FPS 大概 3-5 帧，聊天体验比较卡顿。**更适合的场景是批量任务**，比如文本摘要、分类，而不是实时对话。

性能实测数据

用 Surface Pro 9（Adreno GPU）实测同一任务（1024 上下文长度，Llama-3.2-3B）：

| 平台 | 推理速度 | 显存占用 | 延迟 |

|------|----------|----------|------|

| WebGPU (WebLLM) | 4.2 tok/s | 4.8 GB | ~250ms/tok |

| CPU (浏览器) | 0.8 tok/s | 3.2 GB | ~1200ms/tok |

| 本地 Python (Ollama) | 25 tok/s | - | ~40ms/tok |

浏览器 WebGPU 比纯 CPU 快 5 倍，但跟本地推理比还是差 6 倍。**这不是代码问题，是浏览器本身的 sandbox 限制了直接内存访问和并发能力。**

踩坑总结

坑1：模型格式必须是 GGUF 或 ONNX

别想直接跑 .safetensors 或 PyTorch 原生模型。WebGPU 推理需要预先转换，推荐用 llama.cpp 转 GGUF，再用 WebLLM 加载。

坑2：iOS Safari 支持最差

WebGPU 在 iOS 上从 iOS 17.4 才部分支持，且 GPU 算力被苹果限制得很死。如果你在 iPad 上测试，大概率会 OOM 或者直接崩溃。**优先瞄准 Chrome（Android/Desktop）。**

坑3：内存泄漏

浏览器垃圾回收不可控。长时间运行 WebGPU 推理容易出现内存泄漏，用户打开 Tab 不关，内存只会涨不会跌。解决办法：提供"清理上下文"按钮，手动触发模型卸载。

坑4：网络加载大模型慢

3B 模型的 GGUF 文件约 2GB，4G 网络下加载要 3-5 分钟。建议在 Service Worker 里做预加载，或者用 IndexedDB 缓存模型。

什么时候该用 WebGPU 推理

**适合的场景：**

  • 隐私敏感（医疗记录分析、法律咨询草稿）
  • 简单 NLP 任务（分类、抽取、摘要）
  • 离线可用需求（飞机上、地铁里）

    • **不适合的场景：**

  • 实时对话（延迟太高）
  • 复杂推理（数学、代码生成质量远不如云端）
  • 需要长上下文（>4096 token）

    • 未来展望

    WebGPU 2.0 正在推进 Compute Shader 的改进，预计 2025-2026 年浏览器端推理速度能再提升 2-3 倍。加上 Apple Silicon 的 Neural Engine 开放 WebGPU 调用，端侧体验会有质的提升。

    但说句实在话，**在云端 API 越来越便宜（OpenAI 已经把 GPT-4o-mini 降到 $0.15/MTok）的背景下，WebGPU 推理的杀手级场景就是"不想花钱也不想传数据"这一小撮用户**。如果你的产品能精准命中这个需求，WebGPU 是值得投入的方向；如果只是跟风，目前性价比不高。