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

【问题标题】：What is the purpose of requestAnimationFrame? It is not making any difference in repaint timesrequestAnimationFrame 的目的是什么？重绘时间没有任何区别
【发布时间】：2013-10-26 09:51:02
【问题描述】：

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

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

如何使用动画帧的示例

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

requestAnimationFrame( draw );

【问题讨论】：

标签： javascript html animation canvas html5-canvas

【解决方案1】：

我会这样：

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

function loop()
{
    draw();
    requestAnimationFrame( loop );
}

loop();

这样您可以创建无限循环，浏览器将其限制为每秒最多 60 帧。如果浏览器或计算机速度慢，帧率会降低。根据我的经验，它确实提高了性能。

【讨论】：

【解决方案2】：

rAF 只能请求一个新帧（与监视器同步） - 不能保证一定能得到一个。

如果您的代码使用的时间预算超过了可用的时间预算（对于 60 Hz 系统，大约需要 16.7 毫秒），如果您更新 200 个画布，这很可能，在下一个可用之前，您将无法获得一帧。

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

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

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

【讨论】：

我尝试将每个调用放入 setTimeout 的（相当于 setInterval 并更改您正在处理的画布），但它没有改善。画布很大，上面绘制的图像也很大，我认为可能没有办法加快速度。
@DonRhummy 我同意你的看法。这对浏览器来说是一个巨大的负载，如果其他人的计算机在硬件方面的规格较少（这会导致 FPS 非常低），那么在其他人的计算机上可能会更糟。也许缓冲方法可以提供帮助（当然不知道你到底想做什么）——只有在屏幕上可见的画布，然后根据滚动等动态维护它们。或者如果可能的话，只使用单个画布和缓冲区绘制可见的内容。

【解决方案3】：

http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/

浏览器可以将并发动画一起优化为单个重排和重绘循环，从而获得更高保真度的动画。例如，与 CSS 过渡或 SVG SMIL 同步的基于 JS 的动画。此外，如果您在不可见的选项卡中运行动画循环，浏览器将不会继续运行，这意味着更少的 CPU、GPU 和内存使用量，从而延长电池寿命。

【讨论】：