html实现WASM WebAssembly页面_html WebAssembly wasm模块加载运行-html教程-PHP中文网

应优先使用webassembly.instantiatestreaming(fetch('module.wasm'))加载，需确保服务器返回content-type: application/wasm；若用instantiate()，须先fetch得arraybuffer再传入，且手动提供imports（如env.memory）以避免崩溃。

html实现wasm webassembly页面_html webassembly wasm模块加载运行

如何用 JavaScript 正确加载并实例化一个 .wasm 文件

直接用 fetch() 拿到二进制再传给 WebAssembly.instantiate() 是最常见也最容易出错的方式。浏览器对 .wasm 响应的 MIME 类型、模块是否为“带签名的 wasm”、是否启用 Streaming 都有强约束。

必须确保服务器返回 Content-Type: application/wasm，否则 Chrome/Firefox 会静默拒绝（不报错但 instantiate() 失败）
推荐用 WebAssembly.instantiateStreaming() 替代 fetch().then(r => r.arrayBuffer()).then(...)，它能流式解析、更快启动、且自动校验 header
如果 wasm 文件是通过 Emscripten 生成的“standalone”模块（无 JS glue），需手动提供 imports 对象，至少包含 { env: { memory: new WebAssembly.Memory({ initial: 256 }) } }
遇到 CompileError: WebAssembly.instantiate(): expected magic word 00 61 73 6d，基本是文件被当文本加载了（比如服务器返回了 text/plain 或文件路径写错导致 404 返回 HTML）

为什么 Emscripten 生成的 wasm 不能直接 `instantiate()` 而要配 JS glue

Emscripten 默认输出的是“非纯 wasm”，它依赖配套的 JS 运行时：处理内存增长、字符串转换、malloc/free、甚至 console.log 重定向。强行跳过 glue JS，会立刻在调用导出函数时因缺少 __indirect_function_table 或未初始化 memory 而崩溃。

若你用 emrun build/hello.wasm 跑通了，但自己写 JS 加载失败，大概率是没加载对应 hello.js（或 hello.wasm 被单独提取后丢失了 runtime 逻辑）
想纯 wasm？加编译参数：emcc hello.c -o hello.wasm -O3 --standalone-wasm，此时不再生成 JS，但所有 I/O、堆管理都得你自己用 import 注入
Module.onRuntimeInitialized 这类钩子只存在于 Emscripten 的 glue JS 中，原生 WebAssembly.instantiate() 没有等价机制

如何从 wasm 导出函数并安全调用（尤其含指针/字符串参数）

wasm 没有原生字符串类型，所有字符串都靠“内存偏移 + 长度”传递。Emscripten 会帮你做转换，但手写 wasm 或用 Rust/WASI 编译时，这一步必须自己桥接。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

导出函数如 add(int a, int b) 可直接调用：instance.exports.add(3, 4)
若导出 say_hello(ptr: i32) -> i32，需先用 instance.exports.memory.buffer 构造 Uint8Array，把 JS 字符串转成 UTF-8 写入指定位置，再把起始地址传过去
Rust 编译的 wasm 默认使用 wasm-bindgen，它生成的 JS 绑定层已封装好字符串桥接，但最终仍会调用 __wbindgen_string_new 等内部函数——这些不是标准 API，别在非 wasm-bindgen 环境里硬调
调用后若返回指针值，别直接当 JS 字符串用；要用 TextDecoder.decode() 从内存中读取，且注意 null terminator 和长度边界，否则越界读会静默失败

本地开发时 `file://` 协议下 wasm 加载失败怎么办

Chrome 和 Firefox 在 file:// 下默认禁用 WebAssembly.instantiateStreaming()（因为无法设置 MIME），且多数本地服务器（如 Python http.server）不发 application/wasm，导致白屏无报错。

最快验证方式：用 npx serve 或 python3 -m http.server 8000 启服务，确保 wasm 文件路径可直连（如 http://localhost:8000/main.wasm）
若坚持用 file://，只能退回到非 streaming 方式：fetch('main.wasm').then(r => r.arrayBuffer()).then(bytes => WebAssembly.instantiate(bytes))，但失去流式优势且无法校验 header
VS Code 安装 “Live Server” 插件，右键 HTML 文件选 “Open with Live Server”，它会自动设对 MIME 并支持 CORS

真正难的不是加载，而是内存生命周期和错误边界的控制——比如 C 函数里 free() 了某块内存，JS 层还拿着旧指针去读，这时候不会报错，只会读到随机字节。