0x00 WebAssembly 基础

详情参考《WebAssembly | MDN》

（1）概述

  • WebAssembly 简称 WASM 或 WA，是一种新的编码方式，可以在现代的 Web 浏览器中运行
  • 可以通过编译器，把多种编程语言（如 C/C++、C#、Go、Python、Rust、TypeScript 等）编写的代码转化为 WA，并在浏览器中使用
  • 特点：
    • 灵活度高：是一种低级的类汇编语言
    • 体积较小：具有紧凑的二进制格式
    • 性能提升：接近原生的性能运行
  • WA 可以与 JavaScript 共存，允许两者一起工作
  • WA 关键概念：
    • 模块：表示一个已经被浏览器编译为可执行机器码的 WA 二进制代码
    • 内存：一个可变长的 ArrayBuffer
    • 表格：一个可变长的类型化数组
    • 实例：一个模块及其在运行时使用的所有状态（包括内存、表格和一系列导入值）
  • 使用 WA 编写的相关应用：Figma 等

（2）加载与运行

  1. 通常，编译器将其他语言的代码编译成 .wasm 文件，以便在 WA 环境中使用

  2. 在浏览器环境中，可以通过 AJAX 导入外部文件，如导入 .wasm 文件

    fetch("main.wasm");

  3. JavaScript 中的 WebAssembly 对象是所有 WA 相关功能的命名空间，其中 WebAssembly.compile / WebAssembly.instantiate 或 WebAssembly.compileStreaming / WebAssembly.instantiateStreaming 方法组合可以用于加载和运行 WA 代码

    fetch("main.wasm")
    
  .then((response) => response.arrayBuffer())
    
  .then((bytes) => WebAssembly.compile(bytes))
    
  .then((module) => {
    
    const instance = new WebAssembly.Instance(module);
    
    console.log(instance.exports);
    
  });

    或

    WebAssembly.instantiateStreaming(fetch("main.wasm")).then(
    
  (results) => {
    
    const instance = results.instance;
    
    console.log(instance.exports);
    
  },
    
);

（3）相关 JavaScript API

  • WebAssembly：所有 WA 相关功能的命名空间

a. 对象

  • WebAssembly.Module：包含已经由浏览器编译的无状态 WebAssembly 代码
  • WebAssembly.Global：一个全局变量实例，可以被 JavaScript 和 importable/exportable 访问
  • WebAssembly.Instance：有状态，是 WebAssembly.Module 的一个可执行实例
  • WebAssembly.Table：代表 WA 表格概念的 JavaScript 包装对象，具有类数组结构，存储了多个函数引用
  • WebAssembly.Tag：定义了一种 WA 异常的类型，该异常可以从 WA 代码抛出或抛出
  • WebAssembly.Exception：表示从 WA 抛出到 JavaScript 的运行时异常，或者从 JavaScript 抛出到 WA 异常处理程序的运行时异常
  • WebAssembly.LinkError：表示在模块实例化期间发生错误

b. 方法

  • WebAssembly.Memory()：用于创建一个新的 Memory 内存对象
  • WebAssembly.CompileError()：创建一个新的 WA 编译错误对象
  • WebAssembly.RuntimeError()：创建一个新的 WA 运行时错误对象

0x01 结合 C/C++

  1. 使用 C 或 C++ 编写一段代码（以 C 为例）

    // filename: main.c
    
#include<stdio.h>

int main(){
    
  printf("Hello, WebAssembly!");
    
  return 0;
    
}

    运行测试无误后继续

  2. 下载并安装用于编译 C/C++ 到 WA 的 Emscripten

    详细操作参考官方下载与安装文档：https://emscripten.org/docs/getting_started/downloads.html

  3. 使用命令 emcc main.c -s WASM=1 -o main.html 编译

    • emcc：Emscripten 提供的工具
    • main.c：基于 C 语言的代码
    • -s WASM=1：指定输出 WA
    • -o main.html：输出 main.wasm、main.js 和 main.html 文件，按需使用

0x02 结合 C#

  1. 使用 C# 编写一段代码

    // filename: main.cs
    
public class Example
    
{
    
  public static void Main()
    
  {
    
    System.Console.WriteLine("Hello, WebAssembly!");
    
  }
    
}

  2. 安装 .NET Core SDK、mono

  3. 使用命令 mcs --out:main.dll -t:library main.cs 将 C# 代码编译为 DLL

  4. 使用命令 mono --runtime=mono --aot=llvm main.dll 将 DLL 编译为 WA

0x03 结合 Go

  1. 使用 Go 编写一段代码：

    // filename: main.go
    
package main

import "fmt"

func main() {
    
  fmt.Println("Hello, WebAssembly!")
    
}

  2. 使用命令 GOOS=js GOARCH=wasm go build -o main.wasm main.go 通过 GOCC 将 main.go 编译为 main.wasm

0x04 结合 Python

  • 可以通过 py2wasm 工具将 Python 编译为 WA，或使用 pyodide 直接在 JavaScript 中执行 Python

a. py2wasm

  1. 使用 Python 编写一段代码：

    # filename: main.py
    
if __name__ == '__main__':
    
    print("Hello, WebAssembly!")

  2. 使用命令 pip install py2wasm 安装 py2wasm 工具

  3. 使用命令 py2wasm main.py -o main.wasm 将 main.py 编译为 main.wasm

b. pyodide

在 HTML 头中导入 pyodide.js 并编写 Python 代码

<!DOCTYPE html>

<html>

  <head>

    <script src="https://cdn.jsdelivr.net/pyodide/v0.26.0/full/pyodide.js"></script>

  </head>

  <body>

    <script>

      async function main() {

        let pyodide = await loadPyodide();

        await pyodide.loadPackage("numpy"); // 加载一个 Python 库

        let result = await pyodide.runPythonAsync(`

                import numpy as np

                np.sum([1, 2, 3, 4])

            `);

        console.log(result);

      }

      main();

    </script>

  </body>

</html>

如果在 NodeJS 环境中，可以使用命令 npm install pyodide 导入

0x05 结合 Rust

参考自《将 Rust 代码编译为 WASM | 博客园-_zhiqiu》

  1. 使用命令 cargo add wasm-bindgen 添加依赖项

  2. 使用命令 rustup target add wasm32-unknown-unknown 安装目标

  3. 使用 Rust 编写一段代码：

    // filename: main.rs
    
use wasm_bindgen::prelude::*;

// 使用 #[wasm_bindgen] 宏来导出函数到 JavaScript
    
#[wasm_bindgen]
    
pub fn greet(name: &str) -> String {
    
  format!("Hello, {}!", name)
    
}

  4. 使用命令 cargo build --target wasm32-unknown-unknown --release 将 main.rs 编译为 main.wasm 等文件

  5. 使用命令 wasm-bindgen --out-dir ./out --target web target/wasm32-unknown-unknown/release/lib_wasm.wasm 生成 JavaScript 绑定文件，并设置输出目录为 ./out

0x06 结合 TypeScript

  • AssemblyScript 简称 AS，可以将 TypeScript 的严格变体编译为 WA
  • 具体操作方法参考 AS 官方文档

-End-

