ONNX Runtime Web 浏览器端推理4 个后端让模型跑进浏览器【免费下载链接】onnxruntimeONNX Runtime: cross-platform, high performance ML inferencing and training accelerator项目地址: https://gitcode.com/GitHub_Trending/on/onnxruntimeONNX Runtime Web 是一个把 ONNX 模型直接跑进浏览器和 Node.js 的 JavaScript 运行时。它把 C 推理引擎编译成 WebAssembly网页汇编浏览器能高速执行的二进制格式再叠加 WebGPU、WebGL 等 GPU 后端让你不用起服务端、数据不出设备就能在页面里完成一次模型推理——比如一个网页端的手写数字识别用户敲完一个数字100 毫秒内就在本地拿到结果。它到底能干什么一张能力全景表先看它能覆盖哪些场景再决定值不值得上。下表按能力 / 适用场景列出便于你快速对照自己的需求。能力一句话说明典型场景浏览器内推理模型加载、执行全部发生在客户端无需后端转发隐私敏感的分类、检测、输入法跨框架模型导入直接吃 PyTorch / TensorFlow 导出的 ONNX 文件已有模型直接落到 Web不重训CPU 全算子覆盖WebAssembly 后端支持几乎完整 ONNX 算子集NLP 模型、算子杂的模型GPU 加速WebGPU / WebGL 后端把张量运算甩给显卡视觉模型、大张量卷积无安装即用一个 JS 包 模型文件打开页面就跑嵌入式 Web 工具、离线演示从 ONNX 到浏览器内部是怎么跑的这一节解释为什么它快理解之后你看配置就不会瞎调。可以把整条链路想成一条传送带左侧是各家训练框架中间是 ONNX 这个通用语言做翻译右侧是各种部署目标浏览器只是其中一个。落到浏览器内部它分两层编译层C 推理引擎经 Emscripten 转成 WebAssembly 模块浏览器以接近原生的速度执行所以 CPU 路径能拿到接近桌面端的算子覆盖和多线程能力。调度层执行时按你指定的后端Execution Provider可理解成谁来跑这些算子把子图分派到 CPU 或 GPU。选 WebGPU 时卷积、矩阵乘这些重活交给显卡CPU 只做调度。一句话CPU 后端保全GPU 后端保快你可以按算子逐个回退不用二选一。3 行代码跑通第一次推理安装onnxruntime-web后核心逻辑其实就三件事建会话、喂张量、拿结果。import * as ort from onnxruntime-web; const session await ort.InferenceSession.create(mnist-8.onnx); // 1. 加载模型 const feeds { in: new ort.Tensor(float32, new Float32Array(784), [1, 1, 28, 28]) }; // 2. 造输入 const out await session.run(feeds); // 3. 跑一次输出里就是预测分数ort.Tensor的第一个参数是数据类型第二个是数据本体这里是一维展平的 28×28 像素第三个是形状[1, 1, 28, 28]——批次、通道、高、宽。输出字典的 key 就是模型里定义的输出名取.data就是原始数值argmax一下即得分类结果。完整可跑版可参考 samples/nodejs/01_basic-usage/index.js。该不该上 WebGPU4 个后端怎么选选型的核心是算子全不全 × 要不要 GPU × 浏览器门槛。下面这张表帮你拍板。后端跑在哪优势浏览器门槛 / 现状WebAssemblyCPU所有现代浏览器 Node.js算子最全、最稳、启动快最宽跨平台首选兜底WebGLGPU所有现代浏览器老设备也能用上 GPU已进入维护模式官方建议向 WebGPU 迁移WebGPUGPUChrome / Edge 新内核延迟低、支持 Float16性能最好实验特性Chromium 113Float16 需 121WebNN需启动参数开启直连浏览器 AI 加速能力实验特性覆盖最窄先验证按场景给个直觉要稳、算子杂、要兼容老浏览器→ 直接用 WebAssemblynumThreads调到 3~4 即可。视觉模型、追求低延迟→ 试 WebGPU先确认目标算子都在支持清单里。要照顾没有 WebGPU 的设备→ 把[webgpu, wasm]一起写进executionProviders让缺失算子自动回退 CPU。wasm 多线程只需在全局环境里设一行ort.env.wasm.numThreads 4; // 默认约为逻辑核心数的一半显式指定更可控落地时容易踩的几个坑这几条都是上线前值得先做一遍的检查不是勾选清单而是注意 建议。注意WebGL 别再当主力。官方已把它标记为维护模式只修不扩。新项目建议以 WebGPU 为目标、wasm 为兜底避免绑死在老 GPU 路径上。建议开图优化。创建会话时把graphOptimizationLevel设成all运行时会对算子做常量折叠与融合。下图左到右分别是原始图、基础优化、扩展优化三档能直观看到节点被压缩的过程。注意WebGPU 上线前先查算子。它是实验特性并非所有模型都能整图落到 GPU。把你的算子对到 webgpu-operators.md 里缺的会自动走回退路径但要提前知道回退的是哪些。建议模型体积与加载要单独规划。几个 MB 的模型直接 fetch 成 ArrayBuffer 塞给InferenceSession.create即可更大的模型考虑流式加载或在页面空闲时预热避免首屏白屏。接下来可以去哪儿浏览器端的 AI 还在往前推WebNN 与 WebGPU 的算子覆盖都在扩Float16 精度会进一步压低 GPU 路径的开销。往下走可以顺手看这几处仓库内文档js/web/README.md后端兼容性矩阵与算子支持总览。webgl-operators.md 与 webnn-operators.md各后端的算子支持明细。samples/nodejs/最小可跑示例从建张量到建会话都有现成代码。把现有模型导成 ONNX用上面那段三行代码在本地浏览器里先跑一次——能不能跑、跑多快五分钟就能有答案。【免费下载链接】onnxruntimeONNX Runtime: cross-platform, high performance ML inferencing and training accelerator项目地址: https://gitcode.com/GitHub_Trending/on/onnxruntime创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考