解释 JavaScript WebAssembly.instantiateStreaming 和 WebAssembly.compileStreaming 的性能优势，以及它们在高效加载 Wasm 模块中的作用。

各位观众老爷，晚上好！我是今晚的主讲人，咱们今儿个聊聊JavaScript加载WebAssembly模块的那些事儿，特别是WebAssembly.instantiateStreaming和WebAssembly.compileStreaming这两位性能大咖。

开场白：Wasm，不仅仅是快那么简单

WebAssembly (Wasm) 的出现，对于前端来说，简直就像是打开了新世界的大门。它不再是 JavaScript 的专属舞台，我们可以用 C/C++, Rust 等等语言编写高性能的代码，然后编译成 Wasm 模块，在浏览器中运行。这不仅提高了性能，也让前端可以利用更多语言的生态和工具。

但是，光有 Wasm 还不行，我们还得把它加载到 JavaScript 中才能用。加载的方式有好几种，今天我们重点聊聊WebAssembly.instantiateStreaming和WebAssembly.compileStreaming，看看它们是怎么在性能上“耍流氓”的。

第一幕：传统加载方式的“慢动作”

在介绍 Streaming 之前，我们先回顾一下传统的加载方式，感受一下“慢动作”。

传统方式通常是先用 fetch 或者 XMLHttpRequest 把 Wasm 文件下载下来，然后把整个文件放到一个 ArrayBuffer 中，最后再用 WebAssembly.Module 编译，并用 WebAssembly.Instance 实例化。

async function loadWasmTraditional(url) {
  try {
    const response = await fetch(url);
    const arrayBuffer = await response.arrayBuffer();
    const module = await WebAssembly.Module(arrayBuffer);
    const instance = await new WebAssembly.Instance(module);
    return instance;
  } catch (error) {
    console.error("加载 Wasm 失败:", error);
  }
}

// 用法
loadWasmTraditional("my_module.wasm")
  .then(instance => {
    // 使用 instance
    console.log("Wasm 模块加载成功!");
  });

这个过程就像是：

下载整个文件： 等待所有的字节都到达你的电脑。
把文件变成一个大数组： 把所有字节塞进 ArrayBuffer 这个容器里。
编译： 把这个大数组交给编译器，让它把二进制代码翻译成机器可以执行的指令。
实例化： 创建一个 Wasm 模块的实例，分配内存，准备好执行。

这种方式的缺点很明显：必须等整个文件下载完成才能开始编译，这就造成了阻塞。如果 Wasm 文件很大，那用户就得耐心等待，体验自然不好。

第二幕：Streaming 的“神速”

WebAssembly.instantiateStreaming 和 WebAssembly.compileStreaming 的出现，就是为了解决这个阻塞问题。它们的核心思想是：边下载边编译。

instantiateStreaming 相当于 compileStreaming + new WebAssembly.Instance，它把编译和实例化两个步骤合并在一起，更方便。

async function loadWasmStreaming(url) {
  try {
    const result = await WebAssembly.instantiateStreaming(fetch(url));
    return result.instance;
  } catch (error) {
    console.error("加载 Wasm 失败:", error);
  }
}

// 用法
loadWasmStreaming("my_module.wasm")
  .then(instance => {
    // 使用 instance
    console.log("Wasm 模块加载成功!");
  });

compileStreaming 只负责编译，不实例化。

async function compileWasmStreaming(url) {
  try {
    const module = await WebAssembly.compileStreaming(fetch(url));
    const instance = new WebAssembly.Instance(module);
    return instance;
  } catch (error) {
    console.error("编译 Wasm 失败:", error);
  }
}

// 用法
compileWasmStreaming("my_module.wasm")
  .then(instance => {
    // 使用 instance
    console.log("Wasm 模块编译成功!");
  });

这两个函数都接受一个 Promise，这个 Promise 必须 resolve 成一个 Response 对象，而这个 Response 对象包含了 Wasm 文件的流数据。fetch(url) 返回的就是这样一个 Promise。

Streaming 的优势在于：

非阻塞： 浏览器可以一边下载 Wasm 文件，一边开始编译。不需要等到整个文件下载完成。
更快的启动速度： 由于编译和下载并行进行，所以 Wasm 模块的启动速度更快。用户可以更快地看到结果，体验更好。

这就像是：

边下载边组装： 不再需要等待所有零件都运到，而是运到一部分就组装一部分。
更快的交付： 最终的成品交付时间自然就缩短了。

第三幕：性能对比，数据说话

光说不练假把式，咱们用数据说话，看看 Streaming 到底比传统方式快多少。

为了公平起见，我们做一个简单的测试：加载一个中等大小的 Wasm 模块（比如几 MB），然后分别用 loadWasmTraditional 和 loadWasmStreaming 加载，记录加载时间。

