当性能很重要时避免在 Rust WebAssembly 中使用 Serde

大家好，欢迎来到IT知识分享网。

我已经构建了一个 WebAssembly包( https://github.com/WenheLI/wasm-gif )，它可以在几年前的 JavaScript 领域对 gif 图像进行编码和解码。当时，我发现性能是一个违反直觉的主要瓶颈，因为大多数人认为 WebAssembly 在性能方面是一个很好的加分项。最近，我回到这个库，发现我们可以应用一些优化。在本文中，我将回顾什么是优化。

塞尔德

Serde在此上下文中指的是序列化和反序列化。在我之前的实现中，我们在 Rust 和 WebAssembly 中大量使用了许多 Serde 和 DeSerde 功能来实现我们的功能。

详细来说，我们的库有两个主要功能：decode和encode. 他们的实现是：

在这里我们可以看到，两者都decode取决于encodeRustJsValue和 JavaScript 端之间绑定对象的 rust-wasm 方式。而这里的核心机制是在两种语言之间做序列化和反序列化（这很像IPC）。

直觉上，我们可以肯定地说这个Serde将是主要的瓶颈。我们希望尽量减少开销。回想一下 Rust-Wasm 指南，我们知道WebAssembly 可以以很少的开销使用原始类型和TypedArrayBuffer。因此，我们的目标是重新实现这两个功能并使用很少的Serde。

对于decode函数，我们重写了函数签名并稍微修改了数据结构：

左：以前的实施。右：新的实现

与两种实现方式相比，第一个修改是针对struct. 我们不需要derive(Serialize, Deserialize)，因为我们只公开原始类型。这允许wasm_bindgen以很少的开销直接将此 Rust 结构导出到 JavaScript 领域。其次，在decode函数中，我们不再需要使用JsValue::from_serde来返回对象（Goal Achieved）。

适应这一点的好处是显着的。与之前的实现中的约 100 毫秒相比，我们得到了约 10 毫秒的执行时间。这大约是10 倍的改进。

可是等等！目前，我们只对外公开三个属性。我们如何访问其余的属性（延迟、调色板和数据）？

一种方法是为结构添加辅助函数，它们可以访问数据以及将数据返回到用户区 (JavaScript)。

左：Rust 实现；右：JavaScript 使用

在这里我们可以看到，通过在 Rust 结构中添加辅助函数，我们可以调用将转换数据并以最有效的方式将其返回到 JavaScript 端的函数。

还有一件事，我们可以将gifData.data其作为属性而不是函数调用吗？事实上，我们可以做到这一点。通过赋予wasm_bindgengetter 属性。

这就是本文的全部内容。如果你觉得有趣，请随意查看这个库( https://github.com/WenheLI/wasm-gif ) 和我的github。