Skip to content

Instantly share code, notes, and snippets.

@magne4000
Last active May 28, 2019 14:07
Show Gist options
  • Save magne4000/c11316b1e5a8c9cf9ba5728f1461b25f to your computer and use it in GitHub Desktop.
Save magne4000/c11316b1e5a8c9cf9ba5728f1461b25f to your computer and use it in GitHub Desktop.
Inject console FPS counter
(function(maxDurationParam){if(maxDurationParam===void 0){maxDurationParam=30}
var maxDuration=maxDurationParam*1000;var Animate=(function(){function Animate(){var _this=this;this.update=function(tickAt){if(tickAt-_this.lastInsertAt>=1000){_this.fps.push(_this.framesCount);_this.lastInsertAt=tickAt;_this.framesCount=0}
_this.framesCount+=1;if(tickAt-_this.startedAt<maxDuration){requestAnimationFrame(_this.update)}
else{_this.elem.dispatchEvent(new Event('finish'))}}}
Animate.prototype.start=function(startedAt){this.startedAt=startedAt;this.lastInsertAt=startedAt;this.framesCount=0;this.fps=[];this.elem=document.createElement('span');requestAnimationFrame(this.update)};Animate.prototype.waitFinish=function(){var _this=this;return new Promise(function(resolve){_this.elem.addEventListener('finish',resolve,!1)})};return Animate}());var average=function(list){return list.reduce(function(prev,curr){return prev+curr})/list.length};var anim=new Animate();anim.start(performance.now());console.log('FPS - test duration:',maxDuration/1000,'seconds');anim.waitFinish().then(function(){return anim.fps}).then(function(fps){var fpsBelowThreshold=fps.filter(function(v){return v<5});if(fpsBelowThreshold.length>2){console.error('FPS - failed ❌',average(fps),fps)}
else{console.log('FPS - success ✅',average(fps))}}).catch(console.error)})()
@magne4000
Copy link
Author

magne4000 commented May 23, 2019

Original code: https://www.typescriptlang.org/play/#src=((maxDurationParam%3A%20number%20%3D%2030)%20%3D%3E%20%7B%0D%0A%20%20const%20maxDuration%20%3D%20maxDurationParam%20*%201000%0D%0A%20%20class%20Animate%20%7B%0D%0A%20%20%20%20startedAt%3A%20number%3B%0D%0A%20%20%20%20lastInsertAt%3A%20number%3B%0D%0A%20%20%20%20framesCount%3A%20number%3B%0D%0A%20%20%20%20fps%3A%20number%5B%5D%3B%0D%0A%20%20%20%20elem%3A%20HTMLElement%3B%0D%0A%0D%0A%20%20%20%20start(startedAt%3A%20number)%20%7B%0D%0A%20%20%20%20%20%20this.startedAt%20%3D%20startedAt%3B%0D%0A%20%20%20%20%20%20this.lastInsertAt%20%3D%20startedAt%3B%0D%0A%20%20%20%20%20%20this.framesCount%20%3D%200%3B%0D%0A%20%20%20%20%20%20this.fps%20%3D%20%5B%5D%3B%0D%0A%20%20%20%20%20%20%2F%2F%20Fake%20element%20to%20bind%20events%20on%20it%0D%0A%20%20%20%20%20%20this.elem%20%3D%20document.createElement('span')%3B%0D%0A%20%20%20%20%20%20requestAnimationFrame(this.update)%3B%0D%0A%20%20%20%20%7D%0D%0A%0D%0A%20%20%20%20update%20%3D%20(tickAt%3A%20number)%20%3D%3E%20%7B%0D%0A%20%20%20%20%20%20if%20(tickAt%20-%20this.lastInsertAt%20%3E%3D%201000)%20%7B%0D%0A%20%20%20%20%20%20%20%20this.fps.push(this.framesCount)%3B%0D%0A%20%20%20%20%20%20%20%20this.lastInsertAt%20%3D%20tickAt%3B%0D%0A%20%20%20%20%20%20%20%20this.framesCount%20%3D%200%3B%0D%0A%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%20this.framesCount%20%2B%3D%201%3B%0D%0A%20%20%20%20%20%20if%20(tickAt%20-%20this.startedAt%20%3C%20maxDuration)%20%7B%0D%0A%20%20%20%20%20%20%20%20requestAnimationFrame(this.update)%3B%0D%0A%20%20%20%20%20%20%7D%20else%20%7B%0D%0A%20%20%20%20%20%20%20%20this.elem.dispatchEvent(new%20Event('finish'))%3B%0D%0A%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%7D%0D%0A%0D%0A%20%20%20%20waitFinish()%20%7B%0D%0A%20%20%20%20%20%20return%20new%20Promise(resolve%20%3D%3E%20%7B%0D%0A%20%20%20%20%20%20%20%20this.elem.addEventListener('finish'%2C%20resolve%2C%20false)%3B%0D%0A%20%20%20%20%20%20%7D)%3B%0D%0A%20%20%20%20%7D%0D%0A%20%20%7D%0D%0A%0D%0A%20%20const%20anim%20%3D%20new%20Animate()%3B%0D%0A%20%20anim.start(performance.now())%3B%0D%0A%0D%0A%20%20console.log('FPS%20-%20test%20duration%3A'%2C%20maxDuration%20%2F%201000%2C%20'seconds')%3B%0D%0A%0D%0A%20%20anim.waitFinish()%0D%0A%20%20%20%20.then(()%20%3D%3E%20%7B%0D%0A%20%20%20%20%20%20return%20anim.fps%3B%0D%0A%20%20%20%20%7D)%0D%0A%20%20%20%20.then((fps)%20%3D%3E%20%7B%0D%0A%20%20%20%20%20%20const%20fpsBelowThreshold%20%3D%20fps.filter(v%20%3D%3E%20v%20%3C%205)%3B%0D%0A%20%20%20%20%20%20if%20(fpsBelowThreshold.length%20%3E%202)%20%7B%0D%0A%20%20%20%20%20%20%20%20console.error('FPS%20-%20failed%20%E2%9D%8C'%2C%20fpsBelowThreshold)%3B%0D%0A%20%20%20%20%20%20%7D%20else%20%7B%0D%0A%20%20%20%20%20%20%20%20console.log('FPS%20-%20success%20%E2%9C%85')%3B%0D%0A%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%7D)%0D%0A%20%20%20%20.catch(console.error)%3B%0D%0A%7D)()%3B%0D%0A

Minified with: https://www.minifier.org/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment