I was staring at my screen and had a sudden random thought: is this thing actually running at the refresh rate it claims to be?

Obviously, there are tools like testufo.com that can be used to test this, but the nerd in me wanted to create something of my own.

The idea is pretty simple. Since requestAnimationFrame aims to sync with the display’s refresh rate, I can simply count how many times it fires in one second.

Since I’m already writing this down, I wrapped that logic into a live component so you can test your screen right here:

Try this: Switch to a different tab for a few seconds and come back. You’ll likely see the rate drop significantly before recovering. That’s the browser throttling background animations to save energy.

Here’s the raw vanilla JS snippet:

const startTime = performance.now();
let lastLogTime = performance.now();
let animationCount = 0;

const updateRefreshRate = () => {
  animationCount++;

  const elapsed = (performance.now() - startTime) / 1000;
  const refreshRate = Math.round(animationCount / elapsed);

  // Log every 500ms
  if (performance.now() - lastLogTime > 500) {
    lastLogTime = performance.now();
    console.log({
      time: Math.round(elapsed * 100) / 100,
      animationCount,
      refreshRate,
    });
  }

  // Update UI
  const element = document.getElementById("refresh-rate");
  if (element) element.textContent = `${refreshRate} Hz`;

  requestAnimationFrame(updateRefreshRate);
};

requestAnimationFrame(updateRefreshRate);

Sometimes you just have to reinvent the wheel to see how round it really is : )