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来访问操作系统的功能。

相关文章
|
4月前
|
Rust 前端开发 JavaScript
震惊!JavaScript 与 WebAssembly 强强联合,开启前端性能传奇之旅,你准备好了吗?
【8月更文挑战第27天】在互联网飞速发展的今天,前端技术,特别是核心语言JavaScript,正经历着持续的革新。为了突破JavaScript在处理复杂计算时的性能局限,WebAssembly应运而生。作为一种高效的二进制格式,WebAssembly能以接近原生的速度在浏览器中运行,支持C、C++和Rust等语言编写的高性能代码。它与JavaScript相辅相成,前者专注于高性能计算任务(如游戏开发、图像处理),后者则负责页面的交互与逻辑控制。通过结合使用,二者为前端开发者提供了更为强大和灵活的工具集,共同推动前端技术进入一个全新的性能时代。
100 2
|
6月前
|
JavaScript 前端开发 算法
Box2D(现在通常称为Box2D.js或者其WebAssembly版本,Emscripten Box2D)是一个流行的2D物理引擎,用于模拟刚体动力学、碰撞检测与响应以及关节约束等物理现象
【6月更文挑战第16天】Box2D.js,基于C++的2D物理引擎,经Emscripten编译为WebAssembly,用于JavaScript游戏中的真实物理模拟,包含碰撞检测和关节约束。它提供高效的碰撞检测,易于扩展和定制物理属性。使用步骤涉及初始化世界、创建刚体、添加碰撞形状、模拟物理及处理碰撞事件。物理引擎虽提升逼真度,但也增加复杂性和性能需求。其他选项如p2.js、matter.js和ammo.js也可供选择。
168 8
|
7月前
|
Rust 前端开发 JavaScript
前端技术的未来:WebAssembly与JavaScript的融合之路
【2月更文挑战第12天】本文旨在探讨WebAssembly(以下简称Wasm)与JavaScript(以下简称JS)的结合如何为前端开发带来革命性变化。传统上,JS一直是前端开发的核心,但随着Wasm的出现,我们看到了前端性能和功能的新天地。文章首先介绍Wasm的基本概念,然后分析其对前端开发的影响,包括性能提升、新功能实现以及开发模式的变化。最后,探讨了Wasm与JS融合的未来趋势,以及这种融合如何推动前端技术的进步。
|
7月前
|
Rust 前端开发 JavaScript
前端技术的未来演进:WebAssembly与JavaScript的深度融合
【2月更文挑战第11天】 在数字化时代,前端技术的迅速发展不仅推动了用户体验的革新,也促进了Web应用的性能提升。本文将探讨WebAssembly(以下简称Wasm)与JavaScript(以下简称JS)之间的深度融合如何成为前端技术发展的关键转折点。不同于传统的技术文章摘要,我们将通过一种叙事式的预览引导读者进入这一技术领域的探索之旅,揭示Wasm和JS结合后为前端开发带来的无限可能性和挑战。
|
7月前
|
Rust 前端开发 JavaScript
探索前端技术的未来:WebAssembly与JavaScript的融合之路
【2月更文挑战第12天】 随着Web技术的不断进步,前端开发正迎来一场革命性变革。本文将深入探讨WebAssembly(以下简称Wasm)与JavaScript(以下简称JS)的结合如何为前端开发带来前所未有的性能提升与新的编程模式。我们将从两者的基本概念入手,探索它们各自的优势与局限,然后深入分析Wasm和JS协同工作时能够解锁的潜力,最后展望这一技术趋势如何塑造未来的前端开发生态。本文旨在为前端开发者提供洞见,帮助他们理解并准备好迎接这一即将到来的技术浪潮。
|
JSON JavaScript 前端开发
如何通过 JavaScript 运行用 Go 编写的 WebAssembly 模块? 下
如何通过 JavaScript 运行用 Go 编写的 WebAssembly 模块?
211 0
|
7月前
|
Web App开发 Rust JavaScript
Rust 笔记:WebAssembly 的 JavaScript API
Rust 笔记:WebAssembly 的 JavaScript API
176 0
|
Web App开发 存储 缓存
WebAssembly 的 JavaScript API
本文介绍 WebAssembly 的 JavaScript API。
200 1
|
JSON 编解码 Rust
如何通过 JavaScript 运行用 Go 编写的 WebAssembly 模块? 上
如何通过 JavaScript 运行用 Go 编写的 WebAssembly 模块?
181 0
|
JavaScript 前端开发 测试技术