Node.js 与 WebAssembly

简介: Node.js 与 WebAssembly

1、简介

首先,让我们了解为什么WebAssembly是一个很棒的工具,并学会自己使用它。

WebAssembly是一种类似汇编的高性能语言,可以从各种语言编译,包括C/C++、Rust和AssemblyScript。目前,Chrome、Firefox、Safari、Edge和Node.js都支持它!

WebAssembly规范详细介绍了两种文件格式,一种是扩展名为.wasm的WebAssembly模块的二进制格式,另一种是相应的扩展名为.wat的WebAssemblyText格式的文本表示。

2、关键概念

  • 模块 - 一个经过编译的WebAssembly二进制文件,即.wasm文件。
  • 内存 - 可调整大小的ArrayBuffer。
  • 表 - 未存储在内存中的可调整大小的引用类型数组。
  • 实例 - 模块及其内存、表和变量的实例化。

为了使用WebAssembly,您需要一个.wasm二进制文件和一组API来与WebAssembly通信。Node.js通过全局WebAssembly对象提供了必要的API。

console.log(WebAssembly);

我们在浏览器中打印下这个对象,如下图所示:

3、生成WebAssembly模块

有多种方法可用于生成WebAssembly二进制文件,包括:

其中一些工具不仅生成二进制文件,还生成要在浏览器中运行的JavaScript“粘合”代码和相应的HTML文件。

4、如何使用它

如果我们更熟悉TypeScript的体验,那就通过 AssemblyScript 来试一下

1、我们先安装一下 AssemblyScript

npm install --save-dev assemblyscript

2、我们通过编译器对应的脚手架工具,快速生成推荐目录结构和配置文件

npx asinit .

目录结果如下:

  • ./assembly 包含正在编译到WebAssembly的AssemblyScript源的目录。
  • ./assembly/tsconfig.json TypeScript配置继承了建议的AssemblyScript设置。
  • ./assembly/index.ts 示例文件正在编译到WebAssembly中,以便开始使用。
  • ./build 生成存储编译的WebAssembly文件的工件目录。
  • ./build/.gitignore 从源代码管理中排除已编译二进制文件的Git配置。
  • ./asconfig.json 定义“调试”和“发布”目标的配置文件。
  • ./package.json 包含编译到WebAssembly所需命令的包信息。
  • ./tests/index.js 启动测试,以检查模块是否正常工作。
  • ./index.html 生成的html文件

3、打开,index.ts 我们在里面写了一个函数:

1. export function add(a: i32, b: i32): i32 {
2. return a + b;
3. }

4、然后我们编译一下

npm run asbuild

一旦有了WebAssembly模块,就可以使用Node.js WebAssembly对象来实例化它。

1. // 假设存在 release.wasm文件,该文件aad 包含一个添加2个提供参数的函数
2. async function instantiate(module, imports = {}) {
3. const { exports } = await WebAssembly.instantiate(module, imports);
4. return exports;
5. }
6. export const {
7.   memory,
8.   add
9. } = await (async url => instantiate(
10. await (async () => {
11. try { return await globalThis.WebAssembly.compileStreaming(globalThis.fetch(url)); }
12. catch { return globalThis.WebAssembly.compile(await (await import("node:fs/promises")).readFile(url)); }
13.   })(), {
14.   }
15. ))(new URL("release.wasm", import.meta.url));

5、打开index.html文件,看一下结果:

1. <!DOCTYPE html>
2. <html lang="en">
3. 
4. <head>
5. <script type="module"> 
6. import { add } from "./build/release.js"; 
7.    document.body.innerText = add(1, 2);
8.  </script>
9. </head>
10. <body></body>
11. </html>

或者,运行一下测试用例,看下最后的结果也是可以的,如下所示:

5、与操作系统交互

WebAssembly模块本身无法直接访问操作系统功能。

