http://jvitela.github.io/backbone-dbmon/js/memory-stats.js

1/**
2 * @author mrdoob / http://mrdoob.com/
3 * @author jetienne / http://jetienne.com/
4 * @author paulirish / http://paulirish.com/
5 */
6var MemoryStats = function (){
7
8  var msMin	= 100;
9  var msMax	= 0;
10
11  var container	= document.createElement( 'div' );
12  container.id	= 'stats';
13  container.style.cssText = 'width:80px;opacity:0.9;cursor:pointer';
14
15  var msDiv	= document.createElement( 'div' );
16  msDiv.id	= 'ms';
17  msDiv.style.cssText = 'padding:0 0 3px 3px;text-align:left;background-color:#020;';
18  container.appendChild( msDiv );
19
20  var msText	= document.createElement( 'div' );
21  msText.id	= 'msText';
22  msText.style.cssText = 'color:#0f0;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px';
23  msText.innerHTML= 'Memory';
24  msDiv.appendChild( msText );
25
26  var msGraph	= document.createElement( 'div' );
27  msGraph.id	= 'msGraph';
28  msGraph.style.cssText = 'position:relative;width:74px;height:30px;background-color:#0f0';
29  msDiv.appendChild( msGraph );
30
31  while ( msGraph.children.length < 74 ) {
32
33    var bar = document.createElement( 'span' );
34    bar.style.cssText = 'width:1px;height:30px;float:left;background-color:#131';
35    msGraph.appendChild( bar );
36
37  }
38
39  var updateGraph = function ( dom, height, color ) {
40
41    var child = dom.appendChild( dom.firstChild );
42    child.style.height = height + 'px';
43    if( color ) child.style.backgroundColor = color;
44
45  }
46
47  var perf = window.performance || {};
48  // polyfill usedJSHeapSize
49  if (!perf && !perf.memory){
50    perf.memory = { usedJSHeapSize : 0 };
51  }
52  if (perf && !perf.memory){
53    perf.memory = { usedJSHeapSize : 0 };
54  }
55
56  // support of the API?
57  if( perf.memory.totalJSHeapSize === 0 ){
58    console.warn('totalJSHeapSize === 0... performance.memory is only available in Chrome .')
59  }
60
61  // TODO, add a sanity check to see if values are bucketed.
62  // If so, reminde user to adopt the --enable-precise-memory-info flag.
63  // open -a "/Applications/Google Chrome.app" --args --enable-precise-memory-info
64
65  var lastTime	= Date.now();
66  var lastUsedHeap= perf.memory.usedJSHeapSize;
67  return {
68    domElement: container,
69
70    update: function () {
71
72      // refresh only 30time per second
73      if( Date.now() - lastTime < 1000/30 )	return;
74      lastTime	= Date.now()
75
76      var delta	= perf.memory.usedJSHeapSize - lastUsedHeap;
77      lastUsedHeap	= perf.memory.usedJSHeapSize;
78      var color	= delta < 0 ? '#830' : '#131';
79
80      var ms	= perf.memory.usedJSHeapSize;
81      msMin	= Math.min( msMin, ms );
82      msMax	= Math.max( msMax, ms );
83      msText.textContent = "Mem: " + bytesToSize(ms, 2);
84
85      var normValue	= ms / (30*1024*1024);
86      var height	= Math.min( 30, 30 - normValue * 30 );
87      updateGraph( msGraph, height, color);
88
89      function bytesToSize( bytes, nFractDigit ){
90        var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
91        if (bytes == 0) return 'n/a';
92        nFractDigit	= nFractDigit !== undefined ? nFractDigit : 0;
93        var precision	= Math.pow(10, nFractDigit);
94        var i 		= Math.floor(Math.log(bytes) / Math.log(1024));
95        return Math.round(bytes*precision / Math.pow(1024, i))/precision + ' ' + sizes[i];
96      };
97    }
98
99  }
100
101};