关于javascript:cryptojswasm-当cryptojs遇上WebAssembly

当提到 WebAssembly(简称 Wasm)技术的时候，大家回想到什么？“新技术”、“新闻里看到过”、“须要用非 JS 语言写”，或者“压根就没听说过”？那么，咱们明天就给大家介绍一次 Wasm 技术实际: crypto-js-wasm。

什么是 WebAssembly (Wasm)？

Wasm 在 Wiki 上的定义是：

WebAssembly或称 wasm 是一个实验性的低级编程语言，利用于浏览器内的客户端。WebAssembly 是便携式的形象语法树[1]，被设计来提供比 JavaScript 更疾速的编译及执行。WebAssembly 将让开发者能使用本人相熟的编程语言（最后以 C /C++ 作为实现目标）编译，再藉虚拟机引擎在浏览器内执行。

简略来说，Wasm 能让开发着应用除 Javacript 外的其余语言，开发出能够在浏览器或 Node.js 中运行的二进制利用。

Wasm 技术的长处

那么，咱们为什么放着好好的 JS 不必，要用其余编程语言，通过 Wasm 来开发前段利用呢？Wasm 官网上列出了它的几个长处，其中比拟重要的 2 个是：

• 性能：JS 作为一种解释型语言，性能天然比不上以二进制模式提前编译好的 Wasm 利用
• 平安：Wasm 提供一个内存平安的沙箱运行时环境。与 JS 不同，Wasm 代码的运行时过程是不可见的

另外，从 Wasm 官网提供的 Roadmap 能够看出，绝大部分 Wasm 规范的 API 曾经被以后支流浏览器 (Chrome, Firefox, Safari) 和 Node.js 所反对了，也就是说，当初支流的 JavaScript 运行时环境都已反对 Wasm。

以后反对编译为 Wasm 二进制的编程语言有：C/C++, Rust, AssemblyScript(一品种 TypeScript 的、专门编写 Wasm 的语言)、C#、Go 等(具体名单)。

Wasm 技术的毛病

这么说，Wasm 技术齐全超过了 JavaScript 吗？当然不是，目前 Wasm 也有以下这些毛病：

• Wasm 利用的运行时内存与 JS 隔离，因而开始运行前，须要将内存从 JS 运行时拷贝到 Wasm 运行时，运行完结后再从 Wasm 中拷贝到 JS 中，这两头的工作次要是通过“浇水代码”(glue code)实现的。Wasm 的运行时速度尽管优于 JavaScript，但内存拷贝却非常耗时
• Wasm 利用再开始应用前，须要县对利用进行二进制转化，再通过 JS 运行时（浏览器或 Node.js）提供的 API 加载到 JS 运行时中
• Wasm 技术以后还不成熟，各种生态尚需欠缺，开发体验有待晋升

也就是说，Wasm 尽管运行速度比 JavaScript 更快，但如果开发着重复调用 Wasm 一个用，频繁登程耗时的内存拷贝操作的话，Wasm 利用的运行速度可能比 JavaScript 还要慢。

小结

总结一下，Wasm 的特点是：

• 平安。Wasm 相比于 JavaScript，运行时内存不可见，执行更平安
• 内存拷贝操作慢。因而为了取得比 JS 更好的性能，应该尽量减少调用 Wasm 利用的次数

联合这些特点，咱们认为加密算法非常适合 Wasm 利用：加密算法的计算量较大，对性能要求较高；并且加密算法能够通过一次输出，进行简单计算后取得输入，调用次数较少；通过加密算法对运行时平安也有肯定要求。

而在加密算法方面，npm 上曾经又一款下载量十分大、基于 JS 开发的加密算法开源软件 crypto-js。crypto-js 反对支流的哈希算法 (如 SHA-256, SHA-3, MD5 等)、加密算法(AES, RC4 等) 以及一些编码和填充算法。因而，咱们基于性能绝对齐全的 crypto-js，再联合 Wasm 技术，开发了 crypto-js-wasm。

crypto-js-wasm 介绍

除了应用 Wasm 技术外，咱们还依照 ES6 规范重写了 crypto-js，并加上了 jest 测试、大宝等内容。以后，crypto-js-wasm 再 npm 上曾经公布了 1.0.0 版本，反对 crypto-js 已有的全副 API 接口。

装置

通过 npm 命令便能够装置 crypto-js-wasm:

npm install @originjs/crypto-js-wasm

应用

因为 Wasm 技术的限度(前文有介绍)，与 crypto-js 不同，在应用 crypto-js-wasm 某个算法前，须要异步加载一次对应的 Wasm 二进制(一次即可)，或者也能够间接调用一次咱们提供的 loadAllWasm 加载所有算法的 Wasm 二进制：

import CryptoJSW from 'crypto-js-wasm';

// (可选) 加载所有 wasm 文件
await CryptoJSW.loadAllWasm();

// 通过 Async/Await 语法调用
await CryptoJSW.MD5.loadWasm();
const rstMD5 = CryptoJSW.MD5('message').toString();
console.log(rstMD5);

// 通过 Promise 语法调用
CryptoJSW.SHA256.loadWasm().then(() => {const rstSHA256 = CryptoJSW.SHA256('message').toString();
    console.log(rstSHA256);
})

Benchmark

为了测试咱们所写的 crypto-js-wasm 的性能，咱们还专门开发了一个 Benchmark，不便在浏览器和 Node.js 中进行性能测试(下在源代码后在本地运行测试即可)；此外，也能够通过咱们提供的 在线 Benchmark 间接在浏览器中进行性能测试。

在咱们的测试设施上(台式机，i5-4590, 16 GB RAM, Windows 10 Version 21H2 (OSBuild 19044, 1466))，crypto-js-wasm 与 crypto-js 的性能体现比照如下：

Chrome

Firefox

Node.js

能够看到，crypto-js-wasm 在绝大部分场景下都有性能晋升，并且在某些较简单的算法上甚至可达到 16 倍以上的性能晋升。

同时，获益于 Wasm 技术，crypto-js-wasm 的运行时内存不可见，肯定水平上晋升了加密算法的安全性(当然，目前内存还须要通过 JavaScript 编写的胶水代码进行替换，因而只是加密过程内存不可见，并非全过程内存不可见)。

总结

各位应用了 crypto-js，或者须要用到 JavaScript 加密算法的开发着们，欢送尝试应用 crypto-js-wasm。

后续，咱们还打算在 crypto-js-wasm 中，提供 RSA 等更简单的加密算法，欢送大家踊跃提交 issue 和 PR！