Question

我在递归调用requestAnimationFrame时面临高CPU使用率（30％到40％），是否有人有降低它的好策略？

简单示例：

＆＃13;

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();

＆＃13;

Answer 1

我无法让这个例子对我的CPU做任何值得一提的事，但我确实设法通过采用这两种方法来降低它。通过在削减2％的情况下运行保存/恢复，我的CPU以大约4-5％的速度运行你的代码片段。确保原因 - 因为我们还没有进行任何转换。后一个例子只是通过重置canvas.width来使用旧的黑客方式来做到这一点 - 每次擦除整个画布上下文 - 并且应该更昂贵 - 但是它将这个例子降低到1.4％

＆＃13;

[6.103515625e+19 = 61035156249999998976, 6.103515625000001e+19 = 61035156250000007168]

＆＃13;

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();

＆＃13;

现在我需要进行更多的性能探索，找出原因，或者它是否真的做了任何事情。

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

canvas和requestAnimationFrame的CPU使用率很高

1 个答案: