大多数 App 的速度慢于必要水平——原因揭秘（Live Demo🛸）

Source: Dev.to

请提供您希望翻译的具体文本内容，我将为您翻译成简体中文并保持原有的格式。

浏览器不仅仅是 UI 层

我们已经进入 21 世纪的第一个四分之一，浏览器悄然演变成远超单纯 UI 层的存在。它能够：

• 运行复杂计算，
• 利用 GPU，
• 处理音频，
• 模拟物理，且
• 甚至运行机器学习模型。

然而……大多数时候我们仍然把它当作表单和仪表盘的工具来使用。

我想展示一下，当我们真正利用平台已经提供的能力时，会发生什么。

活动快速回顾

jsday conference in Bologna 刚刚结束，真的非常棒。如果你在想参加这种活动是否值得——答案是肯定的。它是灵感的源泉，远超文章或教程所能提供的。

如果你有一分钟时间，我会非常感激你在我的 LinkedIn 帖子 上点个赞。

WebGPU + WebAssembly：为什么要把它们放在一起讨论？

如果你一直在关注我的文章，你可能已经知道我的演讲主题是 WebGPU 和 WebAssembly，以及在浏览器中使用它们可以获得的收益。

• WebAssembly 在 CPU 上运行，让我们能够直接在浏览器中执行低层、编译后的代码。
• WebGPU，顾名思义，给我们提供了对 GPU 的访问——不是以某种抽象、受限的方式，而是相对直接且强大的形式。

它们本身就是互补的设计。

进一步阅读

• Will WebAssembly Kill JavaScript? Let’s Find Out (Live Demo)
• Why WebGPU Feels Like the Future of the Web (Live Demo)

一个具体示例

与其单独讨论它们，我构建了一个小型演示，将两种技术结合在一起。

• Repo:
• Live demo:

它有什么作用？
你在输入框中键入文字，文字会被转换为粒子，当你点击并拖动鼠标穿过它时……文字会爆炸。

完全没用？ 是的。
稍微有点上瘾？ 也是的 😅

第 1 步 – Canvas 2D

输入框中的文字使用普通 JavaScript 和 Canvas 2D 渲染为图像位图。这正是经典浏览器 API 已经足够胜任的任务，没有真正的理由把它搬到别处——尤其是像这样的演示。

第 2 步 – WebAssembly

位图被传递给 WebAssembly，在那里一个刻意“有点过度设计”的算法将图像映射为粒子。我希望 WASM 能真正有有意义的工作要做，老实说，这样看起来也更酷。

基准测试： WebAssembly 的速度大约是等效 JavaScript 实现的 2–3 倍（即使在对 JS 版本进行大量优化后）。

在此演示中，这个差异并不重要，因为该步骤只在重建时运行一次，但当操作必须执行数百甚至数千次时，数量级的提升就变得至关重要。

第 3 步 – WebGPU

粒子被传递给 WebGPU——这正是浏览器真正开始展现实力的地方。

同一浏览器、同一应用、同一台机器——但只要使用合适的工具，性能水平就会截然不同。

何时需要它？

这并不是你常见的前端 CRUD 设置。你可能根本不需要 WebGPU 来构建仪表盘或表单，在很多情况下真正的瓶颈是网络，而不是计算。

然而，确实存在整类问题，在这些场景下采用这种方式会产生巨大的差异：

• 实时数据可视化
• 物理仿真
• 图形密集型界面
• 音频处理
• 游戏
• 图像或视频转换
• 矩阵密集型工作负载（例如机器学习、LLM）直接在浏览器中运行

有趣的是，你往往在不需要它的时候觉得不需要……直到某一刻你真的需要它。产品演进、需求增长、性能成为问题，或是你想把部分工作负载从后端迁移到客户端。那时，事情就变得有趣起来。

演示的结构是怎样的？

如果你查看仓库，会注意到一个重要的点：这只是一个普通的 React 应用。

• 没有奇特的架构，也没有“来自外星”的技术栈。
• 是的，里面有编译成 WASM 的 Rust 和 WebGPU 着色器，但它们只是嵌入在标准的前端设置中。
• 应用的其余部分看起来完全像你明天就可以在项目中启动的东西。

这本身就是有意为之。我想说明，这并不是某个遥远的、仅供小众使用的实验性 playground。它是可以直接集成到真实业务中的——可以逐步引入，在真正需要时使用。

**注意：**WebGPU 仍未在所有平台上普遍支持，因此你需要准备回退方案。但对于大多数用户来说，几乎没有理由不开始探索它。

要点

浏览器不再仅仅是我们渲染 UI 的场所。
它已经成为一个强大的计算平台——开箱即用，直接提供对 CPU 和 GPU 的访问。

• 并不是每个项目都需要 WebAssembly 或 WebGPU。大多数情况下，你根本不需要它们也能很好地工作。
• 当你开始遇到性能瓶颈，或问题从简单的 UI 转向大量计算时，这些工具就会成为改变游戏规则的关键。

“从‘搬运数据’到‘实际计算’……你可能会意识到平台一直以来已经拥有了解决方案。
而你所要做的，仅仅是使用它。 🚀