WebAssembly入门系列第4部分：WebAssembly和JavaScript的伴侣关系

在WebAssembly初学者系列的第4部分中，我们将仔细研究WebAssembly和JavaScript之间的关系。

在这里，您将学习如何在JavaScript中使用WebAssembly。此外，我们还将探索WebAssembly JavaScript API。

WebAssembly是一种二进制格式的开放标准，使开发人员能够在浏览器上以本机性能运行应用程序。如果您还没有阅读过有关它的信息，我们建议您查看我们指南中的前几部分。

• WebAssmebly for Beginners Part 1: An Introduction to WASM
• WebAssembly for Beginners Part 2: Goals, Key Concepts, and Use Cases
• WebAssembly for Beginners Part 3: How WASM Portability and Security Works

让我们开始吧。

使用JavaScript与WebAssembly

在我们的WebAssembly第1部分教程中，我们讨论了WASM的工作原理。为了为您的Web应用程序编写高性能代码，您必须在JavaScript中使用WASM的API和函数。我们还讨论了JavaScript框架如何使用WASM创建高性能应用程序。

然而，您目前不能像使用那样加载WASM模块。这就是JavaScript的作用。它帮助在浏览器上加载和编译WASM。以下是具体的步骤：

• 将.wasm字节加载到ArrayBuffer或类型化数组中。
• 使用WebAssembly.Module编译字节。
• 现在，使用导入实例化WebAssembly.Module以获得可调用的导出项

因此，您需要开始使用预编译的WASM模块。在这里，您有很多选择。您可以使用Rust，C/C++，AssemblyScript，甚至TinyGo（Go）编写代码，然后将其转换为.wasm模块。

从技术上讲，WebAssembly是一种语言的编译目标。这意味着您需要使用您选择的语言编写代码，然后在应用程序（Web或非Web）中使用生成的二进制代码。此外，如果您打算在服务器上使用它，您需要使用WASI与系统进行接口。

由于WebAssembly使用可扩展数组的线性内存，JavaScript和WASM都可以同步访问它，使您能够编写功能丰富、快速的应用程序。

WebAssembly和JavaScript示例

让我们使用示例来学习如何在JavaScript中使用WASM。

如上所述，您需要一个预编译的WASM模块。对于这个示例，我们将使用Emscripten（C/C++）。由于WASM提供了一种高性能的二进制格式，我们可以将生成的代码与JavaScript或其他语言一起运行。

工具设置

由于我们使用Emscripten，我们需要获取emsdk工具。它将允许您将C/C++代码编译为.wasm代码。

只需在终端中运行以下命令。如果您没有安装GIT，请按照我们的Open Source 101: Version Control System and Git指南进行安装。

git clone https://github.com/emscripten-core/emsdk.git
cd emsdk

#Output

nitt@nitt-laptop:~/Projects/WASM2$ git clone https://github.com/emscripten-core/emsdk.git
Cloning into 'emsdk'...
remote: Enumerating objects: 3566, done.
remote: Counting objects: 100% (62/62), done.
remote: Compressing objects: 100% (49/49), done.
remote: Total 3566 (delta 31), reused 38 (delta 13), pack-reused 3504
Receiving objects: 100% (3566/3566), 2.09 MiB | 2.24 MiB/s, done.
Resolving deltas: 100% (2334/2334), done.
nitt@nitt-laptop:~/Projects/WASM2$ cd emsdk
nitt@nitt-laptop:~/Projects/WASM2/emsdk$

在emsdk文件夹中，我们调用另一个命令来获取最新的可用的Emscripten构建。

为此，您需要运行以下命令。

./emsdk install latest
./emsdk activate latest
source ./emsdk_env.sh

现在，我们需要通过运行以下命令生成wasm代码。

现在，我们需要通过运行以下命令生成wasm代码。
如您所见，您会得到一个“hello-yaoweibin.js”和hello-yaoweibin.wasm的输出。您可以通过在项目目录中运行dir命令来检查这些文件。

这两个文件都是必不可少的。hello-geefklare.wasm包含了编译后的代码。另一方面，hell-geefklare.js文件则包含了运行所需的JavaScript代码。由于Emscripten支持web和node.js执行，我们可以使用Node进行测试。

要运行它，请在终端中输入以下命令：
node hello-yaoweibin.js

