WebNN：浏览器原生 AI 推理的标准化之路与工程实战

从 WebGL 的委曲求全到 WebGPU 的底层掌控，再到 WebNN 的算子级抽象——浏览器中的 AI 推理正在经历一场架构革命。

一、为什么需要一个新的推理标准？

如果你在 2023 年尝试在浏览器里跑一个 ONNX 模型，你的技术栈大概率是这样的：

ONNX Model → onnx.js / tf.js → WebGL Shader → GPU Compute

这套方案能跑，但问题不少。WebGL 本身是为图形渲染设计的，用它做通用计算意味着你要把矩阵乘法、卷积、归一化这些算子全部翻译成 fragment shader。内存模型的错配导致每个算子都要显式管理纹理绑定和数据搬运，一个 batch normalization 动辄 200 行 shader 代码。更致命的是，WebGL 没有原生 64 位整数支持，动态 shape 推理的索引计算充满了精度陷阱。

WebGPU 的出现部分解决了这个问题——它提供了 compute shader、storage buffer、workgroup 共享内存等真正的通用计算原语。但它仍然是"接近金属"的层级。你需要自己实现 conv2d 的 tiling 策略、自己设计内存分配器、自己处理不同 GPU 架构的 workgroup 大小差异。

WebNN（Web Neural Network API）填补了这个空白。这是一个 W3C 标准提案（由 WebML 社区组推动，2024 年进入 CR 阶段），目标是为浏览器中的神经网络推理提供一套高阶、硬件抽象的算子级 API，直接对接设备底层的 NPU/GPU/CPU 加速后端。

二、WebNN 架构解析

2.1 核心抽象模型

WebNN 的设计哲学可以用三个关键词概括：Builder、Graph、Computing Context。

// 1. 获取计算上下文（选择后端）
const context = await navigator.ml.createContext({ deviceType: