WebNN：让 AI 推理在浏览器中“零距离”运行

一、引言

想象一下，在网页应用中无需调用云端 API，就能直接实现毫秒级的人脸识别、实时的风格化滤镜，或精准的语义分割。

这听起来像是原生应用的特权，但一项新的 Web 标准正在将其变为每个浏览器的标配。 随着 Web 神经网络 API（WebNN）的到来，高性能 AI 推理的边缘，正从遥远的云端扩展到你我指尖的设备之上。

二、WebNN：连接 AI 模型与硬件性能的"翻译官"

简单来说，WebNN（Web Neural Network API）是一个为 Web 设计、与硬件无关的神经网络推理加速抽象层。它允许 Web 应用直接调用设备底层硬件（如 CPU、GPU 或专用的 AI 加速器 NPU）来高效运行机器学习计算。

WebNN 并非一个普通的 JavaScript 库，它是一个原生级的浏览器 API。你可以把它看作一个高效的 "翻译官" 兼 "调度员"。开发者使用统一的 JavaScript API 描述计算任务，WebNN 则负责将其 "翻译"并"调度"到当前设备最合适的底层加速方案上执行（如 Windows 的 DirectML、macOS 的 ML Compute、Android 的 NNAPI）。这套机制的核心目标，正是为了实现一种"融合二者之长"的全新设计哲学。

三、核心理念：为何要"融合二者之长"？

WebNN 的全部设计都源于一个清晰的目标：将现代设备（如个人电脑、高端手机）底层硬件（CPU、GPU/NPU）的高性能并行计算能力 ，与 Web 平台天然的广泛覆盖、易部署和免安装特性相结合，从而创造一种更优的解决方案。这并非无条件的魔法，其性能表现确实依赖于本地设备的算力基础。

这种"融合"并非简单的拼接，它从架构层面带来了三大根本性变革：

1. ⚡降低延迟，解锁新场景：通过调用设备的 GPU 等硬件加速，直接在浏览器中高效执行模型推理，无需将数据上传至云端并等待回传。这为需要实时处理摄像头、麦克风等本地媒体流的应用（如实时人像虚化、背景替换、语音指令）提供了可能。
2. 🔒 隐私保护：由于所有计算都在用户自己的设备硬件上完成，敏感的音频、视频、图像等数据无需离开本地，从架构源头筑起了隐私安全的防线。
3. 💡 提升可用性与降低成本：模型一旦缓存，应用即可离线工作，提升了可靠性。同时，计算负载从服务器端转移到了海量的客户端设备，显著降低了服务提供商的服务器运维、能源和带宽成本。

WebNN 与主流方案核心对比

维度	原生应用	云端 AI	Wasm	WebNN
运行位置	用户设备	远程服务器	用户设备 (浏览器)	用户设备 (浏览器)
性能	⭐⭐⭐⭐⭐ (直接调用硬件)	⭐⭐⭐⭐⭐ (无限云端算力)	⭐⭐	⭐⭐⭐⭐ (调用硬件，但有适配层)
隐私	最高 (数据不离设备)	存在风险 (数据上传)	高 (数据不离设备)	最高 (数据不离设备)
跨平台	❌ 差	✅ 优	✅ 优	✅ 优
部署更新	❌ 复杂	✅ 便捷	✅ 便捷	✅ 极便捷 (网页级更新)

简单来说，WebNN 让网页应用"鱼和熊掌可以兼得"：既拥有接近原生 App 的 AI 计算性能与隐私安全，又保持了 Web 免安装、易更新和跨平台的独特优势。

它为浏览器新增了"原生级"的 AI 推理能力，让开发者能够直接在网页中构建之前难以实现的实时、低延迟智能应用。

四、实战前瞻：从启用 flag 到代码示例

4.1、要求和设置

硬件	Web 浏览器	Windows 版本	ONNX 运行时 Web 版本	驱动程序版本
图形处理器	WebNN 需要 Chromium 浏览器*。 请使用最新版本的 Microsoft Edge Beta。	最低版本：Windows 11 版本 21H2。	最低版本：1.18	为您的硬件安装最新的驱动程序。
NPU	WebNN 需要 Chromium 浏览器*。 请使用最新版本的 Microsoft Edge Canary。 有关如何禁用 GPU 阻止列表，请参阅下面的注释。	最低版本：Windows 11 版本 21H2。	最低版本：1.18	Intel 驱动程序版本：32.0.100.2381。 有关如何更新驱动程序的步骤，请参阅常见问题解答。

确保你拥有WebNN 要求部分中详述的 Edge、Windows 和硬件驱动程序的正确版本。

目前，WebNN 已在 Edge 和 Chrome 的开发者版本中提供实验性支持。要开始体验，只需几步：

# Chrome/Edge 开启步骤：

1. 在地址栏输入 edge://flags 或 chrome://flags。
2. 搜索：WebNN
3. 找到："Enable WebNN"
4. 选择：Enabled 将其启用
5. 重启浏览器

