Artech ·

WebAssembly核心编程[1]:wasm模块实例化的N种方式 - Artech

💡 原文中文，约4400字，阅读约需11分钟。

📝

内容提要

本文介绍了WebAssembly模块的实例化过程，包括使用WebAssembly.Module和WebAssembly.Instance对象加载wasm模块并调用导出函数的方法。示例代码展示了如何通过fetch和XMLHttpRequest下载wasm文件，并实现绝对值计算功能。同时，介绍了WebAssembly.instantiate和WebAssembly.instantiateStreaming等异步方法的使用。

🔎

延伸解读

同步与异步实例化的选择

文章展示了同步和异步两种实例化方式。同步方式通过new WebAssembly.Instance直接创建实例，会阻塞主线程，适合模块小或已提前加载的场景。异步方式如WebAssembly.instantiate返回Promise，不阻塞主线程，适合网络加载或大模块。开发者应根据性能需求和代码结构选择，避免在UI敏感操作中使用同步实例化。

加载wasm模块的多种途径

文章介绍了使用fetch和XMLHttpRequest下载wasm文件。fetch是现代推荐方式，支持Promise和流式处理；XMLHttpRequest兼容性更好，但代码更冗长。无论哪种方式，都需要将响应转换为ArrayBuffer，再用于创建模块或实例。选择时需考虑浏览器兼容性和项目技术栈。

instantiateStreaming的便捷与限制

WebAssembly.instantiateStreaming提供了一步到位的方式，直接传入fetch返回的Response对象，简化了代码。但它要求服务器返回正确的MIME类型（application/wasm），否则会失败。此外，它只能用于流式响应，不适用于已获取的字节内容。在兼容性要求高的场景中，可能需要回退到其他方法。

❓

Q&A

WebAssembly模块的实例化过程是怎样的？

WebAssembly模块的实例化过程包括加载wasm模块和创建WebAssembly.Instance对象，最终通过该对象调用导出函数。

如何使用fetch下载wasm文件并创建模块实例？

可以使用fetch函数下载wasm文件，然后将下载的字节内容传入WebAssembly.Module构造函数，接着创建WebAssembly.Instance对象。

WebAssembly.instantiate和WebAssembly.instantiateStreaming有什么区别？

WebAssembly.instantiate需要先下载wasm文件的字节内容，而WebAssembly.instantiateStreaming可以直接使用Promise<Response>对象来下载和实例化wasm模块，提供了更简便的方式。

可以使用哪些方法加载wasm模块文件？

可以使用fetch函数和XMLHttpRequest对象来加载wasm模块文件。

如何通过字节内容创建WebAssembly模块实例？

可以使用WebAssembly.instantiate静态方法，将字节内容作为参数传入，返回的Promise对象中包含了创建的wasm模块实例。

在WebAssembly中如何调用导出函数？

在创建WebAssembly.Instance对象后，可以通过该对象的exports属性访问并调用导出的函数。

🏷️