javascript - 如何判断 HTML5 Canvas 性能缓慢的原因？

Question

我如何判断 Canvas 的缓慢性能是由绘图本身引起的，还是由计算应该绘制什么以及在哪里绘制的底层逻辑引起的？

我的问题的第二部分是:如何计算 Canvas fps？这就是我的做法，对我来说似乎合乎逻辑，但我也可能完全错了。这是正确的做法吗？

var fps = 0;  
setInterval(draw, 1000/30);  
setInterval(checkFps, 1000);  

function draw() {  
   //...  
   fps++;  
}  

function checkFps() {  
   $("#fps").html(fps);  
   fps = 0;  
}

编辑:根据 Nathan 的评论，我将上面的内容替换为以下内容:

var lastTimeStamp = new Date().getTime();  
function draw() {  
    //...  
    var now = new Date().getTime();  
    $("#fps").html(Math.floor(1000/(now - lastTimeStamp)));  
    lastTimeStamp = now;  
}

那么这个怎么样？您也可以仅计算自上次更新以来的毫秒差异，也可以通过这种方式看到性能差异。顺便说一下，我还对两者进行了并排比较，它们通常几乎一起移动(最多相差 2)，但是，当性能非常低时，后者的尖峰更大。

Answer 1

你的FPS代码肯定是错的

setInterval(checkFps, 1000);  

没有人保证这个函数会准确地每秒被调用一次(它可能超过 1000 毫秒，或更少 - 但可能更多)，所以

function checkFps() {  
   $("#fps").html(fps);  
   fps = 0;  
}

是错误的(如果此时 fps 为 32，则可能在 1.5 秒内有 32 帧(极端情况))

更好的方法是查看自上次更新以来的实时时间并计算实时时间/帧(我确定 javascript 具有获取时间的功能，但我不确定它是否足够准确 = ms或更好)

顺便说一句，fps 不是一个好名字，它包含帧数(自上次更新以来)，而不是每秒的帧数，因此 frames 是一个更好的名字。

同样的道理

setInterval(draw, 1000/30);

是错误的，因为你想达到 30 的 FPS，但由于 setInterval 不是很准确(并且可能等待的时间比你说的要长，即使 CPU 能够处理负载)