5分钟看懂WebAssembly

5分钟看懂WebAssembly
作者 | Mehdi Zed
译者 | 王强
策划 | 李俊辰
2019 年 12 月 5 日,WebAssembly 正式加入 HTML、CSS 和 Javascript 的 Web 标准大家庭。很多事情都会受益于这一全新的标准,并且它在浏览器中的性能表现是空前的。本文会用五分钟的时间介绍一下这个正在进行中的小变革。

本文最初发布于 jesuisundev.com 网站,经原作者授权由 InfoQ 中文站翻译并分享。

    往事    

1995 年,Brendan Eich 用了不到 10 天就创建了 Javascript。那时,Javascript 的设计并非以速度见长。它基本上是用于表单验证的,同时速度非常缓慢。随着时间的流逝,它也在一天天变好。

在 2008 年,异军突起的谷歌推出了自己全新的浏览器:谷歌 Chrome。Chrome 内部有一个名为 V8 的 Javascript 引擎。V8 的革命性进步是对 JavaScript 的即时(JIT)编译。从解释代码到 JIT 编译的这种转变大幅提升了 Javascript 的性能,从而让整个浏览器的速度变得飞快。如此快的速度将催生 NodeJS 或 Electron 等技术,并推动 Javascript 迎来爆炸式增长。

在 2015 年,WebAssembly 首次发布,并提供了一个运行在 Unity 下的游戏的小型演示。那款游戏是直接在浏览器中运行的!

在 2019 年,W3C 使 WebAssembly 成为了新的 Web 标准。就像 V8 引擎一样,WebAssembly 即将带来全新的性能革命。它的身影已经出现在了 Web 的赛道上,枪声一响便遥遥领先。

什么是 WebAssembly?

WebAssembly(缩写为 wasm)是一种使用非 Javascript 代码,并使其在浏览器中运行的方法。这些代码可以是 C、C++ 或 Rust 等。它们会被编译进你的浏览器,在你的 CPU 上以接近原生的速度运行。这些代码的形式是二进制文件,你可以直接在 Javascript 中将它们当作模块来用。

WebAssembly 不能替代 Javascript。相反,这两种技术是相辅相成的。通过 Javascript API,你可以将 WebAssembly 模块加载到你的页面中。也就是说,你可以通过 WebAssembly 来充分利用编译代码的性能,同时保持 Javascript 的灵活性。

5分钟看懂WebAssembly

WebAssembly 这个名子有点误导人。WebAssembly 确实适用于 Web,但它的使用场景远不止于此!开发 WebAssembly 的团队为了能让它用在所有环境下,跨越了重重障碍才取得成功。我们已经看到了这样的案例:

https://github.com/wasmerio/wasmer

此外,有一个误解也是相当普遍的。WebAssembly 不是编程语言。WebAssembly 是一种中间格式,叫做字节码,其可作为其他语言的编译目标。这么说可能还是会让人云里雾里,我们来画些图具体解释一下。

它是如何工作的?

5分钟看懂WebAssembly

看到这张图片了吧?画的多棒啊。如果我说我是用 Photoshop 画的你信不信?管它呢,我们来看图中的内容。

  • 第一步:这里是你和你的开发技能。你使用 C 或 C++ 生成源代码(还可以使用其他语言)。这段代码应该可以解决某个问题,或者完成某段对浏览器中的 JavaScript 来说太过复杂的流程。

  • 第二步:你将使用 Emscripten 来做翻译。Emscripten 是使用 LLVM 构建的工具链,可将你的源代码编译为 WebAssembly。安装它之后,你可以通过几个简单的步骤快速编译任意内容,稍后我们会具体介绍。这一步完成时,你将得到一个 WASM 文件。

  • 第三步:你将在网页上使用这个 WASM 文件。在将来,你可以像其他 ES6 模块一样加载这个文件。现在它的用法稍微复杂一点,但并没有什么绕弯子的部分。

好的,下面我们该来点实战了。

Show me the code

首先,我们需要一小段 C++ 代码来编译。有些人会给你看这个运行在浏览器中的完整版暗黑破坏神 1 游戏的例子:

https://d07riv.github.io/diabloweb/

