如何判断 HTML5 Canvas 性能缓慢的原因是什么？

发布于 2024-09-06 08:05:20 字数 745 浏览 6 评论 0原文

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

我的问题的第二部分是：如何计算画布 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），但是，当性能非常低时，后者有更大的峰值。

原文

How can I tell if the canvas's slow performance is caused by the drawing itself, or the underlying logic that calculates what should be drawn and where?

The second part of my question is: how to calculate canvas fps? Here's how I did it, seems logical to me, but I can be absolutely wrong too. Is this the right way to do it?

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

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

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

Edit:
I replaced the above with the following, according to Nathan's comments:

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

So how's this one? You could also calculate only the difference in ms since the last update, performance differences can be seen that way too. By the way, I also did a side-by-side comparison of the two, and they usually moved pretty much together (a difference of 2 at most), however, the latter one had bigger spikes, when performance was extraordinarily low.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

总攻大人 2024-09-13 08:05:20

你的 FPS 代码绝对是错误的

setInterval(checkFps, 1000);

没有人保证这个函数会每秒被调用一次（它可能超过 1000 毫秒，或更短 - 但可能更多），所以

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

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

更好的是查看自上次更新以来的实时通过量并计算实时通过/帧（我确信 javascript 具有获取时间的功能，但我不确定如果它足够准确=毫秒或更好）

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

同样的方式

setInterval(draw, 1000/30);

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

Your FPS code is definitely wrong

setInterval(checkFps, 1000);

No-one assures this function will be called exactly every second (it could be more than 1000ms, or less - but probably more), so

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

is wrong (if fps is 32 at that moment it is possible that you have 32 frames in 1.5s (extreme case))

beter is to see what was the real time passes since the last update and calculate the realtimepassed / frames (I'm sure javascript has function to get the time, but I'm not sure if it will be accurate enough = ms or better)

fps is btw not a good name, it contains the number of frames (since last update), not the number of frames per second, so frames would be a better name.

In the same way

setInterval(draw, 1000/30);

is wrong, since you want to achieve a FPS of 30, but since the setInterval is not very accurate (and is probably going to wait longer than you say, you will end up with lower FPS even if the CPU is able to handle the load)

回复收藏 0 原文