javascript - 如果缓冲区大小大于 4KB，则 WebAssembly.Compile 在主线程上是不允许的

Question

我正在尝试一个简单的 hello world WebAssembly 示例，但我无法理解我在 Chrome 59 中看到的错误:

RangeError: WebAssembly.Compile is disallowed on the main thread, if the buffer size is larger than 4KB. Use WebAssembly.compile, or compile on a worker thread.

src/wasm/counter.wasm:13
  10 | let wa;
  11 | const make = source => {
  12 |   // buffer should already be set
> 13 |   return wa = new Module(buffer);
  14 | };
  15 | 
  16 | const WebAssemblyModule = function(deps = {

我已按照 this tutorial 中的步骤进行操作，而且我可以毫无错误地构建所有内容。我正在使用 create-react-app rewired with wasm-loader .

如果我使用我本地构建的计数器模块，我会收到开头提到的错误。如果我尝试使用预构建版本(例如 in this project )，它工作正常。

当我构建我的模块时，我使用的是教程中指定的相同命令。具有工作模块的项目在其自述文件中列出了相同的命令:

emcc counter.c -O1 -o counter.wasm -s WASM=1 -s SIDE_MODULE=1

知道可能导致错误的原因吗？

Answer 1

一些浏览器限制了可以同步编译的模块的大小，因为这会阻塞主线程。正如错误消息所说，他们宁愿您使用 WebAssembly.compile 返回 promise .我建议您更进一步，使用 WebAssembly.instantiate，它可以异步编译和实例化，在某些情况下，还可以生成更高性能的代码。参见 its documentation ，签名是:

Promise<WebAssemblyInstantiatedSource>
  instantiate(BufferSource bytes [, importObject])

bytes 是您传递给上面 Module 的缓冲区，而 importObject 是您传递给 的相同内容>实例。

---

另一种选择是使您的 .wasm 文件更小。这非常脆弱，因为主线程大小限制是任意的，您无法真正控制生成代码的大小。您可以尝试使用-O2 或-Os 进行编译，然后您可以运行binaryen。的优化器试图减小尺寸。您还可以将代码拆分为多个较小的模块，分别编译每个模块，然后将它们动态链接在一起(共享导入/导出，并为所有模块使用相同的内存)。

但同样，这并不是您真正应该依赖的东西，而且您仍在阻塞主线程。

---

另一种选择是将所有代码移动到 WebWorker .您可以根据需要阻止它们，不需要 Promise。