canvas和requestAnimationFrame的CPU使用率很高

Question

在递归调用时requestAnimationFrame,我面临着高CPU使用率(30%到40%),是否有人有降低它的好策略？

简单的例子:

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

Answer 1

我无法让这个示例对我的 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();

现在我需要进行更多的性能探索以找出原因，或者它是否确实起到了作用。

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