Wasm -WebAssembly简介

WebAssembly 是什么？

WebAssembly/wasm WebAssembly 或者 wasm 是一个可移植、体积小、加载快并且兼容 Web 的全新格式

WebAssembly（简称 Wasm）是一种二进制指令格式，设计用于在现代 Web 浏览器中高效运行程序。它可以被认为是一种低级的、接近硬件的编程语言，是一种介于字节码和机器码之间的跨平台中间语言(.net，java虚拟机)。

官方目标：让 Web 能运行接近原生性能的代码。
核心功能：提供一种安全、跨平台、高性能的沙盒执行环境。

WebAssembly 的工作原理

• 编译阶段：使用支持的语言（如 Rust、C++）编写代码，并通过工具链编译为 WebAssembly 字节码（.wasm 文件）。
• 加载阶段：浏览器或运行时通过字节码加载 WebAssembly 模块。
• 执行阶段：使用底层的 JIT 或 AOT（Ahead-of-Time Compilation）技术，生成与平台相关的机器码并执行。

WebAssembly 和 Java 的 JIT（即时编译）对比

什么是 JIT？

Java 的 JIT（Just-In-Time Compilation）是一种将字节码（Java 编译器生成的中间代码）字节码是一种中间表示形式，它不是直接由CPU执行的指令集，而是设计为可以在虚拟机（Virtual Machine, VM）中解释或进一步编译成机器码来执行。

核心理念：动态优化，提升运行时性能。
特点：

• 在运行时完成字节码到机器码的转换。
• 利用实时的代码分析和优化技术，改善程序执行效率。

WebAssembly 和 Java JIT 的相似之处

字节码的本质：
两者都使用字节码作为中间表示：Java 使用 .class 文件，而 WebAssembly 使用 .wasm 文件。
字节码本身与底层硬件无关。

即时编译：
WebAssembly 和 Java JIT 都依赖即时编译，将中间代码翻译为平台相关的机器码。

跨平台性：
两者都通过字节码和运行时实现了跨平台支持，运行时根据目标设备环境生成对应的机器码。

WebAssembly 和 Java JIT 的区别

性能对比
启动速度：
WebAssembly：加载速度快，设计时考虑到 Web 场景，注重低延迟
Java JIT：启动速度稍慢，JIT 需要运行时收集分析信息再进行优化。

长期运行性能：
WebAssembly：运行性能接近原生，但不具备长期优化能力。
Java JIT：通过持续的动态分析和优化（如热点方法优化、分支预测等），在长期运行下性能可能更优。

内存消耗：
WebAssembly：运行时非常轻量级，适合嵌入式和资源受限场景。
Java JIT：运行时依赖 JVM，占用的内存相对更大。

WebAssembly 和 Java JIT 的实际应用场景

WebAssembly 的应用场景

• 高性能 Web 应用： 游戏（如 Unity 的 Web 部署）。 视频/图像处理（如 Figma 部分功能通过 Wasm 实现）。
• 跨语言模块： 使用 Rust/C++ 编写高性能逻辑，并将其编译为 Wasm，嵌入到 JS 项目中。
• 边缘计算和嵌入式开发： Wasm 的沙盒和轻量特性适合边缘设备和微服务。

WebAssembly 专注于高性能和跨平台的 Web/嵌入式开发，其轻量特性和沙盒安全性使其在浏览器和边缘计算领域独具优势。

Java JIT 的应用场景

• 企业级应用： Java 的稳定性和成熟的生态使其成为银行、保险等企业系统的首选。

• 大数据处理： Hadoop 和 Spark 等大数据工具广泛依赖 Java。

• 分布式系统： 如 Spring Cloud 微服务架构，依赖 Java 的开发效率和 JVM 的性能优化。

Java JIT 则强调动态优化和长期性能，更适合复杂的企业级系统和服务器端开发。

JavaScript 调用 WebAssembly (Wasm) 通常涉及到几个步骤。

步骤 1: 编译 C/C++ 或 Rust 等代码为 WebAssembly
首先，你需要将你想要在浏览器中运行的 C/C++ 或 Rust 等代码编译成 WebAssembly (.wasm) 文件。这通常使用工具链如 Emscripten、wasm-pack（针对 Rust）等来完成。

步骤 2: 准备 WebAssembly 模块
确保你的 WebAssembly 模块被正确地托管在一个可以由你的网页访问的位置。如果你正在开发本地项目，你可能需要设置一个简单的 HTTP 服务器来提供 .wasm 文件，因为浏览器安全策略不允许直接从文件系统加载 WebAssembly 模块。

步骤 3: 使用 JavaScript 加载并实例化 WebAssembly 模块
在 HTML 页面中，你可以使用 WebAssembly.instantiateStreaming 方法或 fetch API 来加载 WebAssembly 模块。以下是一个使用 instantiateStreaming 的例子，它更高效，因为它可以在下载的同时解析模块。

// 假设 wasm 模块位于 'myModule.wasm'
async function loadWasm() {
    try {
        const response = await fetch('myModule.wasm');
        if (!response.ok) throw new Error('Network response was not ok');

        // Instantiate the WebAssembly module.
        const { instance } = await WebAssembly.instantiateStreaming(response, {});

        // Now you can call functions from the WebAssembly instance
        console.log(instance.exports.myExportedFunction());
    } catch (err) {
        console.error('Failed to load wasm module:', err);
    }
}

loadWasm();

步骤 4: 调用 WebAssembly 导出的函数
一旦 WebAssembly 实例创建完成，你就可以像调用普通 JavaScript 函数一样调用导出的 WebAssembly 函数。例如，如果 WebAssembly 模块导出了名为 myExportedFunction 的函数，你可以直接在 JavaScript 中调用 instance.exports.myExportedFunction()。

注意事项

内存管理：WebAssembly 和 JavaScript 共享线性内存（Linear Memory）。这意味着你可以通过共享同一段内存来传递数据，但是需要注意手动管理内存，尤其是在处理大型数据集时。

类型转换：WebAssembly 只支持整数和浮点数类型的参数和返回值。如果你有更复杂的结构（如对象或字符串），你需要在两者之间进行适当的序列化和反序列化。

异常处理：WebAssembly 本身并不支持异常传播到 JavaScript。如果你的 WebAssembly 代码抛出异常，那么这个异常会被截获并且会终止模块的执行，除非你在 WebAssembly 代码中显式处理了这些异常。

随着 WebAssembly 技术的发展，更多的高级功能和优化将会被引入，使得 JavaScript 和 WebAssembly 的集成更加无缝和强大。