micro-fps

A super lightweight fps meter, with near zero overhead

createFpsMeter is a function factory, it returns a new meter.
But why not a class? Last time I checked, accessing instance properties was slower than accessing variables on a near closure.

Installation

Yarn

yarn add micro-fps

NPM

npm install micro-fps

If you don't use a package manager, you can access micro-fps via unpkg (CDN), download the source, or point your package manager to the url.

Usage

JS fiddle Example: https://jsfiddle.net/Victornpb/g8pra2a6/

import microFps from 'micro-fps';

function updatedUIcallback(stats){
  // Update your UI
  fps_div.innerHTML = stats.fps.toFixed(2) + " fps"; 
  console.log(stats);
}

const REFRESH_RATE = 2; // update you HUD twice a second (it can be a fraction e.g.: 0.5 will compute every 2 seconds).
const fpsTick = microFps(updatedUIcallback, REFRESH_RATE); // create a tick function

Then call the returned function on every frame of your loop

// game/animation loop
setInterval(function loop(){
    fpsTick(); // call on every frame
     
    // Your game/animation logic

}, 1000/60);

Callback stats object

property	type	description
fps	float	The calculated frames per second
jitter	float	The absolute difference since the last calculated fps
elapsed	float	Milliseconds ellapsed since the last computation
frames	integer	Number of frames since the last computation
trigger	float	Next computation will happen at this amount of frames

Examples

See example folder or the runkit example.

Builds

micro-fps is compiled as a collection of CommonJS modules & [ES2015 modules](http://www.2ality.com/2014/0 -9/es6-modules-final.html) for bundlers that support the jsnext:main or module field in package.json (Rollup, Webpack 2)

The micro-fps package includes precompiled production and development UMD builds in the dist/umd folder. They can be used directly without a bundler and are thus compatible with many popular JavaScript module loaders and environments. You can drop a UMD build as a <script> tag on your page. The UMD builds make micro-fps available as a window.microFps global variable.

License

The code is available under the MIT license.

Contributing

We are open to contributions, see CONTRIBUTING.md for more info.