WebAssembly简介

2024-04-12 09:16:20

2019 年 12 月 5 日，WebAssembly正式加入 HTML、CSS 和 JavaScript 的 Web 标准大家庭。很多事情都会受益于这一全新的标准，并且它在浏览器中的性能表现是空前的。

WebAssembly的诞生背景

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

在 2008 年，异军突起的谷歌推出了自己全新的浏览器 Chrome。Chrome 内部有一个名为 V8 的 JavaScript 引擎，V8 的革命性进步是对 JavaScript 的即时（JIT）编译。从解释代码到 JIT 编译的这种转变大幅提升了 JavaScript 的性能，从而让整个浏览器的速度变得飞快。如此快的速度将催生 Node.js或 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 的灵活性。

WebAssembly这个名字有点误导人，它确实适用于 Web，但它的使用场景远不止于此。此外，WebAssembly不是编程语言，它是一种中间格式，叫字节码，可以作为其他语言的编译目标。

它是如何工作的？

第一步：你使用 C、C++ 或其他语言生成源代码，这段代码应该可以解决某个问题，或者完成某段对浏览器中的 JavaScript 来说太过复杂的流程。

第二步：使用 Emscripten 将你的源代码编译为 WebAssembly，这一步完成时，你将得到一个 wasm文件。

第三步：你将在网页上使用这个 wasm文件，将来你可以像其他 ES6 模块一样加载这个文件。

下面以简单的代码示例来说明这个过程：

首先，你需要一小段 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 文件的办法。

接下来，将你的 C++ 代码放在左侧。然后，你将在 WAT 部分中获得导出函数的名称（_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>

以上就是今天的内容，你可以点击原文链接了解完整的分享，希望能给你带来启发。
英文原文：https://www.jesuisundev.com/en/understand-webassembly-in-5-minutes/

码农公寓