stats.js

stats.js is a small JavaScript library that adds a live performance monitor to any web page or browser-based application. It appears as a compact info box in the corner of the screen, updating in real time while your code runs. Developers typically use it during development to spot slowdowns before shipping.

The monitor can display several types of information at once. FPS shows how many frames are drawn per second, which is important for animations and games: higher is better. MS shows how many milliseconds each frame takes to render: lower is better. MB shows how much memory the browser has allocated, though you need to launch Chrome with a special flag to get accurate memory numbers. You can also add your own custom panels to track any value you care about.

Adding it to a project is straightforward. You install it via npm, create a Stats object, tell it which panel to show first, and attach its small display element to the page. You then wrap the code you want to measure between two calls, begin and end, inside your animation loop. The library handles the rest, updating the display automatically on each frame.

There is also a bookmarklet option, which lets you paste a short snippet into your browser's bookmark bar and inject the monitor into any page you are visiting, without touching that page's source code. This is useful for quickly checking the performance of third-party sites or demos.

The library is intentionally minimal: one file, no dependencies, no configuration required beyond picking a panel. It was created by the author of the Three.js 3D library and is widely used in browser-based graphics and animation projects.