在 Web 应用开发中，JavaScript 是前端开发者们最常用的语言。然而，当面对大规模数据处理和计算任务时，JavaScript 在浏览器中的执行往往会受到诸多性能瓶颈的限制。幸运的是，WebGPU 的出现，为我们提供了在前端实现高性能计算的新途径。本文将首先探讨 JavaScript 在执行大规模计算方面的劣势，然后介绍如何利用 WebGPU 进行计算加速，以及它带来的性能提升。最后，我们将以一个例子来演示如何在浏览器中利用 WebGPU 进行大规模数值计算。

除了webGPU，还有一个提升计算性能的WASM技术栈，感兴趣的可以了解，或许后续我会再谈到

JavaScript 在大规模计算中的劣势

JavaScript 是一门解释型语言，主要用于处理前端的交互逻辑，如 DOM 操作、事件处理和 UI 更新等。尽管近年来 JavaScript 引擎得到了极大的优化（如 V8 引擎的 JIT 编译），但在面对大规模数值计算时，JavaScript 依然存在以下劣势：

1. 单线程执行：JavaScript 在浏览器环境中通常是单线程的，尽管 Web Workers 提供了一些多线程的支持，但对于大量需要并行处理的数值计算，性能依旧受到限制。
2. 计算效率低：JavaScript 本质上并不是为高效执行数值计算而设计的。它的动态类型和内存管理机制导致处理浮点数运算和矩阵操作时效率较低。
3. 缺乏硬件加速：JavaScript 在浏览器中运行时，通常只能依靠 CPU，无法直接利用 GPU 的强大并行处理能力来加速大规模数值运算。

在这样的情况下，大规模数据的处理和训练神经网络通常需要依赖后端的计算能力，例如通过 Web API 将数据发送到服务器，由服务器使用 GPU 或其他高性能计算设备完成后再将结果返回。这种模式存在明显的 网络延迟 和 隐私保护 问题。

WebGPU 引入与计算加速的可行性

WebGPU 是一项现代的 Web API，它使得开发者能够在浏览器中直接访问 GPU，以进行图形渲染和 高性能数值计算。相比于 WebGL，WebGPU 提供了更底层和更灵活的控制能力，并允许更直接地访问 GPU，执行包括矩阵运算、机器学习推断在内的大量并行计算任务。

WebGPU 的浏览器兼容性

目前，WebGPU 还在发展中，并没有在所有主流浏览器中全面支持。以下是一些关于兼容性的情况：

• Chrome 和 Edge：这两个浏览器提供了对 WebGPU 的支持，但需要在某些情况下通过实验性设置开启。
• Firefox：WebGPU 的支持正在开发中，部分功能可能在实验性版本中使用。
• Safari：Apple 也在积极推进对 WebGPU 的支持，可以在最新的版本中体验到。
  

WebGPU 带来的效果提升

与 JavaScript 使用 CPU 进行运算相比，WebGPU 可以利用 GPU 的 并行计算能力，极大地加快大规模数值运算的速度。GPU 可以同时执行上千个小型计算任务，对于矩阵相乘、向量运算等高度并行的计算任务，性能提升可以达到数十倍甚至上百倍。

利用 WebGPU 的通用计算能力，可以将以前需要后端支持的复杂任务（如神经网络推断、实时数据分析等）转移到前端，使得应用可以更快速响应用户的输入，并且无需将数据传到服务器，保护用户隐私。

实战示例：使用 WebGPU 进行数值计算

为了让大家对 WebGPU 如何进行数值计算有更清晰的认识，我们将以 向量相加 作为例子，演示如何在前端使用 WebGPU 实现 GPU 加速的数值计算。

因为不需要外部依赖，所以按F12打开开发者工具，复制粘贴代码测试吧~

示例：向量相加

我们将实现两个长度为 3 的向量 [1, 2, 3] 和 [4, 5, 6] 相加，预期结果为 [5, 7, 9]。

1. 初始化 WebGPU

首先，我们需要获取 GPU 适配器和设备：

async function initWebGPU() {if (!navigator.gpu) {console.error("WebGPU is not supported in this browser.");return;}const adapter = await navigator.gpu.requestAdapter();const device = await adapter.requestDevice();return device;
}

2. 创建缓冲区

接下来，我们创建 GPU 缓冲区，用于存储输入和输出数据：

