浏览器端AI推理对比：ONNX与MediaPipe

浏览器端 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）
后端：WebAssembly（CPU）、WebGL（GPU）、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
内存占用：~150MB

2.2 Transformers.js：Hugging Face 的浏览器版 Transformers

Transformers.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
内存占用：~300MB

2.3 MediaPipe：Google 的跨平台 ML 解决方案

MediaPipe 是 Google 开源的跨平台机器学习框架，设计哲学是实时性和多模态。

核心架构：

基于图（Graph）的流式处理框架
支持多种模态（视觉、音频、文本）
跨平台（Web、Android、iOS、桌面）

优势：

实时性能好（优化针对视频流）
支持复杂的多模型流水线
提供现成的解决方案（人脸检测、姿态估计等）

劣势：

学习曲线陡峭（需要理解图的概念）
自定义模型困难
文档不如前两者完善

代码示例：人脸检测

<!-- MediaPipe 的使用方式独特：通过 HTML 标签声明式使用 -->
<!-- 适合快速原型开发 -->
<div class="container">
    <video id="webcam" autoplay playsinline></video>
    <canvas id="output"></canvas>
</div>

<script type="module">
    import { FaceDetection } from '@mediapipe/face_detection';

    // 初始化人脸检测器
    const faceDetection = new FaceDetection({
        locateFile: (file) => {
            return `
        }
    });

    // 配置模型参数
    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
推理速度：~15ms（1080p 视频）
内存占用：~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 Web	120ms	45ms	150ms	不支持
Transformers.js	150ms	60ms	180ms	不支持
MediaPipe	80ms	30ms	100ms	25ms

关键发现：

MediaPipe 的实时性能最好，针对视频流优化
WebGL 后端在 Chrome 中表现好，但 Safari 支持有限
Transformers.js 易用但性能略逊，适合快速原型

3.2 兼容性对比

特性	ONNX Runtime Web	Transformers.js	MediaPipe
Chrome	✅	✅	✅
Firefox	✅	✅	✅
Safari	✅	✅	✅
移动端	✅	✅	✅
WebGPU	实验性支持	不支持	不支持
离线使用	✅	✅	✅

3.3 开发体验对比

维度	ONNX Runtime Web	Transformers.js	MediaPipe
学习曲线	⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐
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

个人感悟：