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. Implementation of Reinforcement Learning with Meta-Critic Networks and GAE in a Human-Centered Framework

    论文<Future of AI and Empowering Reinforcement Learning with Meta-Critic Networks and GAE in a Huma ...

  2. PID入门视频课程分享： 单片机 > PID课程：一堂课帮你搞定PID算法 > pid算法

    推荐入门视频: <PID课程:一堂课帮你搞定PID算法> 收费版: http://t.elecfans.com/v/1399.html 免费版: 地址: https://www.bilib ...

  3. 运行openai的gym代码报错提示import pyglet，安装后依然报错：ImportError: sys.meta_path is None, Python is likely shutting down

    运行代码: import gym def cartpole(): environment = gym.make('CartPole-v1') environment.reset() for _ in ...

  4. Git-HEAD 的含义

    在 Git 中,"HEAD" 是一个特殊的引用,它指向当前所处的分支或提交. 当你进行一些操作时,比如提交代码.切换分支等,HEAD 的指向会随之改变.下面是 HEAD 在不同情况 ...

  5. [nRF24L01+] 2. 芯片介绍

    2. 芯片介绍 2.1. 特点 电源管理 掉电模式: 900nA 待机1模式: 26uA 2.2. 方框图

  6. Ubuntu 16.04 安装 python3.8

    Ubuntu 16.04  amd64 (64bit)(纯净版) 自带python2.7和python3.5 执行"whereis python"查看当前安装的python [ro ...

  7. MySQL数据库基本操作以及使用

    MySQL数据库 操纵数据库 查看数据库 show databases; 创建数据库 create database <database_name>; 删除数据库 drop databas ...

  8. 【Python】之pip安装报错问题：WARNING: Retrying (Retry(total=4, connect=None, read=None, redirect=None, status=None))

    我想安装python第三方库,但是始终报安装失败 经查询得知,需要国内源,有如下地址: 阿里云 http://mirrors.aliyun.com/pypi/simple/ 中国科技大学 https: ...

  9. Kubernetes-7：Pod健康检查原理-探针（就绪检测、存活检测）

    探针-就绪探测.存活探测 探针是由kubelet对容器执行的定期诊断,要执行诊断,kubelet调用由容器实现的Handler,有三种类型的处理程序: ExecActive:在容器内执行指定命令,若命 ...

  10. 各种好用的免费快递物流API 接口分享

    全国快递物流查询:1.提供包括申通.顺丰.圆通.韵达.中通.汇通等 600+快递公司在内的快递物流单号查询.2.与官网实时同步更新.3.自动识别快递公司. 全国快递物流地图轨迹查询:[H5 物流轨迹. ...