## 前言有一天我吃了网友的布道简单地学习了一下 rust，学了就想做点啥，于是我想到了一直刷到但是没学的 WebAssembly（后面简称 wasm），那干脆一起学了吧，那做个啥呢？而且这个项目还得比纯 js 的项目性能强。突然灵光一闪，不如做个 md5/sha256/sha1 的文件校验吧，js 算得肯定没 wasm 快。 ## Rust 和 WebAssembly 很快啊，我找到了一本电子书，# [Rust 🦀 和 WebAssembly 🕸](https://llever.com/rustwasm-book/introduction.zh.html#rust--%E5%92%8C-webassembly-) 随便学学，学会 HelloWorld 就行了，赶紧趁热创建一个项目。 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2076933cc304485ea1a9d963248480df~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=244&h=153&s=7446&e=png&b=303336) 嗯，就这三个文件需要简单解释下。 **src/lib.rs** ``` rust #![no_std] pub mod hashs; mod utils; use wasm_bindgen::prelude::*; #[wasm_bindgen] extern "C" { fn alert(s: &str); } #[wasm_bindgen] pub fn greet(msg: &str) { alert(msg); } #[wasm_bindgen] pub fn set_panic_hook() { utils::set_panic_hook(); } ``` 第一行表示我们不要标准库，这样可以缩小一点 wasm 文件大小。标注了 `#[wasm_bindgen]` 属性的函数表示这个函数需要导出，以便 js 调用。 `pub mod hashs;` 可以理解成将 hashs 模块注册到根模块，并暴露出来给外部调用。 **src/utils.rs** ``` rust pub fn set_panic_hook() { // When the `console_error_panic_hook` feature is enabled, we can call the // `set_panic_hook` function at least once during initialization, and then // we will get better error messages if our code ever panics. // // For more details see // https://github.com/rustwasm/console_error_panic_hook#readme #[cfg(feature = "console_error_panic_hook")] console_error_panic_hook::set_once(); } ``` 这个函数很简单，就是把崩溃信息打印到 console.error 好，现在把目光转到 **src/hashs.rs** ``` rust extern crate alloc; use core::fmt::Write; use md5::Md5; use sha1::Sha1; use sha2::{Digest, Sha256}; use wasm_bindgen::prelude::*; // sha256 #[wasm_bindgen] pub struct Sha256Hasher { hasher: Sha256, } #[wasm_bindgen] impl Sha256Hasher { /// 创建一个对象 pub fn new() -> Sha256Hasher { let hasher = Sha256::new(); Sha256Hasher { hasher } } /// 计算文件块 pub fn update(&mut self, data: &[u8]) { self.hasher.update(data); } /// 获取最终计算结果 pub fn digest(&mut self) -> alloc::string::String { let a = self.hasher.clone(); let result = a.finalize(); let mut text = alloc::string::String::new(); write!(text, "{:x}", result).unwrap(); text } } // md5 #[wasm_bindgen] pub struct Md5Hasher { hasher: Md5, } #[wasm_bindgen] impl Md5Hasher { pub fn new() -> Md5Hasher { let hasher = Md5::new(); Md5Hasher { hasher } } pub fn update(&mut self, data: &[u8]) { self.hasher.update(data); } pub fn digest(&mut self) -> alloc::string::String { let a = self.hasher.clone(); let result = a.finalize(); let mut text = alloc::string::String::new(); write!(text, "{:x}", result).unwrap(); text } } // sha1 #[wasm_bindgen] pub struct Sha1Hasher { hasher: Sha1, } #[wasm_bindgen] impl Sha1Hasher { pub fn new() -> Sha1Hasher { let hasher = Sha1::new(); Sha1Hasher { hasher } } pub fn update(&mut self, data: &[u8]) { self.hasher.update(data); } pub fn digest(&mut self) -> alloc::string::String { let a = self.hasher.clone(); let result = a.finalize(); let mut text = alloc::string::String::new(); write!(text, "{:x}", result).unwrap(); text } } // sha512 #[wasm_bindgen] pub struct Sha512Hasher { hasher: sha2::Sha512, } #[wasm_bindgen] impl Sha512Hasher { pub fn new() -> Sha512Hasher { let hasher = sha2::Sha512::new(); Sha512Hasher { hasher } } pub fn update(&mut self, data: &[u8]) { self.hasher.update(data); } pub fn digest(&mut self) -> alloc::string::String { let a = self.hasher.clone(); let result = a.finalize(); let mut text = alloc::string::String::new(); write!(text, "{:x}", result).unwrap(); text } } ``` 先看 sha256 部分，这里直接调了第三方的包，创建了一个结构体来持有“加密器”，然后写了三个函数，用来创建对象、计算文件块、获取最终计算结果。其他几个其实都是一样的，只是调用了不同的包。到这里 rust 部分就结束了，是不是还挺简单的。最后输入命令行：`wasm-pack build` 打包成 npm 包。编译结果将存放在 /pkg 目录中 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1da58b166c4948ba8e56feb47895369e~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=435&h=334&s=27174&e=png&b=2b2d30) 我们简单看一下 hash_wasm.d.ts 文件，以便了解如何调用。 ``` typescript /* tslint:disable */ /* eslint-disable */ /** * @param {string} msg */ export function greet(msg: string): void; /** */ export function set_panic_hook(): void; /** */ export class Md5Hasher { free(): void; /** * @returns {Md5Hasher} */ static new(): Md5Hasher; /** * @param {Uint8Array} data */ update(data: Uint8Array): void; /** * @returns {string} */ digest(): string; } /** */ export class Sha1Hasher { free(): void; /** * @returns {Sha1Hasher} */ static new(): Sha1Hasher; /** * @param {Uint8Array} data */ update(data: Uint8Array): void; /** * @returns {string} */ digest(): string; } /** */ export class Sha256Hasher { free(): void; /** * @returns {Sha256Hasher} */ static new(): Sha256Hasher; /** * @param {Uint8Array} data */ update(data: Uint8Array): void; /** * @returns {string} */ digest(): string; } /** */ export class Sha512Hasher { free(): void; /** * @returns {Sha512Hasher} */ static new(): Sha512Hasher; /** * @param {Uint8Array} data */ update(data: Uint8Array): void; /** * Returns the final hash result as a string of hexadecimal characters. * @returns {string} */ digest(): string; } ``` ## Vue 和 WebAssembly 接下来讲一下怎么在 Vue 项目中使用刚才 build 的 hash_wasm ### 创建 Vue 项目我们先简单创建一个 vue 的 demo 项目。 ``` shell yarn create vue@latest cd demo yarn install ``` 接下来清理掉 demo 中的示例代码。并加上文件选择和按钮 **App.vue** ``` javascript ``` ### 安装刚才 build 的 hash_wasm 库把 pkg 目录下的文件都拷贝到 demo/wasm/ ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7d43f3806f3a449e971f084c222e3e8c~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=667&h=703&s=66190&e=png&b=2b2d30) 修改 package.json ``` json { "dependencies": { "vue": "^3.4.15", "hash-wasm": "file:./wasm" }, } ``` 执行 `yarn install` 好了，wasm 库这就装好了。 ### WebWorker 即使 wasm 再快，如果直接在主线程计算 sha256 也会卡渲染，所以我们需要使用 WebWorker 创建一个子线程来调用 wasm。接下来创建一个 src/webworker.js 文件。 ``` javascript import * as wasm from "hash-wasm?a=2" // 设置捕获 wasm 崩溃 wasm.set_panic_hook(); /** * 发送进度 * @param chunkNr 文件分块序号，从1开始 * @param chunks 文件分块总数 */ function sendProgress(chunkNr, chunks) { postMessage({ type: "progress", data: { chunkNr, chunks } }); } /** * 发送结果 * @param result {String} 计算结果 */ function sendResult(result) { postMessage({ type: "result", data: result }); } /** * 计算文件散列值 * @param file {File} 文件 * @param hasher {Object} hasher对象 */ function shaSum(file, hasher) { // 将文件按50M分割 const chunkSize = 50 * 1024 * 1024; // 计算文件分块总数 const chunks = Math.ceil(file.size / chunkSize); // 当前分块序号 let currentChunk = 0; // 对文件进行分块读取 let fileReader = new FileReader(); // 加载下一块 function loadNext() { const start = currentChunk * chunkSize; const end = start + chunkSize >= file.size ? file.size : start + chunkSize; fileReader.readAsArrayBuffer(file.slice(start, end)); } // 读取文件完成 fileReader.onload = function (e) { hasher.update(new Uint8Array(e.target.result)); // 计算这一块的散列值 sendProgress(currentChunk + 1, chunks); // 发送进度 currentChunk++; if (currentChunk < chunks) { loadNext(); // 继续加载下一块 } else { sendResult(hasher.digest()); // 发送结果 hasher.free(); // 释放内存 } }; // 加载第一块 loadNext(); } // 接收主线程的消息 onmessage = function (e) { let { type, file } = e.data; switch (type) { case "md5": shaSum(file, wasm.Md5Hasher.new()); break; case "sha256": shaSum(file, wasm.Sha256Hasher.new()); break; case "sha1": shaSum(file, wasm.Sha1Hasher.new()); break; case "sha512": shaSum(file, wasm.Sha512Hasher.new()); break; default: console.error("unknow type", type); } } // 发送 ready 消息 postMessage({ type: "ready" }) ``` 这个 worker 只做三件事，接收主线程的消息，计算散列值，发送进度和结果。然后在 App.vue 中引用我们的 WebWorker，记得在后面加上 `?worker`，这样 vite 才能正确地处理它，否则会报错。 ``` js import ShaWorker from "@/webworker.js?worker" ``` 这个时候运行将会得到一个错误： ``` "ESM integration proposal for Wasm" is not supported currently. Use vite-plugin-wasm or other community plugins to handle this. Alternatively, you can use `.wasm?init` or `.wasm?url`. See https://vitejs.dev/guide/features.html#webassembly for more details. ``` 这提示我们需要安装 vite-plugin-wasm 插件来支持 wasm。安装后配置如下： ``` js import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import wasm from "vite-plugin-wasm"; export default defineConfig({ plugins: [ vue(), wasm(), ], resolve: { alias: { '@': fileURLToPath(new URL('./src', import.meta.url)) } }, worker: { plugins() { return [ wasm(), ] } } }) ``` 要加上 worker 这段插件配置，否则在 worker 里引用 wasm 还是会报错。再次运行就正常了，接下来处理一下点击事件。请看 App.vue ``` html ``` 好的，功能代码写完了。让我们来试试速度，先下载一个 win11 的系统镜像，文件大小为 6.27G。 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5f6c3e256c654988a863f9aaca6c1da5~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1171&h=331&s=42431&e=png&b=f7f7f7) 很快啊，四舍五入 18 秒完成 sha256 的计算。让我们搜一个 sha256 的在线校验工具，这个网站是排名比较靠前的。 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5252fb974bba451183369f81f3f7355b~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1320&h=862&s=132880&e=png&b=fefefe) 耗时 119 秒，可以看到 wasm 计算 sha256 的速度是他的 6.6 倍。（我的CPU是 i7-13700KF）再看看 sha1 。 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/762771e4195b42e7961b7a048f22a6fd~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1023&h=277&s=35419&e=png&b=f5f5f5) ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/22799e52133b4c46a31673d7ad9323d9~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1216&h=882&s=123094&e=png&b=fefefe) 表现优秀啊，兄弟姐妹们。而且这玩意儿还支持多线程多个文件多个类型一起算。性能也不会受到影响，感兴趣的友友可以试试。 **另外说一下，测试性能的时候不要开着控制台，会严重影响性能，不管是 js 的还是 wasm 的速度，通通变慢。** 其实我写完 rust 部分的时候，发现 npm 已经有相关的包了，而且名字还和我取的名字一样，叫 hash-wasm。人家还做得更好。但这不失为一个很好的实践机会。既然都做到这里了，我稍微完善了一下界面，把网站部署上去了。你可以打开体验一下试试，地址是：https://hash.jethro.fun/ 最后，对全部源码感兴趣的友友可以移步 https://github.com/jethroHuang/fast_hash