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

问题描述：

如何判断画布的缓慢性能是否由绘图本身或计算应绘制的内容逻辑以及在哪里引起的？如何判断导致HTML5 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），然而，当性能非常低时，后者的峰值更大。

答

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

对于FPS计算，我不认为你的代码是去工作，但我没有任何好推荐:(

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

所以，你可以运行一些JavaScript循环代码，它会“更新”UI 1000次（例如，设置某些文本的颜色） - 但除非添加setTimeout以允许UI线程绘制更改，否则直到1000次迭代完成后才会看到任何更改。

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

答

你的FPS代码肯定是不对的

setInterval(checkFps, 1000);

没有人保证这个函数将被调用恰好每秒（它可能比1000ms的更多或更少 - 但可能更多），所以

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

是错误的（如果FPS是在那一刻有可能是你有32帧的1.5秒（极端情况下）32）

尤为明显是看到什么是自上次更新实时传递并计算实时通过/帧（我相信JavaScript有功能来获得时间，但我不知道它是否会足够准确=毫秒或更好）

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

以同样的方式

setInterval(draw, 1000/30);

是错误的，因为你要达到30 FPS，但是因为setInterval的不是很准确（而且很可能将等待更长的时间比你说的，你会即使CPU能够处理负载，结果也是较低的FPS）

答

检查是否不使用某些innerHTML方法来调试您的项目。这可能会以你无法想象的方式减慢你的项目，尤其是如果你像这样进行一些连接innerHTML + = newDebugValues;

或者像desau说的那样，用萤火虫或webkit内部调试器来分析你的cpu使用情况。

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

相关推荐