WebAssembly（简称Wasm）是一种二进制格式，旨在作为一种高效的、低级的虚拟机指令格式，使得非JavaScript语言能够以接近原生的速度在Web上运行。Rust作为一种系统编程语言，以其内存安全和高性能著称，是开发WebAssembly应用的理想选择。
首先，确保安装了Rust工具链和wasm-pack工具，后者用于将Rust代码打包成WebAssembly模块。
curl https://sh.rustup.rs -sSf | sh
cargo install wasm-pack
使用cargo创建一个新的Rust库项目，指定为WebAssembly目标。
cargo new my_wasm_project --lib
cd my_wasm_project
echo "[lib]\ncrate-type = ['cdylib']" >> Cargo.toml
echo "[profile.release]\nopt-level = 3" >> Cargo.toml
在src/lib.rs中编写Rust代码，实现一个简单的高性能计算示例，比如斐波那契数列计算。
// src/lib.rs
#[no_mangle]
pub fn fibonacci(n: u32) -> u32 {
match n {
0 => 0,
1 => 1,
_ => fibonacci(n - 1) + fibonacci(n - 2),
}
}
使用wasm-pack将Rust代码打包为WebAssembly模块。
wasm-pack build --target web --release
在HTML文件中引入打包好的Wasm模块，并通过JavaScript调用。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Rust & WebAssemblytitle>
head>
<body>
<script>
// 加载wasm模块
WebAssembly.instantiateStreaming(fetch('my_wasm_project_bg.wasm'))
.then(obj => {
const { fibonacci } = obj.instance.exports;
// 调用Rust编写的fibonacci函数
console.log(fibonacci(10)); // 应输出55
})
.catch(console.error);
script>
body>
html>
为了简化JavaScript与WebAssembly的交互，可以使用wasm-bindgen生成绑定代码。
wasm-bindgen到Cargo.toml的依赖中。#[wasm_bindgen]属性标记函数。[dependencies]
wasm-bindgen = "0.2"
[lib]
crate-type = ["cdylib"]
// src/lib.rs
use wasm_bindgen::prelude::*;
#[wasm_bindgen]
pub fn fibonacci(n: u32) -> u32 {
// 同上
}
再次使用wasm-pack build，这次它会自动生成JavaScript绑定代码。
许多现代前端框架，如React、Vue和Angular，都提供了与WebAssembly集成的方法。以下是一个使用React的例子：
首先，确保你已经安装了wasm-bindgen和@wasm-tool/wasm-bindgen：
npm install --save @wasm-tool/wasm-bindgen
然后，创建一个React组件，使用useEffect和useMemo来加载和实例化WebAssembly模块。
// components/Fibonacci.js
import React, { useEffect, useMemo } from 'react';
import * as wasm from '../pkg';
const Fibonacci = ({ n }) => {
useEffect(() => {
const importObject = {
env: {
abortStackOverflow: () => {
throw new Error('Stack overflow');
},
table: new WebAssembly.Table({ initial: 1, element: 'anyfunc' }),
memory: new WebAssembly.Memory({ initial: 1 }),
},
};
const init = async () => {
const wasmModule = await fetch('../pkg/my_wasm_project_bg.wasm')
.then(response => response.arrayBuffer())
.then(buffer => WebAssembly.compile(buffer))
.then(module => WebAssembly.instantiate(module, importObject));
wasm.init(wasmModule.instance.exports);
};
init();
}, []);
const fib = useMemo(() => wasm.fibonacci(n), [n]);
return {fib};
};
export default Fibonacci;
在React应用中使用这个组件：
// App.js
import React from 'react';
import Fibonacci from './components/Fibonacci';
function App() {
return (
虽然WebAssembly带来了高性能计算的优势，但也存在一些限制和挑战：