async function createBuffers(device) {const a = new Float32Array([1, 2, 3]);const b = new Float32Array([4, 5, 6]);const result = new Float32Array(a.length);const aBuffer = device.createBuffer({size: a.byteLength,usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST,mappedAtCreation: true});new Float32Array(aBuffer.getMappedRange()).set(a);aBuffer.unmap();const bBuffer = device.createBuffer({size: b.byteLength,usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST,mappedAtCreation: true});new Float32Array(bBuffer.getMappedRange()).set(b);bBuffer.unmap();const resultBuffer = device.createBuffer({size: result.byteLength,usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC,});return { aBuffer, bBuffer, resultBuffer, resultLength: result.length };
}

3. 编写计算着色器

接着，我们编写一个简单的 WGSL 着色器，用于执行向量相加的操作：

const shaderCode = `@group(0) @binding(0) var<storage, read> a: array<f32>;@group(0) @binding(1) var<storage, read> b: array<f32>;@group(0) @binding(2) var<storage, read_write> result: array<f32>;@compute @workgroup_size(64)fn main(@builtin(global_invocation_id) global_id: vec3<u32>) {let index = global_id.x;// 假设数组的长度为 3，你可以传递更大的值或者作为一个变量处理if (index < 3u) {result[index] = a[index] + b[index];}}
`;

4. 创建计算管线和绑定组

计算管线用于定义计算任务的执行方式，绑定组用于绑定缓冲区：

async function createPipeline(device, shaderCode) {const shaderModule = device.createShaderModule({code: shaderCode});const computePipeline = device.createComputePipeline({layout: "auto",compute: {module: shaderModule,entryPoint: "main"}});return computePipeline;
}async function createBindGroup(device, pipeline, buffers) {return device.createBindGroup({layout: pipeline.getBindGroupLayout(0),entries: [{ binding: 0, resource: { buffer: buffers.aBuffer } },{ binding: 1, resource: { buffer: buffers.bBuffer } },{ binding: 2, resource: { buffer: buffers.resultBuffer } }]});
}

5. 执行计算任务并读取结果

最后，我们执行计算任务并将结果读取出来：

async function runComputeTask(device, pipeline, bindGroup, resultBuffer, resultLength) {const commandEncoder = device.createCommandEncoder();const passEncoder = commandEncoder.beginComputePass();passEncoder.setPipeline(pipeline);passEncoder.setBindGroup(0, bindGroup);passEncoder.dispatchWorkgroups(Math.ceil(resultLength / 64));passEncoder.end();const gpuReadBuffer = device.createBuffer({size: resultLength * Float32Array.BYTES_PER_ELEMENT,usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ});commandEncoder.copyBufferToBuffer(resultBuffer, 0, gpuReadBuffer, 0, resultLength * Float32Array.BYTES_PER_ELEMENT);const commandBuffer = commandEncoder.finish();device.queue.submit([commandBuffer]);await gpuReadBuffer.mapAsync(GPUMapMode.READ);const arrayBuffer = gpuReadBuffer.getMappedRange();const resultArray = new Float32Array(arrayBuffer);console.log("Result:", Array.from(resultArray));gpuReadBuffer.unmap();
}(async () => {const device = await initWebGPU();const buffers = await createBuffers(device);const pipeline = await createPipeline(device, shaderCode);const bindGroup = await createBindGroup(device, pipeline, buffers);await runComputeTask(device, pipeline, bindGroup, buffers.resultBuffer, buffers.resultLength);
})();

运行结果：

Result: [5, 7, 9]

总结

WebGPU 为前端带来了利用 GPU 进行高性能计算的可能性，使得 JavaScript 不再局限于处理简单的 UI 和业务逻辑，而是能够执行更复杂的数值计算和大规模数据处理任务。与传统的 JavaScript 计算方式相比，WebGPU 在大规模并行任务（如矩阵运算、图像处理和机器学习）上提供了显著的性能提升。

通过本文的示例代码，开发者可以初步了解如何使用 WebGPU 进行数值计算，将大规模计算任务从后端转移到前端，不仅能提高应用的响应速度，还能保护用户数据隐私。随着浏览器对 WebGPU 的支持逐渐成熟，前端开发者们将能用它来开发出更高效、更智能的 Web 应用。