javascript - requestAnimationFrame 的目的是什么？重绘时间没有任何区别

Question

我有很多 Canvas (大约 200 张)需要预渲染。当浏览器呈现它们时，页面的其他部分不会在更改期间重新绘制(例如进度条)，因此页面有很多不稳定的更新/动画。我尝试通过 window.requestAnimationFrame 调用 Canvas 绘图但这并没有改善它。

我如何强制它更频繁地重绘？

动画帧使用示例

//This is done  200 times (once for each canvas)
function draw()
{
    //Draw the image to canvas
    context.drawImage( ... );
}

requestAnimationFrame( draw );

Answer 1

rAF 只能请求一个新帧(与监视器同步)——不能保证一定能得到。

如果您的代码使用的时间超过可用时间预算(对于 60 Hz 系统大约需要 16.7 毫秒)，如果您更新 200 个 Canvas ，则很可能会出现这种情况，您将无法获得下一帧，直到下一帧可用。

如果您的代码使用了很多时间，这在未来可能会有很多帧，并且动画会出现“不稳定”。

在这些情况下，使用 setInterval 和 f.ex 降低帧率可能更好。 1000/15 的延迟，只是忍受它不会不时更新监视器同步。

更新200张 Canvas ，也就是说更新的区域也是正常 Canvas 大小的200倍。此外，浏览器必须维护 200 个元素的重绘，而不仅仅是一个。在 JavaScript 中你只能做这么多..