如何分辨是什么导致慢HTML5画布性能?

我怎样才能知道,如果在画布的性能下降是由于图纸本身,还是背后的逻辑是什么计算应制订和在哪里?

我的问题的第二部分是:如何计算帆布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至多差),但后者有更大的峰值,当时表现得非常低。

--------------解决方案-------------

你的FPS代码肯定是不对的

setInterval(checkFps, 1000);

没有人保证这个函数将会被调用完全每一秒(也可能是超过1000毫秒,或更少 - 但可能更多),所以

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

是错误的(如果FPS为32的那一刻,它可能是你有32帧的1.5秒​​(极端情况下))

尤为明显的是看什么是真正的时间的推移自上次更新并计算realtimepassed /帧(我敢肯定,JavaScript有函数获取的时间,但我不知道这是否是足够精确=毫秒或更好)

FPS是顺便说一句不好听的名字,它包含的帧数(自上次更新),每秒帧数的不是数字,因此帧会是一个更好的名字。

以同样的方式

setInterval(draw, 1000/30);

是错误的,因为你要达到30 FPS,但由于setInterval的不是很准确(而且很可能会等待更长的时间比你说的,你最终会以较低的FPS即使CPU能够处理的负载)

WebKit和Firebug的都提供分析工具,看看CPU周期被用在你的JavaScript代码。 我建议你​​开始在那里。

对于FPS计算,我不认为你的代码是去工作,但我没有什么好的建议:(

原因是:大多数(?所有)浏览器使用一个专用的线程来运行JavaScript和不同的线程运行的UI更新。 如果使用Javascript线程繁忙,UI线程不会被触发。

所以,你可以运行一些javascript循环代码,将“更新”的UI 1000次连续(例如,设置一些文本的颜色) - 但除非你添加的setTimeout让UI线程作画的变化,你不会看到,直到1000次迭代完成任何更改。

话虽如此,我不知道你是否能自信地增加你的FPS柜台抽奖()程序结束。 当然,你的JavaScript函数完成,但没有浏览器的实际绘制?

检查如果你不使用一些innerHTML的方法来调试您的项目。 这可以在某种程度上你无法想象减缓你的项目,特别是如果你做一些串联这样的innerHTML + = newDebugValues​​;

或者像desau说,配置您的CPU使用率与萤火虫或WebKit的内部调试器。

分类:JavaScript的 时间:2015-03-15 人气:0
分享到:

相关文章

Copyright (C) 55228885.com, All Rights Reserved.

55228885 版权所有 京ICP备15002868号

processed in 0.863 (s). 10 q(s)