WebAssembly 入门指南：让网页运行更快的新技术

摘要：WebAssembly（通常简写为 WASM）是一种可以在现代网页浏览器中运行的二进制代码格式。它就像一个高效的翻译官，能让用其他编程语言写的代码在网页上快速运行。

什么是 WebAssembly？

WebAssembly（通常简写为 WASM）是一种可以在现代网页浏览器中运行的二进制代码格式。它就像一个高效的"翻译官"，能让用其他编程语言写的代码在网页上快速运行。

主要特点

运行速度快：接近 C、C++、Rust 这些语言的原始运行速度，比 JavaScript 快很多

支持多种语言：可以用 C、C++、Rust、Go 等语言编写，然后编译成 WASM

与 JavaScript 协作：JavaScript 可以调用 WASM 中的函数，WASM 也能调用 JavaScript 的函数

安全可靠：在安全的沙箱环境中运行，不会影响用户设备的安全

工作原理

WebAssembly 的工作流程很简单：

用支持的语言（如 C、Rust）编写代码
将代码编译成 .wasm 二进制文件
在浏览器或 Node.js 中加载并运行这个文件

创建 WASM 文件

我们先用 WebAssembly 文本格式（WAT）创建一个简单的加法函数：

const fs = require("fs");
const wabt = require("wabt")();

(async () => {
  const wabtModule = await wabt;

  // 定义 WebAssembly 文本格式代码
  const wat = `
  (module
    (func (export "add") (param i32 i32) (result i32)
      local.get 0
      local.get 1
      i32.add))
  `;

  // 将文本格式转换为二进制 WASM
  const parsed = wabtModule.parseWat("add.wat", wat);
  const { buffer } = parsed.toBinary({});

  fs.writeFileSync("add.wasm", Buffer.from(buffer));
  console.log("✅ 已生成 add.wasm 文件");
})();

这段代码创建了一个包含加法函数的 WASM 模块。函数接收两个整数参数，返回它们的和。

在 JavaScript 中使用 WASM

生成 WASM 文件后，我们可以在 JavaScript 中加载和使用它：

const fs = require("fs");

async function init() {
  // 1. 读取 WASM 文件
  const bytes = fs.readFileSync("add.wasm");

  // 2. 编译并实例化
  const { instance } = await WebAssembly.instantiate(bytes);

  // 3. 调用导出的加法函数
  console.log("2 + 3 =", instance.exports.add(2, 3));
  console.log("10 + 15 =", instance.exports.add(10, 15));
}

init();

运行这段代码，你会看到控制台输出：

text

2 + 3 = 5
10 + 15 = 25

WASM 调用 JavaScript 函数

WASM 不仅能被 JavaScript 调用，也能调用 JavaScript 的函数：

const fs = require("fs");
const wabt = require("wabt")();

(async () => {
  const wabtModule = await wabt;

  // 定义需要调用 JavaScript 函数的 WASM 模块
  const wat = `
  (module
    (import "env" "log" (func $log (param i32)))
    (func (export "run")
      i32.const 42
      call $log
    )
  )
  `;

  // 转换为二进制 WASM
  const parsed = wabtModule.parseWat("module.wat", wat);
  const { buffer } = parsed.toBinary({});
  fs.writeFileSync("module.wasm", Buffer.from(buffer));
  console.log("✅ module.wasm 文件已生成");

  // 准备供 WASM 调用的 JavaScript 函数
  const importObject = {
    env: {
      log: (num) => console.log("WASM 输出的数字:", num)
    }
  };

  // 加载并实例化 WASM 模块
  const bytes = fs.readFileSync("module.wasm");
  const { instance } = await WebAssembly.instantiate(bytes, importObject);

  // 调用 WASM 函数
  instance.exports.run(); // 输出 "WASM 输出的数字: 42"
})();

在网页中使用 WebAssembly

在浏览器环境中使用 WASM 也很简单：

<!DOCTYPE html>
<html>
<head>
    <title>WebAssembly 示例</title>
</head>
<body>
    <h1>WebAssembly 测试页面</h1>
    <button onclick="runWasm()">运行 WASM 计算</button>
    <div id="result"></div>

    <script>
        async function runWasm() {
            // 从服务器加载 WASM 文件
            const response = await fetch('add.wasm');
            const bytes = await response.arrayBuffer();
            
            // 实例化 WASM 模块
            const { instance } = await WebAssembly.instantiate(bytes);
            
            // 使用 WASM 函数进行计算
            const result = instance.exports.add(25, 17);
            document.getElementById('result').innerHTML = 
                `25 + 17 = ${result}`;
        }
    </script>
</body>
</html>

实际应用场景

图像和视频处理

WebAssembly 非常适合处理图像和视频：

图片滤镜和特效
视频编码和解码
图像压缩和优化

// 伪代码示例：使用 WASM 处理图片
async function processImage(imageData) {
    const wasmModule = await WebAssembly.instantiateStreaming(
        fetch('image-processor.wasm')
    );
    
    // 将图片数据传入 WASM 进行处理
    const processedData = wasmModule.instance.exports.processImage(imageData);
    return processedData;
}

游戏开发

很多游戏引擎都支持导出为 WebAssembly：

Unity 引擎可以编译为 WASM
Unreal Engine 也支持 Web 导出
复杂的游戏逻辑可以用 C++ 编写，在浏览器中运行

数据压缩和加密

需要高性能的计算任务：

大文件压缩和解压
数据加密算法
实时数据处理

人工智能

在浏览器中运行 AI 模型：

TensorFlow.js 使用 WASM 后端加速计算
图像识别和分类
自然语言处理

性能优势

为什么 WebAssembly 比纯 JavaScript 快？

二进制格式：文件更小，解析更快
接近机器码：执行效率更高
预编译优化：在编译阶段就完成优化
内存管理：手动内存控制，减少垃圾回收开销

学习路径建议

如果你想学习 WebAssembly：

初学者

先了解基本的 Web 开发（HTML、CSS、JavaScript）
学习 WebAssembly 的基本概念
尝试用在线工具编译简单的 WASM 示例

进阶学习

学习 Rust 或 C++ 语言
掌握 WASM 工具链（Emscripten 等）
了解 WASM 与 JavaScript 的交互

实战项目

用 WASM 优化现有的 JavaScript 代码
将性能关键的部分用 Rust/C++ 重写
在真实项目中应用 WASM

开发工具推荐

编译工具：

Emscripten（C/C++ 到 WASM）
Rust WASM-pack（Rust 到 WASM）
AssemblyScript（TypeScript 到 WASM）

调试工具：

浏览器开发者工具
WASM 文本格式查看器
性能分析工具

总结

WebAssembly 为网页开发带来了新的可能性，让网页应用能够达到接近原生应用的性能。无论是复杂的图像处理、3D 游戏还是科学计算，现在都可以在浏览器中高效运行。

虽然学习 WebAssembly 需要一些时间投入，但对于需要高性能的网页应用来说，这种投资是值得的。开始尝试 WebAssembly，为你的网页应用开启性能优化的大门。

记住，WebAssembly 不是要取代 JavaScript，而是与它协作，共同构建更强大的网页应用。选择合适的场景使用 WASM，能让你的应用在性能上获得显著提升。

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_13138