Safari 26 刚发布，WebGPU 计算着色器正式集齐了四大浏览器。4096×4096 矩阵乘法，RTX 3060 上比 WebGL 快 8 倍，原生 CUDA 追到 82%——这件事把浏览器端机器学习的格局彻底变了

Safari 26 刚发布，WebGPU 计算着色器正式集齐了四大浏览器。4096×4096 矩阵乘法，RTX 3060 上比 WebGL 快 8 倍，原生 CUDA 追到 82%——这件事把浏览器端机器学习的格局彻底变了

你在做一个在线图像处理的 Web 应用。用户上传一张图片，你要跑一个风格迁移模型。常见的解法是什么？把图片 Base64 编码，发到服务器，服务器 GPU 跑完，返回结果。延迟高，数据要出设备，还有隐私风险。

有没有办法在浏览器里跑？WebAssembly 帮了一些，SIMD 指令集优化后，一些场景下比原生 JS 快 5-10 倍。但到了真正的矩阵乘法——机器学习模型的核心计算——WASM 的 CPU 执行很快就碰到天花板。你在用的是消费级 CPU，和 GPU 的数千核心并行比起来，差了不止一个量级。

这个问题在 2026 年有了根本性的答案。

WebGPU 计算着色器：从显卡接口到通用并行计算

WebGPU 最早被当成「浏览器里的 DirectX」——给 3D 游戏用的。但它的设计者从一开始就把 GPU 的两种能力都装了进来：渲染管线，和通用计算。

渲染管线你已经熟悉了：顶点着色器、片段着色器，处理像素。

计算着色器（Compute Shader）是另一套东西。它本质上是一个函数，GPU 上千个核心并行跑同一段逻辑，处理不同的数据。没有任何图形输出，只有纯粹的数学运算。

// 写一个计算着色器：让 GPU 并行处理数据
const shader = device.createShaderModule({
  code: `
    @group(0) @binding(0) var input: array<f32>;
    @group(0) @binding(1) var output: array<f32>;
    @compute @workgroup_size(64) fn main(
      @builtin(global_invocation_id) id: vec3
    ) {
      let i = id.x;
      output[i] = input[i] * 2.0;  // 每个线程处理一个数据
    }
  `
});

@compute 声明这是一个计算函数，@workgroup_size(64) 表示每组 64 个工作线程，global_invocation_id 是当前线程的编号。上面的代码里，每个 GPU 核心同时执行 *2.0，一百万个数字并行处理，时间只相当于处理一个数字。

真实性能数据：WebGPU vs WebGL vs CUDA

WebGL 是浏览器里跑密集计算的传统方案——把数据编码成纹理，片段着色器做计算。绕，但不是 GPU 的正确用法。

实测矩阵乘法（GPU 计算的典型场景），来自 SitePoint 和 Johal 的基准测试：

从 1024×1024 开始，WebGPU 的优势突破 3 倍。4096×4096 大矩阵下，RTX 3060 上 WebGPU 比 WebGL 快 8 倍。

和原生 CUDA 相比呢？同一位作者的测试显示，WebGPU 1.2 在 RTX 4090 上矩阵乘法达到了原生 CUDA 12.4 吞吐量的 82%。首次编译耗时 219ms，但缓存后仅需 12ms，和原生速度相当。

2026 年：四大浏览器全部稳定，Safari 26 补完最后一块

这是今年最关键的变化。在此之前，Safari 一直是 WebGPU 支持最短的那块板子。Safari 16.4 开始支持，但计算着色器不完整。

Safari 26（2026 年）正式完成支持后，格局变成：

• Chrome 113+ ✅
• Firefox 125+ ✅
• Safari 26+ ✅（完整支持）
• Edge 113+ ✅

WebGPU 从「实验性功能」正式变成「所有主流浏览器都支持的生产级 API」。到了 2026 年，WebGPU 不再是问「浏览器支不支持」的问题，而是问「你的用户里还有谁没支持」的问题。

真正改变的是什么：AI 推理在浏览器里跑了

说 WebGPU 能跑矩阵乘法，听起来是数字游戏。但真正让它值得重视的，是一个具体的成熟场景：浏览器端 AI 推理。

Google 的 WebLLM 项目已经在生产环境跑了：Mistral 7B、LLaMA 3、Phi-3，这些模型直接跑在你的笔记本电脑的 GPU 上，不需要服务器。数据不离开用户设备，延迟从几百毫秒的网络往返变成了本地 GPU 的微秒级计算。

加密货币支付处理也在用 WebGPU 做签名验证。大规模数据可视化——数百万个数据点的图表——用 GPU 并行渲染，CPU 不再是瓶颈。

下一步：判断 WebGPU 是否适合你的场景

不是所有计算都该往 GPU 上搬。小的矩阵乘法（256×256 以下），API 调用 overhead 可能抵消收益；内存密集型操作（如 FFT），WebGPU 目前比原生 CUDA 慢 37-41%，这类场景还是原生框架更合适。

适合 WebGPU 的典型场景：

• 机器学习推理：矩阵乘法、注意力计算、 embedding 生成，数据量越大优势越明显
• 大规模数据可视化：GPU 并行渲染，百万级数据点无压力
• 物理模拟：粒子系统、流体仿真，GPU 天生适合
• 图像/音视频处理：滤镜、编码、缩放，GPU 合成器线程执行

如果你的用户设备 GPU 覆盖不确定，记得提供 WebGL 回退。Three.js r170+ 已经内置了 WebGPU 后端，零配置迁移——这个话题我们改天单独聊。

• 来源：SitePoint WebGPU vs WebGL Benchmarks（2026-02）、Johal WebGPU Compute Shader Performance（2026-05）、The Surprising Truth About GPU vs WebGPU（2026-05）*