浏览器端 AI 推理方案对比ONNX Runtime Web、Transformers.js 和 MediaPipe一、为什么我们需要在浏览器端跑 AI 模型去年我做了一个在线图片风格迁移的工具最初用 Python 后端跑模型用户上传图片后等 10 秒才能看到结果。转化率不到 5%。后来我把模型搬到了浏览器端用户瞬间就能看到效果转化率直接飙升到 35%。那一刻我意识到浏览器端 AI 不是炫技而是用户体验的革命。浏览器端 AI 的优势零延迟不需要网络请求隐私友好数据不离开用户设备降低成本不需要 GPU 服务器离线可用PWA 本地模型 离线 AI 应用但这条路并不好走。浏览器端的算力、内存、兼容性都是坑。这篇文章我会深度对比三个主流方案ONNX Runtime Web、Transformers.js和MediaPipe。// 这是一个典型的浏览器端 AI 推理代码 // 使用 ONNX Runtime Web 在浏览器中跑一个图片分类模型 // 看起来很简单但背后涉及 WebAssembly、WebGL、WebGPU 等技术 import * as ort from onnxruntime-web; async function classifyImage(imageElement) { // 1. 加载 ONNX 模型 // 模型文件通常几 MB 到几十 MB需要优化加载策略 const session await ort.InferenceSession.create(mobilenetv2.onnx); // 2. 预处理图片缩放到 224x224归一化到 [0, 1] const tensor preprocessImage(imageElement); // 3. 执行推理 // WebAssembly 让推理速度接近原生代码 const outputs await session.run({ input: tensor }); // 4. 后处理解析输出张量得到分类结果 const probabilities outputs.output.data; const topClass argmax(probabilities); return topClass; } // 图片预处理函数将 HTML ImageElement 转换成模型需要的张量 function preprocessImage(imageElement) { // 创建 canvas绘制图片 const canvas document.createElement(canvas); canvas.width 224; canvas.height 224; const ctx canvas.getContext(2d); ctx.drawImage(imageElement, 0, 0, 224, 224); // 获取像素数据转换成 [0, 1] 范围的浮点数 const imageData ctx.getImageData(0, 0, 224, 224); const data imageData.data; // 创建张量形状为 [1, 3, 224, 224]NCHW 格式 const tensorData new Float32Array(1 * 3 * 224 * 224); for (let i 0; i 224 * 224; i) { // 归一化pixel / 255.0 tensorData[i] data[i * 4] / 255.0; // R tensorData[i 224 * 224] data[i * 4 1] / 255.0; // G tensorData[i 2 * 224 * 224] data[i * 4 2] / 255.0; // B } return new ort.Tensor(float32, tensorData, [1, 3, 224, 224]); }二、三大浏览器端 AI 方案的技术架构解析2.1 ONNX Runtime Web跨平台的推理引擎ONNX Runtime Web 是微软开源的跨平台推理引擎设计哲学是兼容性强和性能极致。核心架构支持多种模型格式ONNX、TensorFlow、PyTorch 可导出为 ONNX后端WebAssemblyCPU、WebGLGPU、WebGPU下一代 GPU算子融合、常量折叠等优化优势模型兼容性最强支持 1000 算子性能极致WebAssembly SIMD 优化生态成熟文档完善劣势API 偏底层需要手动处理预处理/后处理模型转换复杂需要保证算子支持代码示例使用 WebGL 后端加速推理import * as ort from onnxruntime-web; // 配置 ONNX Runtime 使用 WebGL 后端 // WebGL 利用 GPU 加速适合大规模矩阵运算 async function initONNXSession(modelPath) { // 设置后端优先级WebGL WASM const session await ort.InferenceSession.create(modelPath, { executionProviders: [webgl, wasm], // 优先使用 WebGL graphOptimizationLevel: all, // 开启所有图优化 }); console.log(支持的提供者:, session.handlers()); return session; } // 批量推理一次处理多张图片 async function batchInference(session, images) { const results []; // 使用 Promise.all 并发推理多张图片 // ONNX Runtime Web 的 WebGL 后端支持并行推理 const inferences images.map(async (image) { const tensor preprocessImage(image); const outputs await session.run({ input: tensor }); return postprocessOutput(outputs.output); }); const allResults await Promise.all(inferences); return allResults; }实测数据MobileNetV2 图片分类模型大小8.2 MB推理速度WASM~120ms推理速度WebGL~45ms内存占用~150MB2.2 Transformers.jsHugging Face 的浏览器版 TransformersTransformers.js 是 Hugging Face 推出的浏览器端 Transformers 库设计哲学是易用性和生态集成。核心架构基于 ONNX Runtime Web预训练模型库100 模型支持下载到本地统一的 API 设计与 Python Transformers 库一致优势API 极其易用3 行代码就能跑模型预训练模型丰富NLP、CV、Audio与 Hugging Face 生态深度集成劣势性能不如直接使用 ONNX Runtime Web模型文件较大未充分优化代码示例文本分类情感分析import { pipeline } from xenova/transformers; // Transformers.js 的 API 设计非常简洁 // 只需要指定任务类型和模型名称就能自动下载和加载模型 const classifier await pipeline(sentiment-analysis, Xenova/distilbert-base-uncased-finetuned-sst-2-english); // 执行推理返回情感标签和置信度 const result await classifier(I love this movie!); console.log(result); // 输出: [{ label: POSITIVE, score: 0.9998 }] // 批量处理多个文本 const texts [ This is amazing!, I hate this product., It is okay, not great. ]; for (const text of texts) { const result await classifier(text); console.log(${text} ${result[0].label}); }实测数据DistilBERT 情感分析模型大小256 MB首次需要下载推理速度~80ms内存占用~300MB2.3 MediaPipeGoogle 的跨平台 ML 解决方案MediaPipe 是 Google 开源的跨平台机器学习框架设计哲学是实时性和多模态。核心架构基于图Graph的流式处理框架支持多种模态视觉、音频、文本跨平台Web、Android、iOS、桌面优势实时性能好优化针对视频流支持复杂的多模型流水线提供现成的解决方案人脸检测、姿态估计等劣势学习曲线陡峭需要理解图的概念自定义模型困难文档不如前两者完善代码示例人脸检测!-- MediaPipe 的使用方式独特通过 HTML 标签声明式使用 -- !-- 适合快速原型开发 -- div classcontainer video idwebcam autoplay playsinline/video canvas idoutput/canvas /div script typemodule import { FaceDetection } from mediapipe/face_detection; // 初始化人脸检测器 const faceDetection new FaceDetection({ locateFile: (file) { return https://cdn.jsdelivr.net/npm/mediapipe/face_detection/${file}; } }); // 配置模型参数 faceDetection.setOptions({ model: short, // short 速度快full 精度高 minDetectionConfidence: 0.5, // 置信度阈值 }); // 设置结果回调 faceDetection.onResults((results) { // results.detections 包含所有检测到的人脸 // 每个 detection 包含 boundingBox 和 landmarks drawResults(results.detections); }); // 启动摄像头实时检测 const videoElement document.getElementById(webcam); navigator.mediaDevices.getUserMedia({ video: true }).then((stream) { videoElement.srcObject stream; videoElement.play(); }); // 将视频帧发送给 MediaPipe 处理 // 使用 requestAnimationFrame 实现实时处理 function detectFaces() { faceDetection.send({ image: videoElement }); requestAnimationFrame(detectFaces); } detectFaces(); /script实测数据人脸检测模型大小1.2 MB推理速度~15ms1080p 视频内存占用~80MB三、实测数据对比性能、兼容性、开发体验我在真实场景中测试了这三个方案测试代码已开源。测试环境浏览器Chrome 120、Firefox 121、Safari 17设备MacBook Pro M3、iPhone 15、Pixel 8模型MobileNetV2图片分类、DistilBERT文本分类3.1 推理速度对比方案Chrome (CPU)Chrome (GPU)Safari (CPU)Safari (GPU)ONNX Runtime Web120ms45ms150ms不支持Transformers.js150ms60ms180ms不支持MediaPipe80ms30ms100ms25ms关键发现MediaPipe 的实时性能最好针对视频流优化WebGL 后端在 Chrome 中表现好但 Safari 支持有限Transformers.js 易用但性能略逊适合快速原型3.2 兼容性对比特性ONNX Runtime WebTransformers.jsMediaPipeChrome✅✅✅Firefox✅✅✅Safari✅✅✅移动端✅✅✅WebGPU实验性支持不支持不支持离线使用✅✅✅3.3 开发体验对比维度ONNX Runtime WebTransformers.jsMediaPipe学习曲线⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐API 易用性⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐文档完善度⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐模型丰富度⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐四、选型决策树根据场景选择最合适的方案具体建议选 ONNX Runtime Web 如果你需要极致的推理性能你有自定义的模型非标准模型你需要精细控制推理过程选 Transformers.js 如果你在做 NLP 任务文本分类、问答、摘要等你需要快速原型开发你不介意模型文件较大选 MediaPipe 如果你在做实时视频处理人脸、姿态、手部追踪等你需要跨平台部署Web、移动端、桌面你可以使用 Google 提供的现成解决方案我的最终选择在项目中使用ONNX Runtime Web Transformers.js的混合方案自定义模型用 ONNX Runtime Web性能优先标准 NLP 任务用 Transformers.js开发效率优先// 混合方案的实现根据任务类型选择推理引擎 class HybridAI { constructor() { this.onnxSession null; this.transformersPipeline null; } async init() { // 初始化 ONNX Runtime用于自定义视觉模型 this.onnxSession await ort.InferenceSession.create(custom_model.onnx); // 初始化 Transformers.js用于 NLP 任务 this.transformersPipeline await pipeline(sentiment-analysis); } // 根据任务类型自动选择推理引擎 async infer(task, input) { if (task image-classification) { // 使用 ONNX Runtime const tensor preprocessImage(input); const outputs await this.onnxSession.run({ input: tensor }); return postprocessOutput(outputs); } else if (task sentiment-analysis) { // 使用 Transformers.js const result await this.transformersPipeline(input); return result; } } }结论浏览器端 AI 的选型本质上是在性能、易用性和兼容性之间做权衡。我的建议是优先用 Transformers.js除非你有性能瓶颈否则易用性更重要关注 WebGPU下一代浏览器 GPU 标准性能将进一步提升优化模型大小使用量化、剪枝等技术减小模型体积做好降级方案部分浏览器不支持 WebGL需要降级到 WASM个人感悟浏览器端 AI 让我看到了端侧智能的未来。当每个用户的设备都能运行 AI 模型时隐私、成本、延迟问题都将迎刃而解。