WebAssembly 入门教程：从零开始在浏览器中运行 WASM 代码

1. 安装 Emscripten#

首先，需要安装 Emscripten。可以通过以下命令安装：

1
git clone https://github.com/emscripten-core/emsdk.git
2
cd emsdk
3
./emsdk install latest
4
./emsdk activate latest

安装完成后，确保 Emscripten 的路径已添加到系统环境变量中。

2. 编写 C/C++ 代码#

编写一个简单的 C 或 C++ 程序，例如：

1
int add(int a, int b) {
2
    return a + b;
3
}

3. 使用 Emscripten 编译#

使用以下命令将 C 代码编译为 WASM：

1
emcc -O3 -s WASM=1 -s EXPORTED_FUNCTIONS="['_add']" example.c -o example.wasm

• -O3 表示启用最高级别的优化。
• -s WASM=1 表示生成 WASM 文件。
• -s EXPORTED_FUNCTIONS="['_add']" 表示导出 add 函数，以便在 JavaScript 中调用。

4. 生成 JavaScript 绑定文件#

为了在浏览器中调用 WASM 模块，还需要生成一个 JavaScript 绑定文件：

1
emcc -O3 -s WASM=1 -s EXPORTED_FUNCTIONS="['_add']" example.c -o example.js

5. 使用生成的文件#

在 HTML 文件中引入生成的 JavaScript 文件，并调用 WASM 模块中的函数：

1
<script src="example.js"></script>
2
<script>
3
    const result = Module._add(5, 3);
4
    console.log('Result:', result);
5
</script>

通过以上步骤，就可以将 C/C++ 代码编译为 WASM 并在浏览器中运行。这种方式不仅提高了性能，还允许开发者利用现有的 C/C++ 代码库，而无需重新编写整个应用程序。

1. 安装 Emscripten#

首先，确保你已经安装了 Emscripten。可以通过以下命令安装：

1
git clone https://github.com/emscripten-core/emsdk.git
2
cd emsdk
3
./emsdk install latest
4
./emsdk activate latest

安装完成后，确保 Emscripten 的路径已添加到系统环境变量中。

2. 编写 C/C++ 代码#

接下来，编写一个简单的 C 或 C++ 程序，例如：

1
#include <stdio.h>
2

3
int add(int a, int b) {
4
    return a + b;
5
}
6

7
void printHello() {
8
    printf("Hello from C!\n");
9
}

3. 使用 Emscripten 编译#

使用以下命令将 C 代码编译为 WASM：

1
emcc -O3 -s WASM=1 -s EXPORTED_FUNCTIONS="['_add', '_printHello']" example.c -o example.wasm

• -O3 表示启用最高级别的优化。
• -s WASM=1 表示生成 WASM 文件。
• -s EXPORTED_FUNCTIONS="['_add', '_printHello']" 表示导出 add 和 printHello 函数，以便在 JavaScript 中调用。

4. 生成 JavaScript 绑定文件#

为了在浏览器中调用 WASM 模块，还需要生成一个 JavaScript 绑定文件：

1
emcc -O3 -s WASM=1 -s EXPORTED_FUNCTIONS="['_add', '_printHello']" example.c -o example.js

5. 使用生成的文件#

在 HTML 文件中引入生成的 JavaScript 文件，并调用 WASM 模块中的函数：

1
<script src="example.js"></script>
2
<script>
3
    const result = Module._add(5, 3);
4
    console.log('Result:', result);
5

6
    Module._printHello();
7
</script>

6. 编译选项说明#

• -O3：启用最高级别的优化，提升性能。
• -s WASM=1：指定生成 WASM 文件。
• -s EXPORTED_FUNCTIONS：指定需要导出的函数列表，以便在 JavaScript 中调用。
• -s EXPORTED_RUNTIME_METHODS：如果需要导出某些运行时方法，可以使用此参数。
• -s MODULARIZE=1：将模块封装为一个函数，便于在 JavaScript 中调用。

通过上述步骤，我们可以将 C/C++ 代码成功编译为 WASM，并在浏览器中运行。这种方法不仅提高了性能，还允许开发者利用现有的 C/C++ 代码库，而无需重新编写整个应用程序。

1. 使用 fetch 加载 WASM 文件#

首先，使用 fetch API 从服务器获取 WASM 文件。假设我们有一个名为 example.wasm 的文件，可以这样加载：

