javascript - 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 做任何值得一提的事情，但我确实通过使用这两种方法设法解决了它。通过在减少了 2% 的上下文上运行保存/恢复，我的 CPU 在运行您的代码段时运行了大约 4-5%。不确定为什么 - 因为我们没有进行任何转换。后一个示例只是使用老黑客方法通过重置 canvas.width 来执行此操作 - 这每次都会删除整个 Canvas 上下文 - 并且应该更昂贵 - 然而它将这个示例降低到 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();

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

然而，您可以采用不同的绘图技术，例如在一些位图数据上来回移动 Sprite 或蒙版，这将使渲染器处理起来更容易。我不会在这里发布它，因为它超出了这个问题的范围。