stats.js

Javascript Performance Monitor

This class provides a simple info box that will help you monitor your code performance.

• FPS Frames rendered in the last second. The higher the number the better.
• MS Milliseconds needed to render a frame. The lower the number the better.
• MEM Mbytes of memory allocated. Make sure it doesn't keep incrementing. (Webkit-based browsers only)

Screenshots

Usage

var stats = new Stats();

// Align top-left
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';

parentElement.appendChild( stats.domElement );

setInterval( function () {

	stats.update();

}, 1000 / 60 );

Enable MEM

• Chrome

  • Linux: /opt/google/chrome/google-chrome --enable-memory-info
  • Windows: "C:\Program Files\Google\Chrome\Application\chrome.exe" --enable-memory-info
  • MacOS: /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --enable-memory-info

• Safari

  • MacOS: Open ~/Library/Preferences/com.apple.Safari.plist file for editing, and add & set enabled a boolean preference WebKitMemoryInfoEnabled (pic)

Change Log

2010 09 21 - r5 (3.800 kb)

• Different color per mode.
• Added MEM mode. (Webkit-based browsers only)
• Force text left aligned.

2010 06 11 - r4 (2.235 kb)

• Added MS mode.

2010 05 12 - r3 (1.241 kb)

• Switched to module pattern code style.
• Removed position = 'absolute'.

2010 03 01 - r2 (2.177 kb)

• Simplified.

2010 02 21 - r1

• Accurate FPS calculation. (thx Spite!)

2009 08 09 - r0

• Base code.