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. 【Git】02 创建本地仓库 & 添加文件并提交

    1.创建版本库 版本库又名仓库,英文名repository, 你可以简单理解成一个目录,这个目录里面的所有文件都可以被Git管理起来 每个文件的修改.删除,Git都能跟踪,以便任何时刻都可以追踪历史, ...

  2. 【Vue】06 Webpack Part2 打包命令配置

    Webpack 配置: 入口 & 出口: 就是我们使用的打包命令: 一个是对什么文件执行,这就是入口 一个是输出到什么文件,这就是出口 每一次打包使用这个命令都必须指定这两个必要的参数 所以将 ...

  3. 在计算机论文中suppose suggest assume 用法上的区别

    ChatGPT3.5的答案: 在计算机论文中,"suppose," "suggest," 和 "assume" 有不同的用法和含义.它们在表 ...

  4. 第四范式开源强化学习框架——OpenRL

    维护者信息: 知乎地址: https://www.zhihu.com/people/huangshiyu.me 个人主页: http://tartrl.cn/people/huangshiyu/ Gi ...

  5. 数字人 —— 虚拟人 —— Inworld AI用生成式AI——生成式游戏NPC

    相关: https://www.ithome.com/0/756/603.htm https://baijiahao.baidu.com/s?id=1774732295233220838 https: ...

  6. opencv-python报错：fatal error: jpeglib.h: No such file or directory

    参考: https://blog.csdn.net/yang_xuexi/article/details/123303777 https://blog.csdn.net/u010835747/arti ...

  7. List按需转换Map

    需求 : Mybatis的<select>返回一个List,想按照实体类其中的属性转换成Map<String, String>实现过程: 其实有很多方式,可以使用普通for循环 ...

  8. Sealos 就是小团队的神器

    作者:阳明.Kubernetes 布道师,公众号 K8s 技术圈主理人 最近我们新开发了一个项目 fastclass.cn,这个项目是一个独立开发者的学习网站,我们的目标是帮助你使用 Figma.Py ...

  9. mysql学习问题记录

    Q: 问题 MySQL在创建外键索引时,使用工具会出现创建完成但是闪一下就没了 使用CONSTRAINT '外键索引名' FOREIGN KEY ('xx') REFERENCES 数据库名 (xx) ...

  10. spring boot使用多数据源体验

    小白是一名.net程序员,之前小白介绍了过了自己的博客系统http://www.ttblog.site/,用.net写厌了,所以想学下java尝尝鲜,于是小白准备用spring boot来实现一个博客 ...