我在递归调用 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();
最佳答案
我无法让这个示例对我的 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 或蒙版,这将使渲染器处理起来更容易。我不会在这里发布它,因为它超出了这个问题的范围。
关于javascript - Canvas 和 requestAnimationFrame 的高 CPU 使用率,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28390358/