怎么使用HTML5中WebAssembly加载Wasm模块并实现与JS的数据交互-H5教程-PHP中文网

WebAssembly在HTML5中通过instantiateStreaming高效加载，JS与Wasm通过共享内存和导出/导入函数交互，仅支持基本数值类型传参，字符串和数组需手动编码读写，Wasm可调用JS导入函数。

怎么使用html5中webassembly加载wasm模块并实现与js的数据交互

WebAssembly（Wasm）在HTML5中通过JavaScript API加载和运行，核心是 WebAssembly.instantiate() 或更现代的 WebAssembly.instantiateStreaming()。JS与Wasm的数据交互主要依赖内存共享（WebAssembly.Memory）和导出/导入函数，而非直接传递复杂对象。

加载Wasm模块：推荐使用 instantiateStreaming

若Wasm文件以 .wasm 二进制形式部署（MIME类型 application/wasm），instantiateStreaming 最高效，支持流式解析，避免完整下载后再编译：

async function loadAndRun() {
  const response = await fetch('module.wasm');
  const { instance } = await WebAssembly.instantiateStreaming(response);
  return instance;
}

注意：确保服务器正确返回 Content-Type: application/wasm，否则会回退到低效的 instantiate + arrayBuffer 方式。

JS调用Wasm导出函数：直接访问 exports 对象

Wasm模块编译后，其导出的函数、变量、内存等都挂载在 instance.exports 上。例如，一个导出加法函数 add(a, b) 的模块：

arcgis-js

提供 ArcGIS Maps SDK for JavaScript 开发辅助，涵盖 2D/3D 地图视图、图层管理、数据可视化、空间分析等功能模块的参考和示例指导。

下载

const { instance } = await WebAssembly.instantiateStreaming(fetch('math.wasm'));
const result = instance.exports.add(3, 5); // 返回 8

参数和返回值仅支持基本数值类型（i32, i64, f32, f64）
字符串、数组等需手动在共享内存中读写（见下一条）
导出函数本质是同步调用，无Promise包装

在JS与Wasm间传递字符串和数组：操作共享线性内存

Wasm默认只有一块可读写的线性内存（WebAssembly.Memory），JS和Wasm通过同一段 ArrayBuffer 交换数据：

// 假设 Wasm 模块导出了 memory 和一个写入字符串的函数 writeString
const { instance } = await WebAssembly.instantiateStreaming(fetch('string.wasm'));
const memory = instance.exports.memory;
const heap = new Uint8Array(memory.buffer);

// JS向Wasm内存写入字符串（UTF-8编码）
function writeToWasm(str) {
  const encoder = new TextEncoder();
  const bytes = encoder.encode(str);
  const ptr = instance.exports.alloc(bytes.length); // Wasm中分配足够空间
  heap.set(bytes, ptr);
  return ptr;
}

// JS从Wasm内存读取字符串
function readFromWasm(ptr, len) {
  const bytes = heap.slice(ptr, ptr + len);
  const decoder = new TextDecoder();
  return decoder.decode(bytes);
}

Wasm需提供内存分配函数（如 alloc(size)）或约定内存布局（如固定偏移）
JS侧用 TextEncoder/TextDecoder 处理UTF-8字符串，避免字节错位
数组同理：JS将 Float32Array 写入内存，Wasm按对应指针+长度读取

Wasm调用JS函数：通过 import 机制传入回调

可在实例化时向Wasm导入JS函数，供Wasm内部调用（常用于日志、I/O、DOM操作等无法在Wasm中直接完成的任务）：

const importObj = {
  env: {
    console_log: (ptr, len) => {
      const bytes = new Uint8Array(memory.buffer, ptr, len);
      const str = new TextDecoder().decode(bytes);
      console.log('[Wasm]', str);
    }
  }
};

const { instance } = await WebAssembly.instantiateStreaming(
  fetch('logger.wasm'),
  importObj
);