Question

如何判断画布的缓慢性能是由绘图本身引起的，还是计算应绘制内容的基础逻辑以及在何处？

我的问题的第二部分是：如何计算画布fps？这就是我做到的，对我而言似乎合情合理，但我也绝对错了。这是正确的方法吗？

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

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

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

修改根据内森的评论，我用以下内容替换了以上内容：

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

那这个怎么样？您还可以仅计算自上次更新以来的毫秒差异，也可以看到性能差异。顺便说一句，我也对这两者进行了并排比较，他们通常会一起移动（最多差异为2），但是，当性能非常低时，后者会出现更大的峰值。 / p>

Answer 1

您的FPS代码绝对错误

setInterval(checkFps, 1000);

没有人保证这个功能每秒都会被调用（它可能超过1000毫秒，或更少 - 但可能更多），所以

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

错误（如果fps在那时是32，你有可能在1.5秒内有32帧（极端情况））

beter是要查看自上次更新以来的实际时间是多少，并计算实时通过/帧（我确定javascript有时间来获取时间，但我不确定它是否足够准确= ms或更好）

fps是btw不是一个好名字，它包含帧数（自上次更新以来），而不是每秒的帧数，因此帧将是一个更好的名称。

以同样的方式

setInterval(draw, 1000/30);

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

Answer 2

Webkit和Firebug都提供了分析工具，以查看在javascript代码中花费的CPU周期。我建议从那里开始。

对于FPS计算，我认为您的代码不会起作用，但我没有任何好的建议：（

原因是：大多数（所有？）浏览器使用专用线程运行javascript，使用不同的线程运行UI更新。如果Javascript线程忙，则不会触发UI线程。

所以，你可以运行一些javascript循环代码，它会'连续'更新“UI 1000次（例如，设置一些文本的颜色） - 但除非你添加一个setTimeout以允许UI线程绘制更改，在1000次迭代完成之前，您不会看到任何更改。

那就是说，我不知道你是否可以在draw（）例程结束时断言增加你的fps计数器。当然，你的javascript函数已经完成，但浏览器实际上是否画了？

Answer 3

检查您是否使用某种innerHTML方法来调试项目。这可能会以您无法想象的方式减慢您的项目速度，特别是如果您执行某些连接，例如innerHTML + = newDebugValues;

或者像desau所说，用firebug或webkit内部调试器来描述你的cpu使用情况。

如何判断导致HTML5 Canvas性能下降的原因是什么？

3 个答案: