2

I am building a game with JS and I was testing it on Android Chrome and noticed that it is not working smooth, I could see stutters. Then, I set out to fix the performance problems thinking that my code is not optimized.

I started debugging the game using Chrome's built-in FPS meter and noticed that it was rendering at 30 FPS. Then, I started commenting parts of the game until I could get it to 60 FPS but couldn't. At the end, I was left with this code:

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'red';

var loop = function() {
  ctx.fillRect(0, 0, 10, 10);
  console.log(new Date().getSeconds());
  
  requestAnimationFrame(loop);
}
loop();

requestAnimationFrame calling an almost empty function, but still rendering at 30 FPS. But loop function was called 60 times per second. Here is the screenshot showing both: enter image description here

You can also test yourself here: https://replit.com/@laltin/DearAmusingPackages

My question is why is there a difference between number of requestAnimationFrame calls and number of renders and how can I make it render at 60FPS?

laltin
  • 1,134
  • 12
  • 20
  • I don't reproduce your problem: [Image](https://imgur.com/a/W2JH4g4) – Guerric P Aug 26 '21 at 09:59
  • 1
    @GuerricP seems like you are tyring on desktop though? Is it android chrome? – laltin Aug 30 '21 at 06:11
  • No indeed, it's Edge chromium I've read your question too fast – Guerric P Aug 30 '21 at 06:33
  • yeah, I don't have the issue on desktop either – laltin Aug 31 '21 at 07:51
  • 1
    Could it be because of the device? or because of something like targetFramerate in unity? – Orion Cygnus Aug 31 '21 at 11:38
  • @OrionCygnus that was my first thought. but then why would `requestAnimationFrame` will be called more than target frame rate. – laltin Sep 01 '21 at 20:17
  • also enabled developer tools and checked screen refresh rate. while all this is happening screen was refreshing at 60 fps. so `requestAnimationFrame` runs at 60 times/s, screen refreshes at 60fps but chrome for some reason renders at 30fps – laltin Sep 01 '21 at 20:18

1 Answers1

0

Per the MDN docs here:

The number of callbacks is usually 60 times per second, but will generally match the display refresh rate in most web browsers as per W3C recommendation

So the callback may be fired around 60 times per second, but the actual screen updates at a different rate. Determining the reason for the actual refresh rate of the android device seems to be a bit of a rabbit hole. There's the spec of the device and probably a bunch of other things that impact the FPS.

jrasm91
  • 394
  • 2
  • 10
  • this is how I interpret the quote MDN docs: yes, callback is usually called at 60 times/s. but it matches display refresh rate, i.e. if display is updating at 30fps, callback is called at 30fps. – laltin Sep 01 '21 at 20:21
  • @laltin ah, yes - you are probably right. – jrasm91 Sep 13 '21 at 17:58