perf.js

Simple JavaScript library to monitor frame rate (FPS), frame time (MS) and memory (MEM).

Uses performance.now() with Date.now() fallback on older browsers.

perf.js is a self contained library, so monitoring of stats will start by just instantiating it.

var stats = new Perf();

Installation:

npm install perf.js

For haxe users:

haxelib install perf.js

Basic Stats:

With Memory (Chrome only):

With Custom Info (Optional):

Optional custom info can be added if needed, For example the following shows what kind of renderer and pixel ratio pixi.js is using.

To use, simply call addInfo(info) on perf instance.

stats.addInfo("custom info");

Customisation:

You can customize the following:

Perf.MEASUREMENT_INTERVAL = 1000;
Perf.FONT_FAMILY = "Helvetica,Arial";
Perf.FPS_BG_CLR = "#00FF00";
Perf.FPS_WARN_BG_CLR = "#FF8000";
Perf.FPS_PROB_BG_CLR = "#FF0000";
Perf.MS_BG_CLR = "#FFFF00";
Perf.MEM_BG_CLR = "#086A87";
Perf.INFO_BG_CLR = "#00FFFF";
Perf.FPS_TXT_CLR = "#000000";
Perf.MS_TXT_CLR = "#000000";
Perf.MEM_TXT_CLR = "#FFFFFF";
Perf.INFO_TXT_CLR = "#000000";

The values assigned above are the default values.

Positioning:

By default stats appear on the top right corner. The position can be changed by passing the position to the constructor when instantiating Perf.

Top Right - default

var stats = new Perf();

Top Left

var stats = new Perf(Perf.TOP_LEFT);

Bottom Right

var stats = new Perf(Perf.BOTTOM_RIGHT);

Bottom Left

var stats = new Perf(Perf.BOTTOM_LEFT);

Offset

Offset is optional and is 0 by default.

var stats = new Perf(Perf.TOP_LEFT, 100);

Bookmarklet:

javascript:(function(){
  var script=document.createElement('script');script.src='//cdn.rawgit.com/adireddy/perf/b516938d/dist/perf.min.js';document.head.appendChild(script);script.onload=function(){window.perf=new Perf();}
}())

Licensing Information

This content is released under the MIT License.

Contributor Code of Conduct

Code of Conduct is adapted from Contributor Covenant, version 1.4