<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<script type="text/javascript" src="./libs/stats.js"></script>
</head>
<body>
<div id="Stats-output">
</div>
<script type="text/javascript">
var stats = initStats();
function initStats() {
var stats = new Stats();
stats.setMode(0); // 0: fps, 1: ms
// Align top-left
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';
document.getElementById("Stats-output").appendChild(stats.domElement);
return stats;
}
setInterval(function(){
stats.update();
},500);
</script>
</body>
</html>
源码:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
/** * @author mrdoob / http://mrdoob.com/ */ var Stats = function () { var startTime = Date.now(), prevTime = startTime; var ms = 0, msMin = Infinity, msMax = 0; var fps = 0, fpsMin = Infinity, fpsMax = 0; var frames = 0, mode = 0; var container = document.createElement( 'div' ); container.id = 'stats'; container.addEventListener( 'mousedown', function ( event ) { event.preventDefault(); setMode( ++ mode % 2 ) }, false ); container.style.cssText = 'width:80px;opacity:0.9;cursor:pointer'; var fpsDiv = document.createElement( 'div' ); fpsDiv.id = 'fps'; fpsDiv.style.cssText = 'padding:0 0 3px 3px;text-align:left;background-color:#002'; container.appendChild( fpsDiv ); var fpsText = document.createElement( 'div' ); fpsText.id = 'fpsText'; fpsText.style.cssText = 'color:#0ff;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px'; fpsText.innerHTML = 'FPS'; fpsDiv.appendChild( fpsText ); var fpsGraph = document.createElement( 'div' ); fpsGraph.id = 'fpsGraph'; fpsGraph.style.cssText = 'position:relative;width:74px;height:30px;background-color:#0ff'; fpsDiv.appendChild( fpsGraph ); while ( fpsGraph.children.length < 74 ) { var bar = document.createElement( 'span' ); bar.style.cssText = 'width:1px;height:30px;float:left;background-color:#113'; fpsGraph.appendChild( bar ); } var msDiv = document.createElement( 'div' ); msDiv.id = 'ms'; msDiv.style.cssText = 'padding:0 0 3px 3px;text-align:left;background-color:#020;display:none'; 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 = 'MS'; 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 setMode = function ( value ) { mode = value; switch ( mode ) { case 0: fpsDiv.style.display = 'block'; msDiv.style.display = 'none'; break; case 1: fpsDiv.style.display = 'none'; msDiv.style.display = 'block'; break; } } var updateGraph = function ( dom, value ) { var child = dom.appendChild( dom.firstChild ); child.style.height = value + 'px'; } return { REVISION: 11, domElement: container, setMode: setMode, begin: function () { startTime = Date.now(); }, end: function () { var time = Date.now(); ms = time - startTime; msMin = Math.min( msMin, ms ); msMax = Math.max( msMax, ms ); msText.textContent = ms + ' MS (' + msMin + '-' + msMax + ')'; updateGraph( msGraph, Math.min( 30, 30 - ( ms / 200 ) * 30 ) ); frames ++; if ( time > prevTime + 1000 ) { fps = Math.round( ( frames * 1000 ) / ( time - prevTime ) ); fpsMin = Math.min( fpsMin, fps ); fpsMax = Math.max( fpsMax, fps ); fpsText.textContent = fps + ' FPS (' + fpsMin + '-' + fpsMax + ')'; updateGraph( fpsGraph, Math.min( 30, 30 - ( fps / 100 ) * 30 ) ); prevTime = time; frames = 0; } return time; }, update: function () { startTime = this.end(); } } };