memory-stats.js
Like stats.js but for JS memory
@jeromeetienne, inspired by mrdoob's stats.js code, wrote this as part of tquery. I've now promoted it to a standalone repo and cleaned it all up.
Usage:
- Start Chrome with
--enable-precise-memory-info- Otherwise the results from performance.memory are bucketed and less useful.
- Include memory.stats.js
- Instantiate it (
stats = new MemoryStats(), add thestats.elementto the DOM, and runstats.update()regularly.
That might look something like:
var stats = new MemoryStats();
stats.domElement.style.position = 'fixed';
stats.domElement.style.right = '0px';
stats.domElement.style.bottom = '0px';
document.body.appendChild( stats.domElement );
requestAnimationFrame(function rAFloop(){
stats.update();
requestAnimationFrame(rAFloop);
});
Run Chrome with the flag and open demo/index.html to see it in action.
Framework adaptors
- Angular component by @shprink: https://github.com/livingobjects/angular-memory-stats
- Ember addon by @stefanpenner: https://github.com/stefanpenner/ember-browser-stats
- Rails gem by @jurre:
https://github.com/jurre/memory-stats-js-rails - Polymer element by @ragingwind: https://github.com/ragingwind/memory-stats-element
- Gulp plugin by @tshaddix: https://github.com/tshaddix/gulp-memory-stats
- Web Components element by @jmalonzo: https://github.com/jmalonzo/memory-stats-element
- React Component by @vigneshshanmugam: https://github.com/vigneshshanmugam/react-memorystats
Bookmarklet
You can add this code to any page using the following bookmarklet:
javascript:(function(){var script=document.createElement('script');script.src='https://rawgit.com/paulirish/memory-stats.js/master/bookmarklet.js';document.head.appendChild(script);})()