Testing a bug with 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).
debugger; // apparently the code would be ran in both iframes?
const store = [];
let min = Infinity;
let max = -Infinity;
let lastRaf;
let rafID;
// start after everything warmed up
setTimeout(() => rafID = requestAnimationFrame(measure), 500);
function measure(rafTime) {
// testing observations from Comment 7
// make sure we have only one rAF(measure) scheduled at a time
if (checkbox.checked) {
cancelAnimationFrame(rafID);
}
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`;
rafID = requestAnimationFrame(measure)
}
.as-console-wrapper { max-height: 110px !important; }
<label><input type=checkbox id=checkbox> Cancel previous animation frame callback</label>
<pre id=log></pre>
<h1>hello</h1>