async function benchmark(url) {
  const startTimeTraditional = performance.now();
  await loadWasmTraditional(url);
  const endTimeTraditional = performance.now();
  const traditionalTime = endTimeTraditional - startTimeTraditional;

  const startTimeStreaming = performance.now();
  await loadWasmStreaming(url);
  const endTimeStreaming = performance.now();
  const streamingTime = endTimeStreaming - startTimeStreaming;

  console.log("传统方式加载时间:", traditionalTime, "ms");
  console.log("Streaming 加载时间:", streamingTime, "ms");

  return { traditionalTime, streamingTime };
}

// 用法
benchmark("my_module.wasm")
  .then(results => {
    console.log("Streaming 速度提升:", (results.traditionalTime - results.streamingTime) / results.traditionalTime * 100, "%");
  });

测试结果可能会因网络状况、机器性能等因素而有所不同，但一般来说，Streaming 方式的加载速度会明显快于传统方式。尤其是在网络延迟较高的情况下，Streaming 的优势更加明显。

第四幕：compileStreaming 和 instantiateStreaming 的选择

既然 Streaming 这么好，那 compileStreaming 和 instantiateStreaming 到底该怎么选呢？

instantiateStreaming： 如果你需要一次性完成编译和实例化，并且不需要对编译后的模块进行额外的处理，那么 instantiateStreaming 是最方便的选择。它就像一个“一键安装”按钮，简单快捷。
compileStreaming： 如果你需要对编译后的模块进行额外的处理，比如缓存、复用、或者与其他模块组合，那么 compileStreaming 更加灵活。它可以让你把编译和实例化分开，更好地控制整个流程。

举个例子，假设你需要加载同一个 Wasm 模块多次，为了避免重复编译，你可以先用 compileStreaming 编译一次，然后把编译后的 Module 对象缓存起来，下次直接用缓存的 Module 对象实例化。

let wasmModuleCache = null;

async function getWasmModule(url) {
  if (wasmModuleCache) {
    console.log("使用缓存的 Wasm 模块");
    return wasmModuleCache;
  } else {
    console.log("编译新的 Wasm 模块");
    wasmModuleCache = await WebAssembly.compileStreaming(fetch(url));
    return wasmModuleCache;
  }
}

async function createWasmInstance(url) {
  const module = await getWasmModule(url);
  const instance = new WebAssembly.Instance(module);
  return instance;
}

// 用法
createWasmInstance("my_module.wasm")
  .then(instance => {
    // 使用 instance
    console.log("Wasm 模块加载成功!");
  });

createWasmInstance("my_module.wasm")
  .then(instance => {
    // 使用 instance
    console.log("Wasm 模块加载成功!"); // 这次会使用缓存
  });

第五幕：一些注意事项

在使用 Streaming 的时候，还有一些需要注意的地方：

MIME 类型： 确保你的服务器返回的 Wasm 文件的 MIME 类型是正确的 (application/wasm)。否则，浏览器可能会拒绝编译。
跨域： 如果你的 Wasm 文件和 HTML 文件不在同一个域名下，你需要配置 CORS (Cross-Origin Resource Sharing)，允许跨域访问。
错误处理： 记得用 try...catch 块包裹你的代码，处理可能出现的错误。
不支持同步： WebAssembly.instantiateStreaming 和 WebAssembly.compileStreaming 都是异步函数，不能同步调用。

总结：Streaming，Wasm 加载的未来

总而言之，WebAssembly.instantiateStreaming 和 WebAssembly.compileStreaming 是加载 Wasm 模块的利器。它们利用流式编译的优势，大大提高了加载速度，改善了用户体验。在大多数情况下，instantiateStreaming 是一个不错的选择，如果你需要更灵活的控制，可以选择 compileStreaming。

选择合适的加载方式，可以让你的 Wasm 应用跑得更快，飞得更高！

一些有用的表格总结

特性	`WebAssembly.instantiateStreaming`	`WebAssembly.compileStreaming`	传统加载方式
是否流式加载	是	是	否
是否异步	是	是	可以异步，也可以同步（不推荐）
功能	编译和实例化	只编译	编译和实例化
灵活性	较低	较高	一般
适用场景	快速加载，无需额外处理	需要对编译后的模块进行处理	兼容性要求高，不追求性能
MIME 类型要求	application/wasm	application/wasm	无特殊要求

性能指标	`WebAssembly.instantiateStreaming`	传统加载方式
首次加载时间	快	慢
后续加载时间	缓存情况下快	缓存情况下快
内存占用	较低	较高
CPU 占用	较低	较高

最后：一点小幽默

想象一下，如果 Wasm 加载是个厨师，那么传统加载方式就像是：厨师先把所有的食材都准备好，切好，洗好，然后才开始炒菜。而 Streaming 就像是：厨师一边洗菜，一边切菜，一边炒菜，效率更高，更快就能上菜！

好了，今天的讲座就到这里。谢谢大家！希望你们对 WebAssembly.instantiateStreaming 和 WebAssembly.compileStreaming 有了更深入的了解。下次加载 Wasm 模块的时候，记得用上它们，让你的应用“嗖”的一下就跑起来！

祝大家编码愉快！

发表回复 取消回复

发表回复取消回复