WebAssembly 与 Rust：构建高性能 Web 应用程序

WebAssembly 和 Rust 入门

现代 Web 应用程序对性能的要求越来越高。JavaScript 尽管有其优点，但并非总能胜任计算密集型任务——如图像处理、3D 渲染、加密或模拟。这时 WebAssembly (WASM) 就派上了用场——它是一种二进制指令格式，能在浏览器中以接近原生的速度执行。

Rust 语言已成为编写 WASM 模块的最佳候选者之一：它安全、快速，并且没有垃圾回收器。在本文中，我们将探讨如何将 Rust 代码编译为 WebAssembly，将其与 JavaScript 连接，并创建真正的高性能 Web 应用程序。

配置 Rust + WASM 环境

在编写代码之前，请安装必要的工具：

• Rust — 通过 rustup（官方安装程序）安装。
• wasm-pack — 用于构建 WASM 包的主要工具。
• wasm-bindgen — 用于连接 Rust 和 JavaScript 的库。
• Node.js 和 npm — 用于测试和构建前端。

# 安装 wasm-packcurl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh

# 创建新项目cargo new --lib wasm-examplecd wasm-example

创建项目后，打开 Cargo.toml 并添加依赖项：

[lib]crate-type = ["cdylib"]

[dependencies]wasm-bindgen = "0.2"

编写第一个用于 WebAssembly 的 Rust 函数

让我们创建一个简单的函数，将两个数字相加并返回结果。在 src/lib.rs 中编写：

use wasm_bindgen::prelude::*;

#[wasm_bindgen]pub fn add(a: i32, b: i32) -> i32 {    a + b}

#[wasm_bindgen] 属性会自动为此函数生成 JavaScript 包装器。现在构建项目：

wasm-pack build --target web

构建后，pkg 文件夹中会出现文件：.wasm、.js（包装器）和 .d.ts（TypeScript 类型）。

与 HTML 和 JavaScript 集成

创建一个简单的 HTML 页面进行测试：

<!DOCTYPE html><html><head>    <script type="module">        import init, { add } from './pkg/wasm_example.js';

        async function run() {            await init();            console.log('2 + 3 =', add(2, 3)); // 5        }        run();    </script></head><body>    <h1>Rust + WebAssembly 正在运行！</h1></body></html>

通过本地服务器打开文件（例如，python3 -m http.server）——在浏览器控制台中您将看到结果 5。

处理字符串和复杂数据类型

WebAssembly 仅操作数字。要处理字符串、数组和对象，需要使用 wasm-bindgen，它会自动转换类型。

示例：返回字符串的函数

use wasm_bindgen::prelude::*;

#[wasm_bindgen]pub fn greet(name: &str) -> String {    format!("你好，{}！你正在使用 Rust + WASM。", name)}

在 JavaScript 中：

import init, { greet } from './pkg/wasm_example.js';

await init();console.log(greet("阿列克谢")); // "你好，阿列克谢！你正在使用 Rust + WASM。"

处理数组 (Vec)

要传递数组，请使用 Vec<T>。示例——将所有元素加倍的函数：

#[wasm_bindgen]pub fn double_numbers(arr: Vec<i32>) -> Vec<i32> {    arr.iter().map(|x| x * 2).collect()}

JavaScript 代码：

const result = double_numbers([1, 2, 3, 4]);console.log(r