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?