在执行繁重的JavaScript处理时强制HTML5画布重画？

这个问题与我的代码有关，但我想在我开始对代码进行重大更改之前确保我得到了正确的答案

我正在开发一个计算量非常大的JavaScript程序，它需要不断更新HTML5画布中的图像以绘制动画。正如现在编写的，代码以紧密循环的方式绘制动画的所有帧，而不将控制权返回到浏览器，这意味着最终显示的只是最后一帧。我很确定解决这个问题的唯一方法是将动画代码分割成更小的片段，这些片段可以通过超时事件重新调用。这是正确的吗？还是有办法强迫画布在一个特定的点上显示它的内容，即使在一个严格的JavaScript循环的中间？

我很确定解决这个问题的唯一方法是将动画代码分割成更小的片段，这些片段可以通过超时事件重新调用。这是正确的吗

这是正确的

---

Javascript是单线程的，所以在执行逻辑时，不可能发生其他任何事情。您唯一的选择是“模拟”线程，将您的逻辑拆分为微块，在超时时执行。

如果webworkers可用，您可以使用webworkers。只需在webworkers中计算您需要执行的所有操作，并在完成后将结果发回。当你发回邮件时，你只需刷新图像即可。

---

计算将在后台完成，更新图像时页面只会阻塞。

“不将控制权返回浏览器。”简单修复，看看会发生什么。对于Mozilla，您可以使用并反复调用

animationGenerator.next（）

在有

setTimeout

/

setInterval

/

mozRequestAnimationFrame

帮助的函数中。如果可用，您可能应该使用requestAnimationFrame而不是setTimeout/setInterval。您可以在此处找到用于此目的的垫片。好的一面是，它将控制权交还给了浏览器（如果不可见，则无需刷新等）。可能出现的问题是延迟，我不知道传输消息的优先级。将webworker与屏幕外画布结合使用也会有所帮助。您可以在web worker线程上更新屏幕外画布，定期回调主线程，然后调用

ctx.drawImage（offScreenCanvas，0,0，高度，宽度）