以Web程序集为主循环和javascript回调的Web worker

Question

我正在移植一个生成要显示的图形框架的应用程序。按照生活游戏的方式思考。主循环是深层嵌套的，我将C程序编译为一个webassembly。在C程序中，我使用EM_ASM这样对JavaScript进行回调：

    EM_ASM({
        SysDrawMap($0, $1, $2);
    }, (int)Used.MapWidth, (int)Used.MapHeight, imagedata);

这有效。我得到了框架并可以渲染它。问题是，这阻塞了主线程，因此我永远都看不到结果，并且浏览器在仿真结束之前就被锁定了。

因此，我将代码移至Web Worker，并让其加载C程序，并使用postMessage队列系统将图像发布到主线程。在主线程上，我收到了图像并更新了画布。这种工作。问题是，工作者创建帧的速度过快，并在队列中填充了图像（占用大量内存），并且主线程在尝试接收图像时停滞了。

因此，我必须以某种方式限制生产方，但不能以导致过多减速的方式进行。我正在考虑5-10帧队列缓冲区，但是如何在不重写主循环的情况下做到这一点？

在工作程序中，当将图像发布到队列中时，它无法接收消息，因为控制权直接返回到C程序，并且在工作时，工作程序仍不会接收消息。

我什至无法做出暂停按钮，因为Web程序集全速运行，而对队列中的消息一无所知。而且似乎没有办法检查队列中和任一侧的消息数。

[我担心我唯一的解决方案是重写C程序深度嵌套的循环，这样我可以从javascript调用到Web程序集并生成1帧。但这会解决吗？我将无休止地在while循环中调用webassembly，这也将阻止接收新消息。在Web程序集运行之前，不会有任何空闲时间。

Answer 1

潜在的问题是，您的仿真代码执行和输出帧的速度远远快于浏览器渲染帧的速度（以及计算机屏幕的渲染速度）。移动模拟代码不是解决此问题的方法。

您需要重新考虑模拟的运行方式。您应该更新代码，以使其导出“ tick”函数，该函数在执行时会在模拟中生成下一帧。

浏览器公开了一个requestAnimationFrame API，该API在每次重绘之前都会被调用。这使您可以同步到显示。您可以使用它来执行“ tick”功能并将输出呈现到屏幕上。