可以使用第三方工具Wasmtime(https://docs.wasmtime.dev/)来访问此功能。

Wasmtime利用WASI(https://wasi.dev/) API来访问操作系统的功能。

相关文章
|
JavaScript 前端开发 测试技术
Node.js中的WebAssembly入门
Node.js中的WebAssembly入门 WebAssembly是一种令人兴奋的新语言,许多JavaScript引擎都支持它。WebAssembly有望使编译C和C ++等语言变得更容易在浏览器中运行。
5321 0
|
13天前
|
Rust 前端开发 JavaScript
前端技术的未来:WebAssembly与JavaScript的融合之路
【2月更文挑战第12天】本文旨在探讨WebAssembly(以下简称Wasm)与JavaScript(以下简称JS)的结合如何为前端开发带来革命性变化。传统上,JS一直是前端开发的核心,但随着Wasm的出现,我们看到了前端性能和功能的新天地。文章首先介绍Wasm的基本概念,然后分析其对前端开发的影响,包括性能提升、新功能实现以及开发模式的变化。最后,探讨了Wasm与JS融合的未来趋势,以及这种融合如何推动前端技术的进步。
|
13天前
|
Rust 前端开发 JavaScript
探索前端技术的未来:WebAssembly与JavaScript的融合之路
【2月更文挑战第12天】 随着Web技术的不断进步,前端开发正迎来一场革命性变革。本文将深入探讨WebAssembly(以下简称Wasm)与JavaScript(以下简称JS)的结合如何为前端开发带来前所未有的性能提升与新的编程模式。我们将从两者的基本概念入手,探索它们各自的优势与局限,然后深入分析Wasm和JS协同工作时能够解锁的潜力,最后展望这一技术趋势如何塑造未来的前端开发生态。本文旨在为前端开发者提供洞见,帮助他们理解并准备好迎接这一即将到来的技术浪潮。
|
13天前
|
Rust 前端开发 JavaScript
前端技术的未来演进:WebAssembly与JavaScript的深度融合
【2月更文挑战第11天】 在数字化时代,前端技术的迅速发展不仅推动了用户体验的革新,也促进了Web应用的性能提升。本文将探讨WebAssembly(以下简称Wasm)与JavaScript(以下简称JS)之间的深度融合如何成为前端技术发展的关键转折点。不同于传统的技术文章摘要,我们将通过一种叙事式的预览引导读者进入这一技术领域的探索之旅,揭示Wasm和JS结合后为前端开发带来的无限可能性和挑战。
|
13天前
|
Web App开发 Rust JavaScript
Rust 笔记:WebAssembly 的 JavaScript API
Rust 笔记:WebAssembly 的 JavaScript API
98 0
|
10月前
|
JSON JavaScript 前端开发
如何通过 JavaScript 运行用 Go 编写的 WebAssembly 模块? 下
如何通过 JavaScript 运行用 Go 编写的 WebAssembly 模块?
136 0
|
10月前
|
JSON 编解码 Rust
如何通过 JavaScript 运行用 Go 编写的 WebAssembly 模块? 上
如何通过 JavaScript 运行用 Go 编写的 WebAssembly 模块?
118 0
|
11月前
|
Web App开发 存储 缓存
WebAssembly 的 JavaScript API
本文介绍 WebAssembly 的 JavaScript API。
131 1
|
JavaScript 前端开发 测试技术
|
开发框架 Rust 前端开发
​2019 年 WebAssembly 盘点:跟 Javascript 的相爱相杀
2019 年 WebAssembly 以超乎我们预料的速度在发展,2020 年可能会是一个 Wasm 应用百花齐放的年份。两年多以来,本文作者 Colin Eberhardt 一直在撰写 WebAssembly 每周新闻 [1]。正值 2019 年底,他也借机分享今年他本人最喜欢的一些文章,对 WebAssembly 在 2019 年的发展做一个回顾。
2189 0
​2019 年 WebAssembly 盘点:跟 Javascript 的相爱相杀