而我这里就用一个简单的示例吧,下面是一个添加两位数的函数。我们并不会用它来展示 C++ 的速度有多快,只是举例而已。
int add(int firstNumber, int secondNumber) {
  return firstNumber + secondNumber;
}
下面转到你选择的 Linux 发行版。第一步是下载并安装 emscripten。
# 安装依赖项(是的,你可以使用 python 的较新版本)
sudo apt-get install python2.7 git
# 通过一个 git 克隆获取 emscripten
git clone https://github.com/emscripten-core/emsdk.git
# 下载,安装并激活 sdk
cd emsdk
./emsdk install latest
./emsdk activate latestl
source ./emsdk_env.sh
# 确认安装的内容可以正常运行
emcc --version
# 将这个 c++ 文件编译到一个 webassembly 模板
emcc helloWebassembly.cpp -s WASM=1 -o helloWebassembly.html
# 启动 HTML 并观察结果
emrun helloWebassembly.html

上面是极客处理 wasm 的路子。还有一种更简单的方法。你可以转到这个站点:

https://mbebenita.github.io/WasmExplorer/

将你的 C++ 代码放在左侧。然后,你将在 WAT 部分中获得导出函数的名称。使用我之前提到的 add 函数代码:“_Z3addii”作为函数名称,我们会在稍后使用它。你只需点击 download 按钮,就可以获取 WASM 文件。非常简单!

现在,我们就可以让 WebAssembly 直接运行在浏览器中了,没有那么多麻烦的事情
<html>
  <head>
    <title>WASM test</title>
    <link rel="stylesheet" href="/stylesheets/style.css" />
  </head>

  <body>
    <script>
      const getRandomNumber = () => Math.floor(Math.random() * 10000);

      WebAssembly.instantiateStreaming(
        fetch("https://012q1.sse.codesandbox.io/wasm/add.wasm")
      )
        .then(obj => obj.instance.exports._Z3addii)
        .then(add => {
          document.getElementById("addTarget").textContent = add(
            getRandomNumber(),
            getRandomNumber()
          );
        });
    </script>
    <h1>Résultat du C++</h1>
    <p id="addTarget"></p>
  </body>
</html>

这样就搞定了。这个 html 网页允许你使用编译成 WebAssembly 的 C++!这里我们跳过所有 HTML 和简单易懂的部分,直接看第 11 行的 InstantiateStreaming 函数。正如 Mozilla 文档所说,这个函数使你可以通过一个简单的 fetch 来编译和实例化我们的 WebAssembly 模块。然后,我通过前面获取的函数名称来使用 add 函数,并用它替换一段 DOM。看到了吗,在你的浏览器内通过 Javascript 成功实现了 C++!多了不起的事情啊,我甚至还给你做了一个带有可运行演示的 codesandbox:

https://codesandbox.io/s/webassembly-en-5-minutes-012q1?fontsize=14&hidenavigation=1&module=%2Fpublic%2Findex.html&theme=dark

你肯定会说,怎么这么简单的东西做起来都这么复杂?没错。他们正在努力,准备在将来用一个简单的 import 替换掉 instantiation 的 JavaScript 部分。因此请耐心等待,不用太久的。

    结语    

我们已经聊够了五分钟,所以就到这里吧。如果你想了解关于 WebAssembly 的更多信息,并且有充足的空闲时间:我推荐你阅读这篇出色的文章,更深入地探讨这个话题:

https://www.javascriptjanuary.com/blog/webassembly-neither-web-nor-assembly-but-revolutionary

最后,我期待着看到 Web 对其他语言敞开大门后能带来怎样的变化。WebAssembly 背后的潜力是不可小觑的,我等不及要用上速度更快的 Web 了!

作者介绍

我是一名开发人员。现在我在蒙特利尔从事后端开发 /DevOps 工作。开发是我的一项爱好,我也会随便写点东西。我每天会发些 Twitter(https://www.twitter.com/jesuisundev/)。你也可以给我发邮件(admin@jesuisundev.com),或者订阅我的 newsletter(https://mailchi.mp/024d0ebb03ba/jesuisundev)!

延伸阅读

https://www.jesuisundev.com/en/understand-webassembly-in-5-minutes/

5分钟看懂WebAssembly

发表评论

邮箱地址不会被公开。 必填项已用*标注

相关