使用 JavaScript 的 Web 组装 (Wasm)

PHPz 转载: 2023-09-01 23:49:06 599浏览

您是否想过是否可以在不牺牲 JavaScript 提供的可移植性和安全性的情况下在 Web 上运行高性能应用程序？好吧，别再好奇了！随着 WebAssembly (Wasm) 的引入，现在可以为 Web 应用程序带来类似本机的性能，同时仍然利用 JavaScript 的强大功能。在本文中，我们将探讨 WebAssembly 的基础知识以及如何将其与 JavaScript 一起使用来解锁一个充满可能性的新世界。

什么是 WebAssembly (Wasm)？

WebAssembly，通常称为 Wasm，是一种专为 Web 浏览器设计的二进制指令格式。它是一种低级虚拟机，能够以接近本机的速度执行代码。 Wasm 是 Mozilla、Google、Microsoft 和 Apple 等主要浏览器供应商合作开发的成果，其目标是将高性能应用程序引入网络。

WebAssembly 的主要优势之一是它与多种编程语言兼容，使其成为 Web 开发的通用解决方案。你可以用C++、Rust甚至TypeScript等语言编写代码，然后将其编译为Wasm二进制格式，可以直接在浏览器中执行。

将 WebAssembly 与 JavaScript 集成

WebAssembly 为 Web 开发带来了很多好处。它允许开发人员以接近本机的速度执行计算密集型任务，使其适合需要高性能执行的应用程序。通过利用 WebAssembly，开发人员可以将用 C++、Rust 或 TypeScript 等语言编写的现有代码库移植到 Web，而无需牺牲性能。

WebAssembly 与 JavaScript 的集成可实现两种语言之间的无缝交互。 JavaScript 充当桥梁，为使用 WebAssembly 模块提供方便的界面。这使得开发人员能够将 WebAssembly 的强大功能与 JavaScript 库和框架的丰富生态系统和灵活性结合起来。

尽管 WebAssembly 是一项独立技术，但它可以与 JavaScript 无缝集成，从而允许开发人员在单个应用程序中结合两种语言的优势。 JavaScript 充当 Web 平台和 WebAssembly 模块之间的粘合剂，为与编译的代码进行交互提供了方便的接口。

JavaScript 提供了加载 WebAssembly 模块所需的 API。 fetch API 用于检索二进制文件，并将生成的 ArrayBuffer 传递给 WebAssembly.instantiate 函数。该函数异步编译模块并返回一个包含导出函数和模块内存的实例。通过访问这些导出的函数，JavaScript 可以调用 WebAssembly 模块提供的功能。

为了演示这种集成，让我们考虑一个简单的示例。我们将编写一个计算斐波那契数列的 Wasm 模块，然后从 JavaScript 调用该模块。

第 1 步：编写 WebAssembly 模块

让我们首先用 C++ 编写斐波那契计算逻辑。将以下代码保存在名为 fibonacci.cpp 的文件中 -

#include <emscripten.h>

extern "C" {
   int EMSCRIPTEN_KEEPALIVE fibonacci(int n) {
      if (n <= 1) {
         return n;
      } else {
         return fibonacci(n - 1) + fibonacci(n - 2);
      }
   }
}

说明

在此代码中，我们有一个 C++ 函数 fibonacci，用于递归计算斐波那契数列。 EMSCRIPTEN_KEEPALIVE 宏用于确保函数已导出并且可以从 JavaScript 访问。

第 2 步：编译 WebAssembly 模块

要将 C++ 代码编译为 WebAssembly，我们将使用 Emscripten 工具链。在终端中运行以下命令 -

emcc fibonacci.cpp -s WASM=1 -o fibonacci.wasm

此命令将生成 fibonacci.wasm 文件，其中包含已编译的 WebAssembly 模块。

第 3 步：从 JavaScript 调用 WebAssembly

现在我们有了 WebAssembly 模块，让我们从 JavaScript 调用它。将以下代码保存在 HTML 文件 index.html 中 -

示例

<!DOCTYPE html>
<html>
<head>
   <script>
      const fetchAndInstantiate = async () => {
         const response = await fetch('fibonacci.wasm');
         const buffer = await response.arrayBuffer();
         const module = await WebAssembly.instantiate(buffer);
         const instance = module.instance;

         const fibonacci = instance.exports.fibonacci;
         const result = fibonacci(10);

         console.log('Fibonacci(10):', result);
      };

      fetchAndInstantiate();
   </script>
</head>
<body>
</body>
</html>

说明

在此代码中，我们使用 fetch API 来检索 fibonacci.wasm 文件并将其转换为 ArrayBuffer。然后，我们使用 WebAssembly.instantiate 实例化 WebAssembly 模块，并从模块的实例中获取导出的斐波那契函数。最后，我们使用参数 10 调用斐波那契函数并将结果记录到控制台。

第 4 步：运行示例

要运行该示例，请在 Web 浏览器中打开 HTML 文件。打开浏览器的开发者控制台，您应该看到输出 Fibonacci(10): 55。这确认 WebAssembly 模块已成功从 JavaScript 加载并执行。

结论

WebAssembly 是一项强大的技术，为高性能 Web 应用程序开辟了新的可能性。通过结合 WebAssembly 和 JavaScript 的优势，开发人员可以利用现有代码库，用较低级语言编写性能关键部分，并将它们无缝集成到他们的 Web 项目中。凭借 WebAssembly 的灵活性和可移植性，该 Web 平台有望成为运行复杂应用程序的更强大的环境。

以上就是使用 JavaScript 的 Web 组装 (Wasm)的详细内容，更多请关注php中文网其它相关文章！

PHP课程 HTML视频教程 CSS视频 JS视频教程 Vue视频教程

声明：本文转载于：tutorialspoint，如有侵犯，请联系admin@php.cn删除

上一条：使用ngMessages进行AngularJS表单验证下一条：如何使用 FabricJS 使椭圆不可见？