FPS in JavaScript
12 May 2022
Some web pages have enough moving parts that running the page can create choppy animations or user interactions. In my case I'm dealing with performance problems in Blockly when there are more than a thousand blocks on screen. As always, the first step in improving performance is to measure it. That way one can verify if potential modifications are beneficial or not.
Chrome's developer tools has a neat feature which displays the frames per second (FPS) that the page is rendering at. It's great, except that the act of opening the console completely changes the performance profile of the browser. So how can we measure FPS without invalidating the data?
Here's a simple JavaScript snippet which will display the FPS in the page title:
Just copy this snippet into the web page, or paste it into the console (remembering to close the console afterwards). Here's a shorter version which has been compressed:
The script is currently running on this page, so you should see the FPS in the title of the current tab. To test it, press this to cause the browser to do work. The performance profiles of browsers vary wildly; Firefox and Safari slow down when they do work, whereas Chrome speeds up.
