fps-meter-drop-in.min.js

window.requestAnimationFrame||(window.requestAnimationFrame=(()=>window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||function(e){window.setTimeout(e,1e3/60)})());const getTime=()=>window.performance&&window.performance.now?window.performance.now():+new Date;class FPSMeter{constructor(e){this.ui=e.ui||!1,this.fps=0,this.isRunning=!1,this.defaultStyles='z-index:999;position:fixed;bottom:0;left:0;padding:10px;font-weight:600;font-style:normal;font-size:12px;font-family:Consolas,Menlo,Monaco,"Lucida Console","Liberation Mono","DejaVu Sans Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace,sans-serif'}measure(){const e=getTime();window.requestAnimationFrame(()=>{const t=Math.round(1/(getTime()-e)*1e3);if(this.fps=t,this.ui&&this.element){let e=4-`${t}`.length,i="";for(;e>0;)i+=" ",e--;switch(this.text.nodeValue=`${t}${i}fps`,!1){case!(t<7):this.element.style.color="#FFF",this.element.style.backgroundColor="#FF4500";break;case!(t<25):this.element.style.color="#FF4500",this.element.style.backgroundColor="#000";break;case!(t<40):this.element.style.color="orange",this.element.style.backgroundColor="#000";break;case!(t>70):this.element.style.color="#0f0",this.element.style.backgroundColor="#000";break;default:this.element.style.color="#018801",this.element.style.backgroundColor="#000"}}this.isRunning&&this.measure()})}start(){this.isRunning||(this.isRunning=!0,!0===this.ui&&(this.text=document.createTextNode(""),this.element=document.createElement("div"),this.element.style=this.defaultStyles,this.element.appendChild(this.text),document.body.appendChild(this.element)),this.measure())}pause(){this.isRunning=!1}resume(){this.isRunning||(this.isRunning=!0,this.measure())}toggle(){this.isRunning?this.pause():this.resume()}stop(){this.isRunning&&(this.isRunning=!1,!0===this.ui&&this.element&&this.element.remove())}}

// (new FPSMeter({ui: true})).start();