如果您想在Web上运行它，您可以使用Emscripten生成HTML文件。要这样做，请运行以下命令：
emcc hello-yaoweibin.c -o hello-yaoweibin.html

要运行HTML文件，您可以使用Python 3的HTTPServer。只需运行以下命令：
python3 -m HTTP.server 8000

现在，转到http://localhost:8000/hello-yaoweibin.html以查看输出。

注意：大多数系统都预装了Python。如果没有，请在尝试运行Python3服务器之前轻松安装它。

使用JavaScript API处理WASM

本节将更详细地介绍JavaScript WASM API。借助它，我们将学习如何加载WASM代码并执行它。但首先，让我们看一下下面的代码。

fetch(‘hello-yaoweibin.wasm').then(response =>
response.arrayBuffer())
.then (bytes =>
WebAssembly.instantiate(bytes))
.then(result=>
alert(result.instance.exports.answer()))

上述代码使用了以下JavaScript API：

fetch()浏览器API
WebAssembly.instantiate

除此之外，还有其他值得注意的API。其中包括：

WebAssembly.compile
WebAssembly.instance
WebAssembly.instantiate
WebAssembly.instantiateStreaming

fetch()浏览器API

fetch() API用于加载.wasm网络资源。如果您尝试加载本地资源，您需要禁用跨域资源共享以加载网络资源。否则，您可以使用node服务器来完成。要安装和运行node服务器，请运行以下命令。

sudo apt install npm

接下来，运行以下命令来启动服务器。

npx http-server -o
它将打开一个网页浏览器，您可以在其中查看所有项目文件。

现在打开hello-geefklare.html并运行Web开发人员工具。在那里，打开控制台，并输入以下内容。

fetch(“hello-yaoweibin.wasm”);

它将返回以下承诺。

Promise {}
[[Prototype]]: Promise
[[PromiseState]]: “fulfilled”
[[PromiseResult]]: Response
body: (…)
bodyUsed: false
headers: Headers {}
ok: true
redirected: false
status: 200
statusText: “OK”
type: “basic”
url: “http://127.0.0.1:8080/hello-yaoweibin.wasm”
[[Prototype]]: Response

您还可以编写以下脚本并通过HTML运行它。

要在服务器上运行您的wasm模块，您需要在Node.js中使用以下代码。

const fs = require(‘fs');
const run = async() => {
const buffer = fs.readFileSync(“./hello-yaoweibin.wasm”);
const result = await WebAssembly.instantiate(buffer);
console.log(result.instance.exports.answer());
};

run();
我们建议阅读文档以了解更多信息。

JavaScript Vs. WASM

要理解WASM和JavaScript之间的关系，我们还需要进行比较。从本质上讲，WASM更快，并且具有用于目标编译的二进制格式，而JavaScript是一种高级语言。WASM的二进制代码很难学习，但有办法有效地使用WASM。

WASM和JavaScript之间的关键区别包括以下几点：

WASM是一种编译语言，而JS是一种解释语言。浏览器必须在运行时下载和解析JavaScript，而WASM代码则已经准备好执行其预编译代码。

WebAssembly是一种低级语言，而JavaScript是一种高级语言。作为高级语言，JS易于使用。但是，作为低级语言，WASM的执行速度比JavaScript快得多。

最后，JavaScript受益于其庞大的社区。因此，如果您正在寻找更好的开发体验，JS是一个明显的选择。另一方面，WebAssembly相对较新，因此资源相对较少。

作为开发人员，您无需担心选择哪个。这是因为JS和WASM可以一起工作，而不是相互对立。

因此，如果您正在编写高性能应用程序，您可能希望使用WebAssembly仅对需要性能的部分进行编码。JavaScript API可以帮助您直接从JavaScript代码中获取和使用WASM模块。

最后的思考

最后，WebAssembly是JavaScript的伟大伴侣。它邀请开发人员在Web和非Web上创建高性能应用程序。此外，它在不试图取代JavaScript的情况下实现了这一目标。

然而，WASM会发展成为一个完整的解决方案并取代JavaScript吗？嗯，考虑到WebAssembly的目标，这是有可能的，但不太可能。然而，WebAssembly在未来取代JavaScript的想法并非完全不可辩驳。

接下来，查看构建现代应用程序的最佳JavaScript (JS) UI libraries。