Node.js 与 WebAssembly
目录
1、简介
2、关键概念
3、生成WebAssembly模块
4、如何使用它
5、与操作系统交互
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二进制文件,包括:
- 手工编写WebAssembly(.wat),并使用wabt等工具转换为二进制格式
- 在C/C++应用程序中使用emscripten(https://emscripten.org/)
- 在Rust应用程序中使用wasm-pack(https://rustwasm.github.io/wasm-pack/book/)
- 如果您喜欢类似TypeScript的体验,请使用AssemblyScript(https://www.assemblyscript.org/)
其中一些工具不仅生成二进制文件,还生成要在浏览器中运行的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 我们在里面写了一个函数:
export function add(a: i32, b: i32): i32 {return a + b;
}
4、然后我们编译一下
npm run asbuild
一旦有了WebAssembly模块,就可以使用Node.js WebAssembly对象来实例化它。
// 假设存在 release.wasm文件,该文件aad 包含一个添加2个提供参数的函数
async function instantiate(module, imports = {}) {const { exports } = await WebAssembly.instantiate(module, imports);return exports;
}
export const {memory,add
} = await (async url => instantiate(await (async () => {try { return await globalThis.WebAssembly.compileStreaming(globalThis.fetch(url)); }catch { return globalThis.WebAssembly.compile(await (await import("node:fs/promises")).readFile(url)); }})(), {}
))(new URL("release.wasm", import.meta.url));
5、打开index.html文件,看一下结果:
<!DOCTYPE html>
<html lang="en"><head><script type="module"> import { add } from "./build/release.js"; document.body.innerText = add(1, 2);</script>
</head>
<body></body>
</html>
或者,运行一下测试用例,看下最后的结果也是可以的,如下所示:
5、与操作系统交互
WebAssembly模块本身无法直接访问操作系统功能。
可以使用第三方工具Wasmtime(https://docs.wasmtime.dev/)来访问此功能。
Wasmtime利用WASI(https://wasi.dev/) API来访问操作系统的功能。
相关文章:

Node.js 与 WebAssembly
目录 1、简介 2、关键概念 3、生成WebAssembly模块 4、如何使用它 5、与操作系统交互 1、简介 首先,让我们了解为什么WebAssembly是一个很棒的工具,并学会自己使用它。 WebAssembly是一种类似汇编的高性能语言,可以从各种语言编译&…...

OpenCL编程指南-4.4矢量操作符
矢量操作符 如下描述了可用于矢量数据类型或矢量和标量数据类型组合的各类操作符。 算术操作符 算术操作符(加()、减(–)、乘(*)和除(/)),可以作用于内置整数、浮点标量和矢量数…...

索洛模型(二)
索洛模型(二) 文章目录 索洛模型(二)[toc]1 事实2 假设2.1 对生产函数的假设2.2对投入要素的假设 3 索洛模型的动态学3.1 k k k的动态学3.2 平衡增长路径 4 储蓄率变化的影响4.1 对产出的影响4.2 对消费的影响 索罗经济增长模型(Solow growth model)&am…...

【多微电网】基于粒子群优化算法的面向配电网的多微电网协调运行与优化(Matlab代码实现)
💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势:🌞🌞🌞博客内容尽量做到思维缜密,逻辑清晰,为了方便读者。 ⛳️座右铭&a…...

使用Atmel Studio开发Arduino的ATmega328P单片机
摘要:我们知道Arduino开发板常用的芯片是Atmel公司生产的AVR微控制器系列。最常见的是ATmega328P,被广泛用于Arduino Uno开发板。其他常用的AVR芯片包括ATmega2560和ATmega32U4。使用Arduino平台开发AVR的单片机非常方便。Arduino IDE提供了一个非常简洁…...
docker基础命令
查找镜像 docker search nginx 拉取镜像 不指定镜像版本的话默认拉取最新的版本,可以在dockerhub上查看镜像的版本 dockerhub地址:Docker docker pull nginx docker pull nginx:1.23 查看镜像列表 docker images 打包镜像 打包的镜像可以迁移到其它的主机上部署 …...
数组名+1和数组名+1的区别
数组名和&数组名区别 #include <stdio.h>int main() {int a[5] {1,2,3,4,5};int *ptr (int *)(&a 1);printf("%d,%d,%d\n",*(a 4),*(ptr - 1),*ptr); // 2 5 为什么是5printf("数组a[4]的地址%p,(ptr-1)地址%p, ptr的地址%p",(a 4)…...

开放原子训练营(第三季)inBuilder低代码开发实验室初体验
一、活动介绍 开放原子训练营开启inBuilder低代码实验室活动。无论您是计算机行业相关从业者、低代码开发爱好者还是普通用户,都可以基于inBuilder低代码开发平台社区版(基于UBML开源项目的一个可以广泛使用的发行版),体验向导式、…...
sql数据定义语句(cascade,set,null,no action的区别)
(一)ADD 基本格式: ALTER TABLE <表名> ADD 新属性名 新属性类型 例:alter table s1 add tele char(12):增加一个电话号码(tele)属性 注: 新增的属…...

Java进程(基础)
基本概念 1、进程:程序的执行过程 2、线程:一个进程可以有单个线程也就是我们说的单线程,还可以有多个线程也就是我们说的多线程, 线程 1、当一个类继承了Thread类就可以当成一个线程用 2、我们会重写run方法写上我们自己的业务…...

Android之 Activity活动详解
一 四大组件 1.1 Activity组件,它一个单独的窗口,程序流程都必须在Activity中运行。 1.2 service组件,用于在后台完成用户指定的操作。 1.3 content provider组件,会为所有的应用准备一个内容窗口,并且保留数据库、…...

车载软件架构——闲聊几句AUTOSAR BSW(五)
我是穿拖鞋的汉子,魔都中坚持长期主义的工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 我们并不必要为了和谐,而时刻保持通情达理;我们需要具备的是,偶尔有肚量欣然承认在某些方面我们可能会有些不可理喻。该有主见的时候能掷地有声地镇得住场…...

APP图标尺寸规范一文了解清楚
在进行图标设计前,熟知手机 app 图标尺寸规范,能更好地去针对不同平台设计出更极致的图标。当前智能手机系统主要以 iOS 及 Android 为主,APP 图标是产品给用户的第一印象,图标视觉设计的美感与吸引力,与用户是否选择下…...

写给程序员Android Framework 开发,
前言 在 Android 开发者技能中,如果想进大厂,一般拥有较好的学历可能有优势一些。但是如果你靠硬实力也是有机会的,例如死磕Framework。Framework 知识广泛应用在Android各个领域中,重要性显而易见。 成为一名Android Framework…...

html实现一个一闪一闪的按钮,CSS实现一个一闪一闪的按钮,Css闪烁点标,css设置按钮层次感,css按钮美化,CSS按钮动画过渡,CSS按钮添加阴影
效果 动态 静态 实现 底部多加了几个过渡按钮 <!DOCTYPE html> <html><head><meta charset"UTF-8"><title></title><style>#app {margin: 2% auto;text-align: center;}.lay-btn-box {position: relative;display: …...

品优购项目学习记录04--列表页
文章目录 1.品优购项目列表页制作准备工作2.列表页header和nav修改2.1 秒杀logo的制作2.2 导航栏nav修改 3.列表页主体sk_container 1.品优购项目列表页制作准备工作 1.列表页面是新的页面,我们需要新建页面文件list.html 2.因为列表页的头部和底部基本一致&#x…...

script标签type值application/json,importmap和module
type(默认text/javascript) 该属性定义 script 元素包含或src引用的脚本语言。属性的值为 MIME 类型(媒体类型); 如果没有定义这个属性,脚本会被视作 JavaScript。 如果 MIME 类型不是 JavaScript 类型&a…...

基于ArcGIS实现陕西省1:250000比例尺地形图分幅和编号
1地形图的分幅与编号原理 我国1:1000000地形图的分幅采用国际1:1000000地图分幅标准,而其他比例尺地形图分幅以1:1000000比例尺地形图为基准进行分幅。每幅1:1000000地形图范围是经差6、纬差4;纬度60~ 76之间经差12、纬差4;纬度76~ 88之间经…...

校园安全,一键报警主机助力保障
校园安全,一键报警主机助力保障 随着社会发展和科技进步,校园安全问题日益受到重视。如何保障师生们的安全成为了学校一项重要任务。而校园可视一键报警主机就是一种非常有效的安保设备。 这种报警主机集合了视频监控、安全防范、数据处理等多个功能&a…...
RabbitMQ养成记 (7. 消息可靠性投递)
消息可靠性 什么是消息的可靠性呢?? 简单来说就是 你的消息发放给 exchange 这个过程中 有可能丢失或者失败 这时候需要一个回调机制来监控 发送结果 必要时还要返回信息。 rabbitmq 给我们提供了两种: 首先是生产者到exchange发送过程的监…...

Moldflow充填分析设置
1. 如何选择注塑机: 注塑机初选按注射量来选择: 点网格统计;选择三角形, 三角形体积就是产品的体积 47.7304 cm^3 点网格统计;选择柱体, 柱体的体积就是浇注系统的体积2.69 cm^3 所以总体积产品体积浇注系统体积 47.732.69 cm^3 材料的熔体密度与固体…...
二.单例模式
一.单例模式的定义 单例模式是一种创建型设计模式,确保一个类只有一个实例,并提供该实例的全局访问点。 1.1.核心目标 唯一实例:限制类的实例化次数仅一次。全局访问:提供统一的访问入口(通常是静…...
分页查询的实现
第一步:导入pom依赖 <!--配置PageHelper分页插件--><dependency><groupId>com.github.pagehelper</groupId><artifactId>pagehelper-spring-boot-starter</artifactId><version>1.4.6</version><exclusions>…...

centos7.9源码安装zabbix7.12,求赞
centos7.9源码安装zabbix7.12-全网独有 3.CentOS7_Zabbix7.0LTS3.1.安装环境3.2.换成阿里源3.3.安装相关依赖包3.3.1.直接安装依赖3.3.2.编译安装-遇到问题01-net-snmp3.3.3.编译安装-遇到问题02-libevent3.3.4.编译安装-遇到问题03-安装openssl 3.4.创建用户和组3.5.下载上传源…...
数据库密码加密
数据库密码加密 添加jar包构建工具类具体使用优缺点 添加jar包 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-security</artifactId> </dependency>构建工具类 public class PasswordUtil …...

二叉树的遍历总结
144.二叉树的前序遍历(opens new window)145.二叉树的后序遍历(opens new window)94.二叉树的中序遍历 二叉数的先中后序统一遍历法 public static void preOrder(BiTree root){BiTree p root;LinkedList<BiTree> stack new LinkedList<>();while(p ! null ||…...

虚拟机CentOS 7 网络连接显示“以太网(ens33,被拔出)“、有线已拔出、CentOS7不显示网络图标
文章目录 一、问题描述二、解决方法1、查看网络连接方式2、开启相关服务3、确认虚拟机网络连接 一、问题描述 问题描述:在VmWare中安装CentOS7, 启动后界面不显示网络的图标。 在GONE桌面—》设置中找到网络设置,发现显示线缆已拔出。 二、解决方法 …...

吃透 Golang 基础:数据结构之 Map
文章目录 Map概述初始化删除访问不存在的 key 返回 value 的零值遍历 mapmap 自身的零值map 索引时返回的第二个参数使用 map 实现 set Map Hash Map 是无序的 key/value 对集合,其中所有的 key 都是不同的。通过给定的 key 可以在常数时间复杂度内完成检索、更新或…...

Vue 3 弹出式计算器组件(源码 + 教程)
🧮 Vue 3 弹出式计算器组件(源码 教程) 📌 建议收藏 点赞 关注,本组件支持加减乘除、双向绑定、计算过程展示,适用于表单辅助输入场景。 🔧 一、完整源码(复制即用) …...

20250603在荣品的PRO-RK3566开发板的Android13下的使用命令行来查看RK3566的温度【显示优化版本】
20250603在荣品的PRO-RK3566开发板的Android13下的使用命令行来查看RK3566的温度【显示优化版本】 2025/6/3 11:58 RK3566的cpu运行效率 top busybox top rk3566_t:/ # rk3566_t:/ # rk3566_t:/ # cd /sys/class/thermal/ rk3566_t:/sys/class/thermal # ls -l rk3566_t:/sys/c…...