FPSMeter

Introduction

Simple JavaScript library for sexy, fast, and themable FPS meter. It can measure:

frames per second
number of milliseconds between frames
number of milliseconds it takes to render one frame (when using the .tickStart() method)

For higher accuracy, timing is measured with performance.now() when available, with a fallback to +new Date() for older browsers.

FPSMeter supports multiple instances on one page, has show/hide methods that also pause the meter rendering, and color heatmaps that make themes even more pretty!

Dependencies

None.

Compatibility

All modern browsers, and IE7+.

Changelog

FPSMeter upholds the Semantic Versioning Specification.

Support

Reward the developer

And make him happy for maintaining this library! :)

I don't want to monetize my libraries as I want them to be accessible to everyone with any budget. That being said, free software isn't free, it's just paid by with developer's time, and right now I could use some help :)

Performance

FPSMeter rendering happens once per option.interval, and is chained to requestAnimationFrame (with a polyfill for older browsers). It is also GC optimized, so it should be as fast as possible.

Usage

FPSMeter is a class you use to create one meter instance:

var meter = new FPSMeter([ anchor ] [, options ]);

Arguments:

anchor - Element to which the meter will be appended to. When omitted, document.body is used.
options - Object with FPSMeter options. See Options documentation page.

Measuring

To start measuring the FPS call the .tick() method at the end of each frame:

// Function that renders one frame
function render() {
	// ... rendering happens here ...
	meter.tick();
}

In this setup, FPSMeter will measure FPS, and time between frames.

To measure the time it takes to render one frame, call the .tickStart() method at the beginning of each frame:

// Function that renders one frame
function render() {
	meter.tickStart();
	// ... rendering happens here ...
	meter.tick();
}

You can change between FPS and duration display by clicking on meter element, or calling .showFps(), .showDuration(), or .toggle() methods.

To see all available methods, read the Methods documentation page.

Documentation

Documentation is centralized in the FPSMeter's Repository Wiki, which makes it way easier to maintain and keep always up to date.