WebAssembly: 从二等公民到一等公民 🚀

来源: Mozilla Hacks | 评分: ⭐⭐⭐⭐⭐ 5星

核心问题：WebAssembly 仍是二等公民

WebAssembly 自 2017 年发布以来取得了巨大进步，新增了共享内存、SIMD、异常处理、尾调用、64位内存、GC 支持等特性。但核心问题仍然是：WebAssembly 在 Web 平台上仍是二等公民。

问题一：代码加载

JavaScript 加载只需一行：

<script src="script.js"></script>

WebAssembly 需要复杂的 API 调用：

let bytecode = fetch(import.meta.resolve('./module.wasm'));
let imports = { ... };
let { exports } = await WebAssembly.instantiateStreaming(bytecode, imports);

问题二：使用 Web API

JavaScript 调用 console.log 只需：

console.log("hello, world");

WebAssembly 需要大量胶水代码来处理内存转换和 API 调用。

实验数据：45% 性能损失

Mozilla 实验显示：移除 JS 胶水代码后，DOM 操作性能提升 45%。这意味着 WebAssembly 用户在 DOM 操作上支付了约 2 倍的性能税。

解决方案：WebAssembly Components

WebAssembly Component Model 提供了一种理想方案：

• 标准化的自包含可执行工件
• 多语言和工具链支持
• 内置加载和链接功能
• 直接支持 Web API 调用

使用 WIT 定义接口

component {
  import std:web/console;
}

未来加载方式

<script type="module" src="component.wasm"></script>

浏览器将自动加载组件，直接绑定原生 Web API，无需任何 JS 胶水代码！

为什么这很重要

• 降低门槛：普通开发者无需了解复杂工具链
• 性能提升：消除 JS/Wasm 边界开销
• 统一生态：不同语言共享同一套 Web 平台集成
• 上游友好：标准编译器可原生支持

总结

WebAssembly Components 可能是 WebAssembly 在 Web 平台上获得"一等公民"地位的关键。它将改变我们构建 Web 应用的方式，让非 JavaScript 语言也能原生使用 Web API。

---

🕐 最后更新: 2026-03-18 | 来源: Mozilla Hacks