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 toperformance.now()
's min precision, thanks Spectre). Checking the rAF timestamp in these frames gives us a difference of0
: 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>