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. 【JavaScript】下拉联动回显问题

    首先是多级下拉联动实现: 这是DOM结构: <div> <label style="margin-left: 10px;display: inline-block;&quo ...

  2. 【perl】01

    1.环境搭建 -- 解释器 / 编译器 Perl 在 Window 平台上有 ActiveStatePerl 和 Strawberry Perl 编译器. ActiveState Perl和 Stra ...

  3. 【Spring Data JPA】04 JPQL和原生SQL

    @Transactional注解 让Spring处理事务 不需要自己每次都手动开启提交回滚 FINDONE & GETONE的区别? findone是立即加载 getone是延迟加载,配合事务 ...

  4. MyBatis-Plus文件上传方法

    网站的文件上传方法 本地存储上传 // 本地存储方式 MultipartFile接受文件 @PostMapping("/save") public Result save(Stri ...

  5. 如何在Windows10电脑上打开3D建模STL文件

    相关: https://www.bilibili.com/video/BV1gD4y1h7tj/

  6. 什么是3D扫描技术？

    相关: https://www.bilibili.com/video/BV1fN4y1z7uD/?vd_source=f1d0f27367a99104c397918f0cf362b7 接触式:就是使用 ...

  7. 中国特供版4090D已经开始发售

    由于美国政府的限制,NVIDIA公司等美国公司不允许向中国出口4090显卡,但是为了绕过美国政府的限制NVIDIA公司推出了中国特供版的4090D显卡. 4090d显卡和4090显卡区别大吗?可以说其 ...

  8. LeetCode 上1769号 面试编程题，python编程

    原题地址: https://leetcode-cn.com/problems/minimum-number-of-operations-to-move-all-balls-to-each-box/ - ...

  9. 国产CPU，国产操作系统UOS——零刻LZX迷你主机 ， 显卡驱动安装以及屏幕配置

    看网上新闻发现了一款mini电脑--零刻LZX迷你主机 国产兆芯四核八线程 教学家用办公全能王8+256G 该款电脑使用的是国产CPU兆芯,以及国产操作系统UOS,由于价格还不贵就入手玩玩. 商品地址 ...

  10. [题解] [ABC221H] Count Multiset - DP

    [ABC221H] Count Multiset 题面翻译 输入两个正整数 \(N,M\),并存在一个集合,问你一个长度为 \(k\) 的合法集合存在多少个?你需要回答 \(k\) 的值为 \(1\) ...