Created
November 13, 2018 23:42
-
-
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. :-)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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