# 验证是否开启成功

打开控制台，输入：

> 'ml' in navigator
> < true # 成功！

4.2、 WebNN API

WebNN 通过分层抽象的设计，将复杂的硬件加速推理简化为五个核心 API 的协作。

步骤	API	用途
连接硬件	navigator.ml.createContext()	拿到"计算车间"的钥匙
画计算图	new MLGraphBuilder(context)	当"蓝图设计师"
定义输入/加载模型	builder.input() 或 builder.import()	告诉模型数据格式，或直接导入预训练模型
编译优化	builder.build()	将蓝图编译为高效的"机器码"
执行计算	context.compute()	投入数据，产出结果

4.3、六步完整工作流

// 完整WebNN工作流：从加载模型到执行推理
async function runWebNNModel() {
  // ✅ 第1步：连接硬件
  const ctx = await navigator.ml.createContext(); // 拿钥匙

  // ✅ 第2步：画计算图
  const builder = new MLGraphBuilder(ctx); // 找设计师

  // ✅ 第3步：加载预训练模型（关键！）
  const modelUrl = 'models/my_model.onnx'; // 模型文件路径
  const response = await fetch(modelUrl); // 下载模型
  const modelData = await response.arrayBuffer(); // 转成二进制

  // ✅ 第4步：导入并编译模型
  const graph = await builder.import(modelData); // 一键导入ONNX模型
  // 注意：import()已包含编译过程，无需单独build()

  // ✅ 第5步：准备输入数据
  const inputData = new Float32Array([1, 2, 3, 4]); // 你的数据

  // ✅ 第6步：执行推理
  const result = await ctx.compute(graph, {
    input_name: inputData, // 根据模型调整输入名称
  });

  return result.outputs;
}

用 WebNN API 构建你的第一个图

4.4、实战解析：WebNN 人脸识别技术

我们以官方人脸识别示例为例，拆解一个真实项目如何运用 WebNN API。

示例介绍：

通过物体检测来检测参与者的面部，并检查每个面部是否存在的过程

示例效果:

核心模型

双模型协作

• SSD MobileNet V2 Face：负责检测图像中的人脸位置，输出边界框坐标
• FaceNet：将检测到的人脸转换为 512 维嵌入向量，用于身份识别和相似度计算

本地模型加载

1. 权重文件路径配置

// webnn-samples/face_recognition/facenet_nhwc.js

// 配置本地权重文件路径
this.weightsUrl_ = weightsOrigin() + '/test-data/models/facenet_nhwc/weights';

2. NumPy 权重文件加载

// webnn-samples/face_recognition/facenet_nhwc.js

async buildConv_(input, namePrefix, options = undefined, relu = true) {
  // 构建权重文件路径
  const weightsName = `${this.weightsUrl_}/${namePrefix}_kernel.npy`;
  const biasName = `${this.weightsUrl_}/${namePrefix}_Conv2D_bias.npy`;

  // 并行加载权重和偏置
  const [weights, bias] = await Promise.all([
    weightsName, biasName,
  ].map((name) => buildConstantByNpy(this.builder_, name)));

  // 构建卷积层
  const conv2d = this.builder_.conv2d(input, weights, options);
  return relu ? this.builder_.relu(conv2d) : conv2d;
}

3. 权重文件解析

// webnn/webnn-samples/common/utils.js

// 从 NumPy 文件构建常量张量
async function buildConstantByNpy(builder, url, targetType = 'float32') {
  const response = await fetch(url);
  const buffer = await response.arrayBuffer();
  const npArray = new numpy.Array(new Uint8Array(buffer));
  // 转换为 WebNN 常量张量
  return builder.constant(
    { dataType: type, dimensions: shape, shape },
    typedArray,
  );
}

WebNN API 核心调用

// webnn/webnn-samples/face_recognition/facenet_nhwc.js

// 1、创建 WebNN 上下文，指定运行设备
this.context_ = await navigator.ml.createContext({deviceType: 'gpu'});

// 2、构建计算图
// 2.1、创建计算图构建器
this.builder_ = new MLGraphBuilder(this.context_);
// 2.2、定义输入张量
const inputDesc = {
  dataType: 'float32',
  dimensions: this.inputOptions.inputShape,
  shape: this.inputOptions.inputShape,
};
const input = this.builder_.input('input', inputDesc);
// 2.3、构建网络层
const conv0 = this.buildConv_(input, 'Conv2d_1a_3x3', {strides});
const pool0 = conv2.then((conv2) =>
  this.builder_.maxPool2d(conv2, poolOptions));

// 3、编译计算图
this.graph_ = await this.builder_.build({'output': outputOperand});

// 4、执行推理
async compute(inputBuffer) {
  // 写入输入数据
  this.context_.writeTensor(this.inputTensor_, inputBuffer);
  const inputs = {'input': this.inputTensor_};
  const outputs = {'output': this.outputTensor_};

  // 执行计算
  this.context_.dispatch(this.graph_, inputs, outputs);

  // 读取输出结果
  const results = await this.context_.readTensor(this.outputTensor_);
  return new Float32Array(results);
}

