Javascript canvas和requestAnimationFrame的高CPU使用率

递归调用

requestAnimationFrame

时，我面临着高CPU使用率（30%到40%），有人有好的策略降低它吗

简单的例子：

var canvas=document.createElement（'canvas'）；
画布宽度=100；
高度=20；
var canvasContext=canvas.getContext（'2d'）；
document.body.appendChild（画布）
var rafId；
函数drawLoop（时间）{
canvasContext.clearRect（0,0,100,20）；
canvasContext.fillRect（0,0，Math.random（）*100*1.4,20）；
rafID=window.requestAnimationFrame（drawLoop）；
}
drawLoop（）我无法让这个示例对我的CPU做任何值得一提的事情，但我确实通过使用这两种方法成功地将其放下。我的CPU大约以4-5%的速度运行您的代码段，在上下文上运行save/restore，这将减少2%。不确定原因-因为我们没有进行任何转换。后一个例子只是使用老黑客的方法，通过重置canvas.width来实现这一点——每次都会擦除整个canvas上下文——应该更昂贵——但是它将这个例子降低到了1.4%


var canvas=document.createElement（'canvas'）；
画布宽度=100；
高度=20；
var canvasContext=canvas.getContext（'2d'）；
document.body.appendChild（画布）
var rafId；
函数drawLoop（时间）{
canvasContext.save（）；
canvasContext.clearRect（0,0,100,20）；
canvasContext.fillRect（0,0，Math.random（）*100*1.4,20）；
canvasContext.restore（）；
rafID=window.requestAnimationFrame（drawLoop）；
}
drawLoop（）
requestAnimationFrame（）应该尽可能快地运行，因此会占用大量CPU。如果您需要更少的更新，请使用计时器以合理的FPS速率为目标。@dandavis：据我所知，
requestAnimationFrame（）
通常限制为60 FPS，而不是“尽可能快”：-每秒60帧或以上，您应该有足够的时间在
上进行少量更新，而不会达到最大速度CPU@Laurent-尝试不同的浏览器和设备。您的绘图代码非常简单，除非出现一些问题（没有硬件加速等），否则它只能压倒非常弱的计算机。我的2美分：对于现代设备，您的资源使用率有点高。但是，一个旧的单核、无GPU、低内存、系统+浏览器开销再加上rAF的移动设备可能会带来这么多。有趣的是，我看到一些较弱的移动设备被html画布压垮了——但不是用你所展示的简单代码。@Mikkoohtama：是的，这一点很好。我的意思是尽可能快的设备可以去，如果刷新率是60，是60。我本可以说得更清楚，但如果CPU被淹没，那么OP不太可能每秒实际看到60次更新，而大约20帧的调度会降低CPU使用率。。。好了，没有办法自己调整皇家空军的“目标FPS”。