How to Check Your Monitor Refresh Rate (Hz) in the Browser with JavaScript

Is your 144 Hz monitor really running at 144 Hz? A surprising number of people find out it has been stuck at 60 Hz for months because of a cable or a Windows setting. You can check it from a web page with about 20 lines of JavaScript. Here is how, including the two details that make the number trustworthy.

👉 Try it first: arelvox.com/refresh-rate-test

The idea: count frames with requestAnimationFrame

The browser calls requestAnimationFrame once per screen refresh. If you record the time between calls, you get the frame time, and 1000 / frameTime is the refresh rate in hertz.

var samples = [], last = 0;

function loop(t) {
  if (last) samples.push(t - last);   // ms between two frames
  last = t;
  requestAnimationFrame(loop);
}
requestAnimationFrame(loop);

On a 60 Hz screen the samples hover around 16.7 ms, on 144 Hz around 6.9 ms, and on 240 Hz around 4.2 ms.

Detail 1: use the median, not the average

If you simply average the samples, you get numbers like 57 Hz on a perfectly normal 60 Hz laptop. The reason is dropped frames. When the browser is busy (garbage collection, a heavy tab, a font loading), one frame takes 33 ms instead of 16.7 ms. A few of those pull the average down a lot.

The median ignores them:

function median(a) {
  var b = a.slice().sort(function (x, y) { return x - y; });
  return b[Math.floor(b.length / 2)];
}

var hz = 1000 / median(samples.slice(10));   // skip the first frames while the page settles

I also skip the first 10 samples, because the first frames after page load are often irregular.

A bonus: once you have the median, counting dropped frames is trivial. Any frame that takes more than about 1.7× the median was dropped:

if (dt > median(samples) * 1.7) drops++;

Detail 2: snap to real refresh rates

The measured value is never perfectly round. You get 59.94 Hz (a real NTSC-style rate on many laptops), 143.8 Hz, and so on. People expect to see "144 Hz", so I snap to the nearest common rate if it is within 6%:

var COMMON = [30, 50, 60, 72, 75, 90, 100, 120, 144, 165, 170, 180, 200, 240, 280, 300, 360];

function nearest(hz) {
  var best = COMMON[0];
  COMMON.forEach(function (c) {
    if (Math.abs(c - hz) < Math.abs(best - hz)) best = c;
  });
  return Math.abs(best - hz) / hz < 0.06 ? best : Math.round(hz);
}

I still show the raw measurement next to it ("about 60 Hz, measured 59.9 Hz"), so nothing is hidden.

Gotcha: background tabs

Browsers throttle requestAnimationFrame in background tabs, sometimes down to 1 frame per second or none at all. My first deploy showed "NaN Hz" to anyone who opened the page in a new background tab: after 2.5 seconds there were not enough samples, and the median of an empty array is undefined.

The fix is to wait until there are enough samples, and to restart the measurement when the tab becomes visible:

if (t - start > 2500 ? samples.length >= 60 : false) finish();

document.addEventListener('visibilitychange', function () {
  if (!document.hidden) { last = 0; restart(); }
});

(The ternary instead of && is because the code runs inside a WordPress block, and WordPress mangles && in inline scripts.)

Making the difference visible

A number is nice, but people want to see smoothness. The page has three squares moving at the same speed: one updates every frame, one at 30 FPS and one at 15 FPS. On a 144 Hz screen the difference between the first two is obvious, and it is a good way to convince yourself that the monitor setting actually changed.

If your screen shows 60 Hz but should not

• Windows: Settings → System → Display → Advanced display → Choose a refresh rate.
• macOS: System Settings → Displays → Refresh rate.
• Cable: old HDMI cables often cap you at 60 Hz. DisplayPort is the safe choice.
• Laptops on battery may drop to 60 Hz to save power.

Try it

What does your screen report? I'd love to hear about odd results, especially on variable refresh rate displays or phones, where the browser may run at a lower rate than the panel.

Run the refresh rate test →

There are a few more small browser tests on the same site if you are setting up new hardware: a keyboard tester, a dead pixel test, a mic test and a webcam test.