4.5、丰富应用场景与广泛硬件支持

用例名称	应用场景描述	典型技术/模型
人员检测	视频会议中检测是否有人，人离开/返回时自动处理。	SSD, YOLO
语义分割	开会时一键替换或虚化背景，保护隐私。	DeepLabv3+, Mask R-CNN, SegAny
骨骼检测	通过摄像头识别举手等动作，实现手势控制（如举手发言）。	PoseNet
人脸识别	会议中识别与会者身份，或用于签到、门禁等。	SSD, FaceNet
面部特征点	在线试戴眼镜、虚拟化妆，精准贴合面部。	Face Alignment Network (FAN)
图像描述	为图片自动生成文字说明，助力无障碍访问。	im2txt
语音识别	语音实时转文字，用于会议字幕、语音搜索等。	Whisper
文本生成	智能聊天、内容续写、翻译总结，赋能大语言模型应用。	GPT-2, LLaMA

五、核心架构：四层模型解读 WebNN 如何工作

理解 WebNN 架构图：

网页应用层

• ONNX 模型、张量流模型、其他模型：这些是预训练的机器学习模型，可用于图像识别、物体检测等多种任务。
• JS 机器学习框架（TensorFlow.js、ONNX.js 等）： 基于 JavaScript 的机器学习框架，提供工具和库，直接在 Web 应用中与这些模型协作。

网页浏览器层

• WebGPU：一种利用 GPU 提供高性能图形和网页计算的网页标准。
• WebNN：网络神经网络 API，提供一个高级接口，用于直接在浏览器中运行神经网络推断。
• WebAssembly：一种用于栈虚拟机的二进制指令格式，使高性能应用程序能够在网页上运行。

原生机器学习 API 层

• 机器学习计算（MacOS/iOS）： 苹果的机器学习框架，用于在 macOS 和 iOS 设备上执行高性能机器学习任务。
• DirectML（Windows）： Microsoft 的直接机器学习 API，提供 Windows 上的 GPU 加速机器学习。
• NN API（Android）： Android 的神经网络 API，提供硬件加速的推理，适用于 Android 设备。
• OpenVINO（Linux）： 英特尔用于在 Linux 上部署高性能机器学习推理的开放视觉推理和神经网络优化工具包。

硬件层

• CPU：中央处理器，计算机中的通用处理器。
• GPU：图形处理单元，专门用于并行处理，常用于加速机器学习任务。
• Machine Learning Accelerator：机器学习加速器，专门为加速机器学习计算设计的硬件（例如，核电源单元（NPU）、TPU。

简单理解，WebNN 充当统一的适配层，对上提供标准接口，对下则通过各操作系统的原生 API（如 DirectML、NNAPI）来调度 CPU、GPU 或 NPU 进行计算，从而在浏览器内实现接近原生的性能。

六、未来展望

WebNN 的意义远不止于一项技术优化，它代表着 Web 作为应用平台的一次关键进化：

• 赋能开发者：极大降低了在 Web 中集成高性能 AI 的门槛，让前端开发者也能轻松构建智能应用。
• 成本与体验 ：将计算负载转移至客户端，减少了服务端成本，并实现了离线可用的 AI 功能，用户体验更连贯。
• 隐私优先：顺应了数据隐私保护日益重要的趋势，为构建"隐私优先"的 AI 应用提供了原生解决方案。
• 催化创新 ：它为在边缘设备上运行更复杂的 AI 模型铺平了道路，将催生一批前所未有的实时、交互式、高隐私保护的 Web 应用。

七、总结

WebNN 是一项极具前景的 Web 标准，旨在让 AI 模型直接在浏览器中运行，它代表着未来 Web 应用向本地、实时、隐私安全智能演进的方向。 然而，作为一项前沿技术，它目前仍处于早期发展阶段，浏览器支持有限，尚不适合用于要求稳定性的生产环境。 因此，对于开发者的最佳策略是：拥抱未来，但立足当下。

具体来说：

• 保持关注与学习：积极了解 WebNN 的核心理念和 API 设计，这有助于把握技术趋势。可以在实验性项目中尝鲜，为未来做准备。
• 使用现有成熟方案：在当前的实际项目中，应优先选择 TensorFlow.js、ONNX Runtime Web 等经过充分验证、生态成熟的技术来构建 AI 功能。它们能提供稳定可靠的交付。
• 明确技术边界：认识到 WebNN 是"未来的工具"，而现有方案是"今天的锤子"。不要因为等待 WebNN 而推迟当前的产品开发，但可以在架构设计上为未来可能的迁移留有余地。

附加链接与参考资料：

• Web Neural Network API（W3C Candidate Recommendation Draft）
• WebNN 教程 | Microsoft Learn
• WebNN | 网络机器学习
• github.com/webmachinel...
• WebNN 开发者预览版（microsoft.github.io）