Rust with WebAssembly

大人,时代变了

About wasm

WebAssembly ,亦称 wasm ,是一种基于浏览器的虚拟机的代码。由于它是二进制的,因此机器能够较快的执行。wasm 目前不能直接编写,它可以由 C/C++/Rust 生成。目前,Chrome 、 Microsoft Edge 、 Firefox 、 Safari 支持 wasm。

Why Rust?

我在学习 Rust ,Rust 是一门写起来很愉快的语言。

准备

安装Rust

Rust官网

安装wasm-pack

Rustwasm官网

流程

新建项目

cargo new wasm

目录结构

.
├── Cargo.toml
└── src
    └── lib.rs

添加依赖

[dependencies]
wasm-bindgen = "0.2.48"

update 一下

cargo update

编写 Rust 代码

// lib.rs
use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn fibonacci(n: u32) -> u32 {
    match n {
        0 => 1,
        1 => 1,
        _ => fibonacci(n - 1) + fibonacci(n - 2),
    }
}

编译 Rust 代码为 WebAssembly

wasm-pack build --no-typescript --target web --mode normal   

生成在 pkg 目录

目录结构

.
├── wasm.js
└── wasm_bg.wasm

编写 html 文件调用 wasm

<script type="module">
  main()

  async function main() {
    const wasm = await import('/pkg/wasm.js')

    await wasm.default('/pkg/wasm_bg.wasm')

    console.log(wasm.fibonacci(40))
  }
</script>

如果成功,你将在 Chrome 的 console 中看到答案。

Why wasm faster?

可参考:

mozilla官网介绍

Tom’s zone博客