https://github.com/paulirish/memory-stats.js
minimal monitor for JS Heap Size via performance.memory
https://github.com/paulirish/memory-stats.js
Last synced: 11 months ago
JSON representation
minimal monitor for JS Heap Size via performance.memory
- Host: GitHub
- URL: https://github.com/paulirish/memory-stats.js
- Owner: paulirish
- Created: 2015-01-21T06:34:33.000Z (about 11 years ago)
- Default Branch: master
- Last Pushed: 2015-07-03T19:31:33.000Z (almost 11 years ago)
- Last Synced: 2025-05-07T23:27:26.131Z (11 months ago)
- Language: JavaScript
- Homepage:
- Size: 544 KB
- Stars: 2,099
- Watchers: 50
- Forks: 106
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-wpo - Memory-stats.js - Minimal monitor for JS Heap Size via performance memory. (Benchmark - JavaScript / Meetups)
- fucking-awesome-wpo - Memory-stats.js - minimal monitor for JS Heap Size via performance memory. (Benchmark - JavaScript / Meetups)
README
## memory-stats.js
Like [stats.js](https://github.com/mrdoob/stats.js/) but for JS memory
[@jeromeetienne](https://github.com/jeromeetienne/), inspired by mrdoob's stats.js code, wrote this as part of [tquery](https://github.com/jeromeetienne/tquery). I've now promoted it to a standalone repo and cleaned it all up.
### Usage:
1. Start Chrome [with](http://www.chromium.org/developers/how-tos/run-chromium-with-flags) `--enable-precise-memory-info`
- Otherwise the results from performance.memory are bucketed and less useful.
1. Include memory.stats.js
1. Instantiate it (`stats = new MemoryStats()`, add the `stats.element` to the DOM, and run `stats.update()` regularly.
That might look something like:
```js
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/shprink): https://github.com/livingobjects/angular-memory-stats
* Ember addon by [@stefanpenner](https://github.com/stefanpenner): https://github.com/stefanpenner/ember-browser-stats
* Rails gem by [@jurre](https://github.com/jurre):
https://github.com/jurre/memory-stats-js-rails
* Polymer element by [@ragingwind](https://github.com/ragingwind): https://github.com/ragingwind/memory-stats-element
* Gulp plugin by [@tshaddix](https://github.com/tshaddix): https://github.com/tshaddix/gulp-memory-stats
* Web Components element by [@jmalonzo](https://github.com/jmalonzo): https://github.com/jmalonzo/memory-stats-element
* React Component by [@vigneshshanmugam](https://github.com/vigneshshanmugam): https://github.com/vigneshshanmugam/react-memorystats
# Bookmarklet
You can add this code to any page using the following bookmarklet:
```js
javascript:(function(){var script=document.createElement('script');script.src='https://rawgit.com/paulirish/memory-stats.js/master/bookmarklet.js';document.head.appendChild(script);})()
```