Android Chrome runs requestAnimationFrame at 60FPS but renders at 30FPS

Question

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:

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?

Answer 1

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.