1
fetch('example.wasm')
2
  .then(response => response.arrayBuffer())
3
  .then(bytes => WebAssembly.instantiate(bytes))
4
  .then(results => {
5
    const { instance } = results;
6
    // 调用 WASM 模块中的函数
7
    const result = instance.exports.add(5, 3);
8
    console.log('Result:', result);
9
  });

2. 使用 WebAssembly.instantiate 实例化模块#

WebAssembly.instantiate 方法接收 WASM 字节数组，并返回一个包含模块实例的对象。该对象的 exports 属性包含了所有导出的函数和变量。

3. 处理错误和异常#

在实际应用中，需要处理可能出现的错误，例如网络请求失败、加载文件无效等。可以使用 try...catch 块来捕获异常：

1
async function loadWasm() {
2
  try {
3
    const response = await fetch('example.wasm');
4
    if (!response.ok) throw new Error('Failed to fetch WASM file');
5
    const bytes = await response.arrayBuffer();
6
    const { instance } = await WebAssembly.instantiate(bytes);
7
    const result = instance.exports.add(5, 3);
8
    console.log('Result:', result);
9
  } catch (error) {
10
    console.error('Error loading or instantiating WASM:', error);
11
  }
12
}
13

14
loadWasm();

4. 直接使用 WebAssembly.instantiateStreaming#

对于更简洁的代码，可以使用 WebAssembly.instantiateStreaming 方法直接从 URL 加载并实例化 WASM 模块：

1
async function loadWasm() {
2
  try {
3
    const { instance } = await WebAssembly.instantiateStreaming(fetch('example.wasm'));
4
    const result = instance.exports.add(5, 3);
5
    console.log('Result:', result);
6
  } catch (error) {
7
    console.error('Error loading or instantiating WASM:', error);
8
  }
9
}
10

11
loadWasm();

5. 导出函数的使用#

在 WASM 模块中，函数和变量需要通过 EXPORTED_FUNCTIONS 参数导出，以便在 JavaScript 中调用。例如，在 Emscripten 编译时，我们需要指定导出的函数名：

1
emcc -O3 -s WASM=1 -s EXPORTED_FUNCTIONS="['_add']" example.c -o example.wasm

6. 在 HTML 中直接使用#

如果 WASM 模块是通过 Emscripten 生成的绑定文件（如 example.js），可以直接在 HTML 中引用该文件：

1
<script src="example.js"></script>
2
<script>
3
  const result = Module._add(5, 3);
4
  console.log('Result:', result);
5
</script>

通过上述方法，开发者可以在浏览器中轻松加载和执行 WASM 模块，从而充分利用其高性能的优势。这种方法不仅简化了开发流程，还提高了 Web 应用的性能和响应速度。

1. 模块导出（Exports）#

在 WASM 模块中，开发者可以通过 EXPORTED_FUNCTIONS 参数指定哪些函数或变量可以被 JavaScript 调用。例如，在 Emscripten 编译时，可以这样设置：

1
emcc -O3 -s WASM=1 -s EXPORTED_FUNCTIONS="['_add', '_printHello']" example.c -o example.wasm

这样，add 和 printHello 函数就被导出，可以在 JavaScript 中调用。

2. JavaScript 调用 WASM 函数#

在 JavaScript 中，可以通过 WebAssembly.instantiate 方法获取 WASM 模块的实例，然后通过 instance.exports 访问导出的函数：

1
fetch('example.wasm')
2
  .then(response => response.arrayBuffer())
3
  .then(bytes => WebAssembly.instantiate(bytes))
4
  .then(results => {
5
    const { instance } = results;
6
    const result = instance.exports.add(5, 3);
7
    console.log('Result:', result);
8
  });

3. 传递参数与返回值#

WASM 支持基本的数据类型，如整数、浮点数、字符串等。在 JavaScript 中调用 WASM 函数时，需要确保参数和返回值的类型匹配。例如：

1
int add(int a, int b) {
2
    return a + b;
3
}

在 JavaScript 中调用时，参数必须是整数：

1
const result = instance.exports.add(5, 3); // 正确
2
const invalidResult = instance.exports.add('5', '3'); // 错误，会导致错误

4. 内存共享#

WASM 可以通过 WebAssembly.Memory 对象与 JavaScript 共享内存。这对于处理大量数据或需要频繁交换数据的场景非常有用。例如，可以在 WASM 中分配一块内存，然后在 JavaScript 中访问它：

