node package manager

@jordandelcros/stats-js

npm version

stats.js

JavaScript Performance Monitor

This class is a rework of the original stats.js from mrdoob.

It use a single canvas unlike the original that use DOM elements.

So, it 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.
  • MB MBytes of allocated memory. (Run Chrome with --enable-precise-memory-info)
  • PING Milliseconds needed to ask request something to the server. The lower the number the better.

Screenshots

fps.png ms.png mb.png ping.png

NPM

    npm install @jordandelcros/stats-js

Usage

Stats([realTime]);

var stats = new Stats(false);
 
document.body.appendChild(stats.domElement););
 
function update() {
 
  window.requestAnimationFrame(update);
 
    stats.begin();
 
    // monitored code goes here 
 
    stats.end();
 
};
 
window.requestAnimationFrame(update);

to get the PING you need to call special methods into server's requests:

// ... 
 
function fakeServerRequest(){
 
    // Call on server request send 
    stats.beginPing();
 
    // Fake server latency 
    setTimeout(function(){
 
        // Call on server request response 
        stats.endPing();
        fakeServerRequest();
 
    }, 65);
 
};
 
fakeServerRequest();
 
// ...