Javascript requestAnimationFrame的目的是什么？这对重新上漆的时间没有任何影响

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

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

如何使用动画帧的示例

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

requestAnimationFrame( draw );

浏览器可以在单个回流和重新绘制循环中同时优化并发动画，从而获得更高的逼真度动画。例如，基于JS的动画与CSS转换或SVG SMIL同步。另外，如果在不可见的选项卡中运行动画循环，浏览器将无法保持其运行，这意味着CPU、GPU和内存使用量将减少，从而延长电池寿命

英国皇家空军只能请求一个新的帧（与监视器同步）-不能保证得到一个

如果您的代码使用的时间超过可用时间预算（60 Hz系统约为16.7ms），这可能是因为您更新了200张画布，那么在下一张可用之前，您将无法获得帧

如果您的代码使用了大量时间，那么将来可能会有很多帧，动画将显示为“急促”

在这些情况下，最好使用

setInterval

和f.ex来降低帧速率。1000/15的延迟，只是生活在它不会更新监视器同步时，不时

---

更新200张画布就是说更新区域也比画布的正常大小大200倍。此外，浏览器必须为200个元素而不是一个元素维护重绘。您只能在JavaScript中执行这么多操作。

我会这样做：

//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帧。如果浏览器或计算机运行缓慢，帧速率将降低。根据我的经验，它确实提高了性能。

我尝试将每个调用放入

setTimeout

（这相当于

setInterval

，并更改了您正在处理的画布），但没有改善。画布和画在画布上的图像都很大，我想可能没有办法加快速度。@DonRhummy我同意你的看法。这对浏览器来说是一个巨大的负担，如果其他人的计算机在硬件方面不太规范，那么对其他人的计算机来说可能会更糟（这会导致很低的FPS）。也许缓冲区方法会有所帮助（当然不知道你到底想做什么）-只在屏幕上显示画布，然后根据滚动等动态维护它们。或者，如果可能，使用单个画布和缓冲区，只向其绘制可见内容。