1
const memory = new WebAssembly.Memory({ initial: 1, maximum: 1 });
2
const { instance } = await WebAssembly.instantiateStreaming(fetch('example.wasm'), {
3
  env: {
4
    memory: memory
5
  }
6
});
7

8
// 在 JavaScript 中访问内存
9
const buffer = new Uint8Array(memory.buffer);
10
buffer[0] = 42; // 修改内存中的值

5. 调试与日志#

在开发过程中，调试 WASM 与 JavaScript 的交互非常重要。可以通过 Emscripten 提供的调试信息，或者使用 JavaScript 的 console.log 打印日志。例如：

1
#include <stdio.h>
2

3
void logMessage(const char* message) {
4
    printf("WASM Log: %s\n", message);
5
}

在 JavaScript 中调用时：

1
instance.exports.logMessage("Hello from JavaScript");

这样，WASM 会输出日志信息，帮助开发者调试问题。

6. 性能优化#

由于 WASM 是一种高性能的二进制格式，它的执行速度远高于 JavaScript。然而，WASM 与 JavaScript 的交互可能会带来一定的性能开销。因此，在设计 WASM 模块时，应尽量减少不必要的交互，例如将批量计算任务放在 WASM 中完成，而不是频繁调用 JavaScript。

通过上述机制，WASM 与 JavaScript 可以高效地协同工作，充分发挥各自的优势，提升 Web 应用的整体性能和用户体验。

1. 游戏开发#

在游戏开发中，WASM 被广泛用于实现高性能的图形渲染和物理模拟。与 JavaScript 相比，WASM 的执行速度更快，内存占用更低。例如，许多 C/C++ 游戏引擎（如 Unreal Engine 和 Unity）都可以通过 Emscripten 编译为 WASM，从而在浏览器中运行。这种优化不仅提高了游戏的帧率，还减少了资源消耗，使得游戏体验更加流畅。

2. 音频和视频处理#

WASM 在音频和视频处理方面也表现出色。例如，FFmpeg 和 WebRTC 等开源项目都利用 WASM 实现了高效的编码和解码功能。通过 WASM，开发者可以在浏览器中直接处理高清视频流，而无需依赖第三方插件或服务，从而降低了延迟并提高了实时性。

3. 数据密集型计算#

对于需要处理大规模数据的应用，如科学计算、金融分析和机器学习，WASM 提供了显著的性能优势。例如，TensorFlow.js 利用 WASM 加速模型推理，使得在浏览器中运行复杂的深度学习模型成为可能。这种优化不仅提升了计算速度，还降低了服务器的负载，提高了整体系统的可扩展性。

4. 网络应用优化#

在一些需要快速响应的网络应用中，WASM 可以显著降低延迟。例如，WebSocket 和 HTTP/2 等协议结合 WASM，可以实现更高效的通信和数据传输。此外，WASM 还支持多线程，使得并发处理变得更加高效，进一步提升了网络应用的性能。

5. 安全性与隔离性#

WASM 的另一个重要优势是其安全性和隔离性。由于 WASM 是一种独立的运行时环境，它与 JavaScript 之间有清晰的边界，这有助于防止潜在的安全漏洞。例如，在处理敏感数据时，可以将关键逻辑放在 WASM 中执行，从而减少攻击面。

6. 未来发展趋势#

随着 WASM 技术的不断成熟，其应用场景也在不断扩大。未来，WASM 可能会在更多领域中发挥作用，如 边缘计算、区块链 和 物联网。通过持续的优化和改进，WASM 有望成为 Web 技术中的核心组件，推动 Web 应用向更高的性能和更丰富的功能发展。

通过上述应用场景可以看出，WASM 在性能优化中的作用不可忽视。无论是游戏开发、多媒体处理还是数据密集型计算，WASM 都能提供显著的性能提升，帮助开发者构建更高效、更可靠的 Web 应用。

1. 编写 C/C++ 代码#

首先，我们需要编写一个简单的 C 程序。假设我们要实现一个计算两个数字之和的函数，代码如下：

1
int add(int a, int b) {
2
    return a + b;
3
}

2. 安装 Emscripten#

确保你已经安装了 Emscripten。如果没有安装，可以通过以下命令进行安装：

