detect FPS

by Csaba Hellinger

HTML

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

CSS

body {
    font-size: 24px;
    font-family: sans-serif;
}

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

JavaScript

const detectFrameRate = () => new Promise(resolve => {
	const started = performance.now();
    const frames = 30;
    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;
});