Skip to main content
2 of 5
Now have an issue to link to + had a typo in the code.
Kaiido
  • 135.6k
  • 3
  • 25
  • 33

Testing a bug in Chrome (at least in macOS) where requestAnimationFrame fires far faster than screen refresh rate when scrolling if an other StackSnippet is running.
I unfortunately can't make a min-repro outside of StackExchange, so here it is...


Steps to reproduce:

  • Run the first snippet, check the logged values. On a 60Hz monitor, they should be around 60FPS everywhere.
  • Start scrolling the main page. The values may start changing a bit (though normally only min should).
  • Run the second snippet and scroll back to the first one. See how max goes crazy out with numbers like 5,000 or 10,000FPS (I believe the rounded value is due to performance.now()'s min precision, thanks Spectre). Checking the rAF timestamp in these frames gives us a difference of 0: multiple callbacks did fire in a single frame).

const store = [];
let min = Infinity;
let max = -Infinity;
// some "stabilizer" loop in order to avoid outliers
const loop = () => requestAnimationFrame(loop);
loop();
let lastRaf;
// start after everything warmed up
setTimeout(() => requestAnimationFrame(measure), 500);
function measure(rafTime) {
  const now = performance.now();
  if (store.length) {
    const diff = +(1000 / (now - store[store.length-1]));
    max = Math.max(diff, max);
    min = Math.min(diff, min);
    if(diff>1000) {
      console.log("timestamp-diff", rafTime - lastRaf);
    }
  }
  lastRaf = rafTime;
  store.push(now);
  if (store.length > 10) {
    store.shift();
  }
  const diffs = store.map((t,i,a) => (a[i+1]||t)-t);
  const sum = diffs.reduce((s,t) => s+t, 0);
  const avg = sum / (diffs.length - 1);
  log.textContent = `average: ${(1000 / avg).toFixed(2)}FPS
maximum: ${max.toFixed(2)}FPS
minimum: ${min.toFixed(2)}FPS`;
  requestAnimationFrame(measure)
}
.as-console-wrapper { max-height: 110px !important; }
<pre id=log></pre>

<h1>hello</h1>

Kaiido
  • 135.6k
  • 3
  • 25
  • 33