WebAssembly 基础以及结合其他编程语言的更多相关文章

  1. WebAssembly，可以作为任何编程语言的编译目标，使应用程序可以运行在浏览器或其它代理中——浏览器里运行其他语言的程序？

    Mozilla.谷歌.微软和苹果已经决定开发一种面向Web的二进制格式.该格式名为WebAssembly,可以作为任何编程语言的编译目标,使应用程序可以运行在浏览器或其它代理中. 几年前,我们在Inf ...

  2. day002 计算机基础之 操作系统和编程语言的分类

    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp今天主要针对计算机基础中的操作系统和编程语言的分类进行了讲解. 操作系统 &nbsp ...

  3. Python编程基础（一）编程语言是什么？编译型语言和解释型语言的区别|Python是什么？

    编程语言是什么? 其实,程序指的就是一系列指令,用来告诉计算机做什么,而编写程序的关键在于,我们需要用计算机可以理解的语言来提供这些指令. 虽然借助 Siri(Apple).Google Now(An ...

  4. Python基础：一、编程语言分类

    编程语言主要从以下几个角度进行分类: 编译型和解释型 静态语言和动态语言 强类型语言和弱类型语言 编译型语言和解释型语言 编译和解释的区别是什么? 编译器是把源程序的每一条语句都编译成机器语言,并保存 ...

  5. JavaScript基础

    JavaScript基础 JavaScript是一门编程语言,浏览器内置了JavaScript语言的解释器,所以在浏览器上按照JavaScript语言的规则编写相应代码之,浏览器可以解释并做出相应的处 ...

  6. OC基础--简介

    OC简介: 1986年,BradCox(布莱德·考克斯)在第一个纯面向对象语言Smalltalk基础上写成了Objective-C语言. 1985年,被赶出苹果公司的Steve Jobs成立了NeXT ...

  7. Oracle基础 PL-SQL编程基础（1） 变量和常量

    一.什么是PL-SQL PL-SQL是结合了Oracle过程语言和结构化查询语言(SQL)的一种扩展语言.具体来说,PL-SQL就是在普通的SQL语句的基础上增加了编程语言的特点,将数据操作和查询语句 ...

  8. Objective-C基础笔记一

    这里开始了我OC旅程 花了8天的时间粗略的学习了新知识Objective-C(简称OC),虽然只是学习了其中的基础部分,但经过这一周的学习也算是入门了.对面向对象的封装.继承.多态以及其中所包含的方法 ...

  9. 准备踏入IT编程的学子们,你们第一门编程语言选谁？ Are You Ready? Go!

    Are You Ready? Go! ——第一门编程语言选谁? 金旭亮 说明: 这篇文章是专门针对大学低年级学生(和其他软件开发初学者)写的,如果你己经是研究生或本科高年级学生,请将这篇文章转发给你的 ...

  10. Vim入门基础

    公司新员工学习有用到,Vim官网的手册又太大而全,而网上各方资料要么不全面,要么不够基础.在网上搜集各方资料,按照自己的框架整理一份Vim入门基础教程,分享出来.特点是偏向基础,但对入门者来说足够全面 ...

随机推荐

  1. 人形机器人（humanoid）的摔倒实验/撞击实验

    motivation: 人形机器人的实体比较昂贵,但是实验过程中机器人的摔倒和撞击时十分常见的事情,这就会导致机器人的元器件被损坏,造成较大的经济损失,为此我们在设计机器人的机械结构和电子元器件布局时 ...

  2. Potplayer+Alist+网盘，实现网盘视频免费在线看4K杜比HDR

    Potplayer+Alist+网盘,实现网盘视频免费在线看4K杜比HDR 引言 最近刷视频看到了一个方法可以通过alist挂载网盘,配合potplayer可实现超高画质免费在线观看视频,这里发一下配 ...

  3. WinForm DevExpress 添加行内按钮

    1.在设计器里面添加一列,设置单元格不可编辑.只读属性 2. 在所在GridView属性里面添加CustomDrawCell事件与RowCellClick事件 private void gvMain_ ...

  4. 为 OpenWrt 路由器编译 minieap-sysu 项目

    学校的校园网要使用锐捷认证,于是想把认证客户端装到刷了 OpenWrt 的路由器上面.然而认证客户端 Linux 版只支持 x86 架构,我的路由器处理器却是 AArch64 架构,装不了,所以只能想 ...

  5. CASIO fx-991CN X 使用

    复数转换 \(a+b \, {\mathrm i} \leftrightarrow r \angle \theta\) 进入复数运算模式 菜单 2 输入待转换数 OPTN ▼,选择目标格式. = 可通 ...

  6. wget 提示 "无法验证 xxxx.xxx 的由 “xxx” 颁发的证书: 无法本地校验颁发者的权限。"

    有一天在使用 wget 下载文件时,出现了无法验证证书的提示: $ wget https://github.com/zayronxio/Mkos-Big-Sur/releases/download/0 ...

  7. 【GitHub】上传代码通用操作等（附下载单个文件夹或文件）

    一.创建GitHub账号以及配置 参考我的另一篇文章:<[Mac系统 + Git]之上传项目代码到github上以及删除某个文件夹> 二.创建新的个人知识库 前面配置完之后,下面讲的再新建 ...

  8. 探索一下 Enum 优化

    探索一下 Enum 优化 SV.Enums主要是探索如何让 enum 更高效 其中涉及的优化手段并非完全自创 很多内容参考于以下项目 NetEscapades.EnumGenerators FastE ...

  9. vue打包项目版本号自加

    原因 项目每次打包后都需要改动项目版本号,这个改动每次都需要在package.json中修改version,比较麻烦,到底有没有一种打包后版本号自加的办法. 方案 版本号自加其实可以使用fs修改文件来 ...

  10. WPF 保姆级教程怎么实现一个树形菜单

    先看一下效果吧: 我们直接通过改造一下原版的TreeView来实现上面这个效果 我们先创建一个普通的TreeView 代码很简单: <TreeView> <TreeViewItem ...