JavaScript与WebAssembly是互补协作关系：JS负责灵活逻辑、DOM操作和生态集成，Wasm专注高性能计算任务；二者同处沙箱，通过明确接口高效交互，共享内存但Wasm不直接操作DOM。
JavaScript 和 WebAssembly（Wasm）不是替代关系，而是互补协作的关系：JS 负责灵活的逻辑、DOM 操作和生态集成，WebAssembly 负责高性能计算密集型任务（比如图像处理、加密、游戏引擎、音视频解码等）。它们运行在同一个沙箱环境里，通过明确的接口高效交互。
WebAssembly 是什么？
WebAssembly 是一种可移植、体积小、加载快的低级字节码格式，设计目标是让高性能语言（如 Rust、C/C++、Go）能安全地在浏览器中运行。它不是为手写设计的，而是编译器的目标产物。Wasm 运行在 JS 引擎提供的“虚拟机”中（如 V8 的 Liftoff/ TurboFan 编译器），与 JS 共享内存空间，但不直接操作 DOM 或调用浏览器 API。
JS 如何加载并运行 WebAssembly？
现代浏览器原生支持通过 WebAssembly.instantiate() 或 WebAssembly.instantiateStreaming() 加载 .wasm 文件。推荐使用流式加载（支持 HTTP 流式响应，更快）：
- 确保服务器返回正确的 MIME 类型：application/wasm
- 用 fetch() 获取 wasm 字节码，再传给 instantiateStreaming
- 导出的函数会挂载在 instance.exports 上，可直接当 JS 函数调用
示例：
采用HttpClient向服务器端action请求数据，当然调用服务器端方法获取数据并不止这一种。WebService也可以为我们提供所需数据，那么什么是webService呢？，它是一种基于SAOP协议的远程调用标准，通过webservice可以将不同操作系统平台，不同语言，不同技术整合到一起。 实现Android与服务器端数据交互，我们在PC机器java客户端中，需要一些库，比如XFire,Axis2,CXF等等来支持访问WebService，但是这些库并不适合我们资源有限的android手机客户端，
立即学习“Java免费学习笔记（深入）”；
fetch('add.wasm')
.then(response => WebAssembly.instantiateStreaming(response))
.then(result => {
const add = result.instance.exports.add; // 假设 wasm 导出了 add(i32, i32): i32
console.log(add(2, 3)); // 输出 5
});
JS 与 Wasm 如何传递数据？
基本类型（i32/i64/f32/f64）可直接传参/返回；复杂数据（字符串、数组、对象）需借助共享内存（WebAssembly.Memory）和 TypedArray 手动管理内存布局：
- Wasm 模块通常导出一个 memory 实例（或通过 import 导入 JS 创建的 memory）
- JS 用 Uint8Array 或 Int32Array 视图读写该 memory 的指定偏移位置
- 字符串需先转成 UTF-8 字节数组写入 memory，再把起始地址传给 Wasm 函数
- Rust/Wasm 工具链（如 wasm-bindgen）可自动生成 JS 绑定代码，大幅简化字符串/对象交互
常见协作模式与建议
- 把耗时计算（如物理模拟、JSON 解析、滤镜处理）放进 Wasm，JS 只负责触发、传参、取结果、更新 UI
- 避免高频小数据交互（比如每帧传 10 个数字），应批量处理或用 SharedArrayBuffer + Atomics（需跨域 HTTPS）
- 调试优先用源码映射（source map）+ 浏览器 DevTools 的 Wasm 反汇编视图；Rust 推荐搭配 wasm-pack 和 wasm-bindgen
- 不依赖 Wasm 就能实现的功能（如简单表单验证），别为了“新技术”而强行使用
基本上就这些。用对地方，Wasm 是 JS 生态的强力加速器，而不是另一个要从头学起的编程环境。
