Skip to content

Instantly share code, notes, and snippets.

@graynorton
Created November 13, 2018 23:42
Show Gist options
  • Save graynorton/86f875b204d939e587878cabfc661cc7 to your computer and use it in GitHub Desktop.
Save graynorton/86f875b204d939e587878cabfc661cc7 to your computer and use it in GitHub Desktop.
A little wrapper function for detecting and displaying jank. Hacked together for a demo, may not be suitable for any legitimate purpose. :-)
const revealJank = (fn) => {
// jank is a master on/off switch from outer scope
if (!jank) return fn();
// scrim is visible when .janking is on body
document.body.classList.add('janking');
setTimeout(() => {
fn();
let lastFrame = window.performance.now();
let goodFrames = 0;
function check() {
const thisFrame = window.performance.now();
const elapsed = thisFrame - lastFrame;
if (elapsed < 64) {
if (goodFrames++ > 2) {
document.body.classList.remove('janking');
return;
}
}
else {
goodFrames = 0;
}
lastFrame = thisFrame;
window.requestAnimationFrame(check);
}
window.requestAnimationFrame(check);
}, 0);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment