画布和请求动画帧的CPU使用率很高

问题描述：

我在递归调用时面临高CPU使用率（30％到40％），有没有人有很好的策略来降低它？画布和请求动画帧的CPU使用率很高

简单的例子：

var canvas = document.createElement('canvas'); 
 
canvas.width = 100; 
 
canvas.height = 20; 
 

 
var canvasContext = canvas.getContext('2d'); 
 
document.body.appendChild(canvas) 
 

 
var rafId; 
 
function drawLoop(time) { 
 
    canvasContext.clearRect(0, 0, 100, 20); 
 
    canvasContext.fillRect(0, 0, Math.random() * 100 * 1.4, 20); 
 
    rafID = window.requestAnimationFrame(drawLoop); 
 
} 
 

 
drawLoop();

requestAnimationFrame（）被_supposed_以尽可能快的速度运行，因此使用了大量的CPU。如果您需要更少的更新，请使用定时器来定位合理的FPS速率。 – dandavis 2015-02-08 03:54:32

@dandavis：据我所知'requestAnimationFrame（）'通常限制在60 FPS而不是“尽可能快”：https：//developer.mozilla.org/en-US/docs/Web/API/window .requestAnimationFrame - 具有60 FPS或更多，你应该有足够的时间去更新'

@Laurent - 尝试不同的浏览器和设备。您的绘图代码非常简单，只有在非常弱的计算机上才能使用，除非存在某些问题（无硬件加速等） – 2015-02-08 04:31:03

答

我不能让这个例子做任何事情来我的CPU也罢，但我还是设法通过采用这两种方法得到它下来。我的CPU以大约4-5％的速度运行你的代码片段，在削减2％的上下文上运行保存/恢复。确保原因 - 因为我们没有进行任何转换。后者的例子只是使用通过重置canvas.width这样的老黑客的方式 - 这湿巾整个画布上下文中的每个时间 - 并且应该更贵 - 但它得到这个例子下降到1.4％

var canvas = document.createElement('canvas'); 
 
canvas.width = 100; 
 
canvas.height = 20; 
 

 
var canvasContext = canvas.getContext('2d'); 
 
document.body.appendChild(canvas) 
 

 
var rafId; 
 
function drawLoop(time) { 
 
    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();

var canvas = document.createElement('canvas'); 
 
canvas.width = 100; 
 
canvas.height = 20; 
 

 
var canvasContext = canvas.getContext('2d'); 
 
document.body.appendChild(canvas) 
 

 
var rafId; 
 
function drawLoop(time) { 
 
    canvas.width = canvas.width; 
 
    canvasContext.fillRect(0, 0, Math.random() * 100 * 1.4, 20); 
 
    rafID = window.requestAnimationFrame(drawLoop); 
 
} 
 

 
drawLoop();

现在我需要进入更高性能的探索，找出原因，或者如果它实际上做任何事情。

但是，您可以使用不同的绘图技术，例如将精灵或面具来回移动到某些位图数据上，这会使渲染器难以处理。我不会在这里发表，因为它超出了这个问题的范围。

画布和请求动画帧的CPU使用率很高

相关推荐