detect FPS

by Csaba Hellinger

HTML

FPS: <span id="result">...</span>

CSS

body { 
    font-size: 24px; 
}

#result { 
    font-weight: bold; 
    color: blue; 
    }

JavaScript

const detectFrameRate = () => new Promise(resolve => {
	const started = performance.now();
    const frames = 20;
    let counter = 0;
    
    const onFrame = () => {
    	counter += 1;
    	if (counter < frames) {
    		requestAnimationFrame(onFrame);    	
        } else {
        	const ended = performance.now();
            const fps = Math.round(1000 / (ended - started) * frames); 
        	resolve(fps);
        }
    }
    
    requestAnimationFrame(onFrame);
});


detectFrameRate().then(fps => {
	document.querySelector('#result').innerHTML = fps;
});