You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
101 lines
3.0 KiB
101 lines
3.0 KiB
/**
|
|
* @author mrdoob / http://mrdoob.com/
|
|
* @author jetienne / http://jetienne.com/
|
|
* @author paulirish / http://paulirish.com/
|
|
*/
|
|
var MemoryStats = function (){
|
|
|
|
var msMin = 100;
|
|
var msMax = 0;
|
|
|
|
var container = document.createElement( 'div' );
|
|
container.id = 'stats';
|
|
container.style.cssText = 'width:80px;opacity:0.9;cursor:pointer';
|
|
|
|
var msDiv = document.createElement( 'div' );
|
|
msDiv.id = 'ms';
|
|
msDiv.style.cssText = 'padding:0 0 3px 3px;text-align:left;background-color:#020;';
|
|
container.appendChild( msDiv );
|
|
|
|
var msText = document.createElement( 'div' );
|
|
msText.id = 'msText';
|
|
msText.style.cssText = 'color:#0f0;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px';
|
|
msText.innerHTML= 'Memory';
|
|
msDiv.appendChild( msText );
|
|
|
|
var msGraph = document.createElement( 'div' );
|
|
msGraph.id = 'msGraph';
|
|
msGraph.style.cssText = 'position:relative;width:74px;height:30px;background-color:#0f0';
|
|
msDiv.appendChild( msGraph );
|
|
|
|
while ( msGraph.children.length < 74 ) {
|
|
|
|
var bar = document.createElement( 'span' );
|
|
bar.style.cssText = 'width:1px;height:30px;float:left;background-color:#131';
|
|
msGraph.appendChild( bar );
|
|
|
|
}
|
|
|
|
var updateGraph = function ( dom, height, color ) {
|
|
|
|
var child = dom.appendChild( dom.firstChild );
|
|
child.style.height = height + 'px';
|
|
if( color ) child.style.backgroundColor = color;
|
|
|
|
}
|
|
|
|
var perf = window.performance || {};
|
|
// polyfill usedJSHeapSize
|
|
if (!perf && !perf.memory){
|
|
perf.memory = { usedJSHeapSize : 0 };
|
|
}
|
|
if (perf && !perf.memory){
|
|
perf.memory = { usedJSHeapSize : 0 };
|
|
}
|
|
|
|
// support of the API?
|
|
if( perf.memory.totalJSHeapSize === 0 ){
|
|
console.warn('totalJSHeapSize === 0... performance.memory is only available in Chrome .')
|
|
}
|
|
|
|
// TODO, add a sanity check to see if values are bucketed.
|
|
// If so, reminde user to adopt the --enable-precise-memory-info flag.
|
|
// open -a "/Applications/Google Chrome.app" --args --enable-precise-memory-info
|
|
|
|
var lastTime = Date.now();
|
|
var lastUsedHeap= perf.memory.usedJSHeapSize;
|
|
return {
|
|
domElement: container,
|
|
|
|
update: function () {
|
|
|
|
// refresh only 30time per second
|
|
if( Date.now() - lastTime < 1000/30 ) return;
|
|
lastTime = Date.now()
|
|
|
|
var delta = perf.memory.usedJSHeapSize - lastUsedHeap;
|
|
lastUsedHeap = perf.memory.usedJSHeapSize;
|
|
var color = delta < 0 ? '#830' : '#131';
|
|
|
|
var ms = perf.memory.usedJSHeapSize;
|
|
msMin = Math.min( msMin, ms );
|
|
msMax = Math.max( msMax, ms );
|
|
msText.textContent = "Mem: " + bytesToSize(ms, 2);
|
|
|
|
var normValue = ms / (30*1024*1024);
|
|
var height = Math.min( 30, 30 - normValue * 30 );
|
|
updateGraph( msGraph, height, color);
|
|
|
|
function bytesToSize( bytes, nFractDigit ){
|
|
var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
|
|
if (bytes == 0) return 'n/a';
|
|
nFractDigit = nFractDigit !== undefined ? nFractDigit : 0;
|
|
var precision = Math.pow(10, nFractDigit);
|
|
var i = Math.floor(Math.log(bytes) / Math.log(1024));
|
|
return Math.round(bytes*precision / Math.pow(1024, i))/precision + ' ' + sizes[i];
|
|
};
|
|
}
|
|
|
|
}
|
|
|
|
};
|