1
git clone https://github.com/emscripten-core/emsdk.git
2
cd emsdk
3
./emsdk install latest
4
./emsdk activate latest

3. 编译 C/C++ 代码为 WASM#

使用 Emscripten 编译 C 代码为 WASM：

1
emcc -O3 -s WASM=1 -s EXPORTED_FUNCTIONS="['_add']" example.c -o example.wasm

• -O3 表示启用最高级别的优化。
• -s WASM=1 表示生成 WASM 文件。
• -s EXPORTED_FUNCTIONS="['_add']" 表示导出 add 函数，以便在 JavaScript 中调用。

4. 生成 JavaScript 绑定文件#

为了在浏览器中调用 WASM 模块，生成一个 JavaScript 绑定文件：

1
emcc -O3 -s WASM=1 -s EXPORTED_FUNCTIONS="['_add']" example.c -o example.js

5. 创建 HTML 文件#

创建一个简单的 HTML 文件，用于加载和执行 WASM 模块：

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>WASM Example</title>
6
</head>
7
<body>
8
    <h1>WASM Example</h1>
9
    <script src="example.js"></script>
10
    <script>
11
        const result = Module._add(5, 3);
12
        console.log('Result:', result);
13
    </script>
14
</body>
15
</html>

6. 运行应用#

将 example.wasm 和 example.js 文件放在与 HTML 文件相同的目录下。打开浏览器，访问该 HTML 文件，控制台将输出 Result: 8，表示 WASM 模块成功运行。

7. 扩展功能#

你可以进一步扩展这个示例，例如添加更多的函数或处理更复杂的逻辑。例如，可以添加一个计算两个数字乘积的函数：

1
int add(int a, int b) {
2
    return a + b;
3
}
4

5
int multiply(int a, int b) {
6
    return a * b;
7
}

然后重新编译代码，导出 multiply 函数：

1
emcc -O3 -s WASM=1 -s EXPORTED_FUNCTIONS="['_add', '_multiply']" example.c -o example.wasm

在 JavaScript 中调用 multiply 函数：

1
const resultMultiply = Module._multiply(5, 3);
2
console.log('Result Multiply:', resultMultiply);

通过这个实战项目，你已经掌握了如何从零开始构建一个 WASM 应用。这不仅展示了 WASM 的强大功能，也为未来的开发奠定了坚实的基础。

1. 更广泛的兼容性#

随着 WASM 技术的成熟，越来越多的浏览器和平台开始支持这一格式。例如，Google Chrome、Mozilla Firefox、Apple Safari 和 Microsoft Edge 都已经全面支持 WASM。此外，WASM 还被引入到服务器端和嵌入式系统中，为其带来了更广泛的适用性。这种广泛的兼容性使得 WASM 成为一个真正意义上的跨平台技术。

2. 性能优化#

WASM 的高性能特性使其在许多计算密集型应用中表现出色。未来，随着 WASM 运行时的不断优化，其执行速度将进一步提升。此外，WASM 还可能支持更复杂的指令集，如 SIMD（单指令多数据）和 WebAssembly Threads，这些新特性将进一步增强 WASM 的性能。

3. 更丰富的生态系统#

随着 WASM 的普及，越来越多的开发者和企业开始投入到 WASM 生态系统的建设中。例如，Emscripten、Rust 和 Go 等语言的编译器正在不断完善，支持更多的 WASM 功能。此外，WASM 与 JavaScript 的交互机制也在不断改进，使得两者之间的协作更加顺畅。

4. 新兴应用场景#

除了传统的 Web 应用，WASM 还可能在新的应用场景中大放异彩。例如，在 边缘计算 中，WASM 可以用于实现轻量级的计算任务，提高数据处理的效率。在 区块链 领域，WASM 可以用于编写智能合约，提高交易的执行速度。此外，WASM 还可能在 物联网 和 人工智能 中发挥作用，为这些领域提供更高效的计算能力。

5. 社区与标准化#

随着 WASM 技术的发展，相关的社区和标准化工作也在不断推进。例如，WebAssembly Community Group 和 W3C 正在努力制定 WASM 的标准规范，确保其在不同平台和语言之间的兼容性。这些努力将有助于 WASM 技术的长期发展和普及。

综上所述，WASM 技术的未来发展充满希望。无论是在性能优化、生态建设还是新兴应用场景中，WASM 都将继续发挥重要作用，为 Web 技术带来更多的可能性。