才发现:我对 WASM 的理解全错了!

总结

  • WASM is great for both frontend and backend, not just speeding up JavaScript in the browser.
    WASM 对于前端和后端都非常有用,而不仅仅是加速浏览器中的 JavaScript。
  • WASM on the backend works differently than Foreign Function Interface (FFI). WASM is designed to run faster and more efficiently.
    后端 WASM 的工作方式与外部函数接口 (FFI) 不同。 WASM 旨在运行得更快、更高效。
  • WASM’s speed comes from its low-level binary format, simple memory model, and ahead-of-time compilation. This minimizes overhead, allowing performance close to native code.
    WASM 的速度来自于其低级二进制格式、简单的内存模型和提前编译。这最大限度地减少了开销,使性能接近本机代码。
  • ​ I used Rust and WASM to optimize ULID generation in wa-ulid. The result was a 40x speedup over the JavaScript version. ​
    我使用 Rust 和 WASM 来优化 wa-ulid 中的 ULID 生成。结果是比 JavaScript 版本加速了 40 倍。
  • WASM files are currently larger than JavaScript, which can be challenging. But as WASM toolchains and optimization techniques improve, WASM will become more practical for both backend and frontend apps.
    WASM 文件目前比 JavaScript 大,这可能具有挑战性。但随着 WASM 工具链和优化技术的改进,WASM 对于后端和前端应用程序都将变得更加实用。

Introduction 介绍

​ As a developer, I often go through phases when exploring new tech, similar to the Gartner Hype Cycle. This cycle shows the typical path to adopting a new technology. In this post, I want to explain how I went from skeptical to excited, especially about using it to boost backend performance. ​
作为一名开发人员,我在探索新技术时经常会经历一些阶段,类似于 Gartner 技术成熟度曲线。这个周期展示了采用新技术的典型路径。在这篇文章中,我想解释一下我是如何从怀疑变为兴奋的,特别是关于使用它来提高后端性能。

Gartner人工智能技术成熟度曲线(Gartner Hype Cycle )

WASM is a low-level instruction format. It’s designed as a compilation target for languages like C, C++, and Rust. The main goal is enabling high-performance web applications. But it’s also increasingly used on the server-side when performance is critical.
WASM 是一种低级指令格式。它被设计为 C、C++ 和 Rust 等语言的编译目标。主要目标是实现高性能 Web 应用程序。但当性能至关重要时,它也越来越多地用于服务器端。

My WASM journey had ups and downs. It started with inflated expectations, then disappointment, but ended with a solid understanding and practical applications.
我的 WASM 之旅有起有落。它始于过高的期望,然后是失望,但以扎实的理解和实际应用结束。

Initial Misconceptions 最初的误解

When I first heard the buzz about WASM, I had high hopes. I thought WASM would let us smoothly integrate complex computations into web browsers. It seemed similar to how FFI let high-level languages execute machine code.
当我第一次听说 WASM 时,我抱有很高的期望。我认为 WASM 可以让我们顺利地将复杂的计算集成到 Web 浏览器中。这看起来类似于 FFI 让高级语言执行机器代码的方式。

What is FFI? 什么是FFI?

FFI lets code in one language directly call code in another language. It’s used when performance is crucial and some logic is implemented in a low-level language like C or Rust. That low-level code is then called from higher-level languages like Python or JavaScript.
FFI 允许一种语言的代码直接调用另一种语言的代码。当性能至关重要并且某些逻辑是用 C 或 Rust 等低级语言实现时,就会使用它。然后,从 Python 或 JavaScript 等高级语言中调用该低级代码。

I thought WASM was like FFI, just a way to run machine-level code in a browser. This made sense because WASM compiles high-level languages to a low-level binary format. But I overlooked WASM’s unique architecture and constraints.
我认为 WASM 就像 FFI,只是在浏览器中运行机器级代码的一种方式。这是有道理的,因为 WASM 将高级语言编译为低级二进制格式。但我忽略了 WASM 独特的架构和限制。

Comparing WASM to FFI WASM 与 FFI 比较

Seeing WASM as FFI made me miss what makes WASM different from traditional machine code. In FFI, there’s often major overhead when switching between the host language and foreign function. Moving data between different memory layouts is also costly.
将 WASM 视为 FFI 让我怀念 WASM 与传统机器代码的不同之处。在 FFI 中,在宿主语言和外来函数之间切换时通常会产生很大的开销。在不同内存布局之间移动数据的成本也很高。

Reality Check 现实检查

As I explored WASM more, I started to see gaps between my initial expectations and the reality of using it.
当我更多地探索 WASM 时,我开始发现我最初的期望与使用它的现实之间的差距。

First Steps with WASM and Rust
使用 WASM 和 Rust 的第一步

I began experimenting with WASM using wasm-bindgen, a tool that helps WASM modules and JavaScript work together. My first example was simple:
我开始使用 wasm-bindgen 尝试 WASM,这是一个帮助 WASM 模块和 JavaScript 协同工作的工具。我的第一个例子很简单:

<span style="background-color:#f9f9f9"><span style="color:#242424"><span style="color:#aa0d91">use</span> wasm_bindgen::prelude::*;

<span style="color:#643820">#[wasm_bindgen]</span>
<span style="color:#aa0d91">pub</span> <span style="color:#aa0d91">fn</span> add(a: <span style="color:#5c2699">u32</span>, b: <span style="color:#5c2699">u32</span>) -> <span style="color:#5c2699">u32</span> {
  a + b
}</span></span>

Using wasm-pack with link-time optimization (LTO), this basic addition function compiled to a tiny 214-byte WASM module. Initially, this seemed to prove WASM could deliver compact and efficient code.
使用具有链接时优化 (LTO) 的 wasm-pack,此基本加法函数被编译为微型 214 字节 WASM 模块。最初,这似乎证明 WASM 可以提供紧凑且高效的代码。

Discovering the WAT Format  发现 WAT 格式

To better understand how such a small p

  • 33
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

老父亲的能量嘎嘣脆

感谢支持,共同成长

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值