如何确定是什么原因导致HTML5画布性能缓慢？

Question

我如何确定canvas的缓慢性能是由绘图本身引起的，还是由计算应该在哪里绘制的底层逻辑引起的？

我的第二个问题是：如何计算canvas的帧率？以下是我的方法，对我来说似乎很合理，但我也可能完全错误。这是正确的做法吗？

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），但后者在性能非常低时有更大的波峰。

- Márton Borlay

Answer 1

你的FPS代码肯定是有问题的

setInterval(checkFps, 1000);  

没有人保证这个函数会每秒钟被调用一次（可能超过1000毫秒，或者少于1000毫秒 - 但很可能是更多），因此

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

如果fps为32，则在那一刻可能有32帧在1.5秒内（极端情况下），这是错误的。

更好的方法是查看自上次更新以来实际经过的时间，并计算实际经过的时间/帧数（我确信javascript有获取时间的函数，但我不确定它是否足够准确=毫秒或更好）。

顺便说一句，fps并不是一个好的名称，它包含了帧数（自上次更新以来），而不是每秒帧数，因此帧数是一个更好的名称。

同样地

setInterval(draw, 1000/30);

这是错误的，因为您想要实现30帧每秒的FPS，但由于setInterval不是非常准确（并且可能会等待比您指定的时间更长），即使CPU能够处理负载，您最终也会得到较低的FPS。

- Nathan

Answer 2

Webkit和Firebug都提供了性能分析工具，可以查看JavaScript代码中CPU周期的消耗情况。我建议从这里开始。

至于FPS计算，我不认为你的代码会起作用，但我没有什么好的建议 :(

原因是：大多数（全部？）浏览器都使用专用线程来运行JavaScript和不同的线程来运行UI更新。如果JavaScript线程忙碌，UI线程将不会被触发。

因此，您可以运行一些JavaScript循环代码，连续“更新”UI 1000次（例如，设置某些文本的颜色），但除非您添加setTimeout以允许UI线程绘制更改，否则在完成1000次迭代之前，您将看不到任何更改。

话虽如此，我不知道您是否可以在draw()例程结束时断言增加fps计数器。当然，您的JavaScript函数已经完成，但浏览器是否实际绘制了呢？

- desau

Answer 3

检查一下你是否使用了一些innerHTML方法来调试你的项目。这可能会以你无法想象的方式减慢你的项目速度，特别是如果你像这样进行一些连接 innerHTML += newDebugValues;

或者像desau所说的那样，使用Firebug或Webkit内部调试器来分析你的CPU使用情况。

- 762x51mm