<!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>

　源码：

/**

 * @author mrdoob / http://mrdoob.com/

 */

var Stats = function () {

    var startTime = Date.now(), prevTime = startTime;

    var ms = , msMin = Infinity, msMax = ;

    var fps = , fpsMin = Infinity, fpsMax = ;

    var frames = , mode = ;

    var container = document.createElement( 'div' );

    container.id = 'stats';

    container.addEventListener( 'mousedown', function ( event ) { event.preventDefault(); setMode( ++ mode %  ) }, 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 <  ) {

        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 <  ) {

        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 :

                fpsDiv.style.display = 'block';

                msDiv.style.display = 'none';

                break;

            case :

                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: ,

        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( ,  - ( ms /  ) *  ) );

            frames ++;

            if ( time > prevTime +  ) {

                fps = Math.round( ( frames *  ) / ( time - prevTime ) );

                fpsMin = Math.min( fpsMin, fps );

                fpsMax = Math.max( fpsMax, fps );

                fpsText.textContent = fps + ' FPS (' + fpsMin + '-' + fpsMax + ')';

                updateGraph( fpsGraph, Math.min( ,  - ( fps /  ) *  ) );

                prevTime = time;

                frames = ;

            }

            return time;

        },

        update: function () {

            startTime = this.end();

        }

    }

};

stats.js随时查看fps的更多相关文章

  1. 微信小程序tips集合:无法输入文字/随时查看页面/元素审查/点击事件/数据绑定

    1:编辑文档无法输入文字 出现这种情况一般是因为之前编辑的文档未保存,所有在其他文档输入的时候会自动输入到未保存的文档中,在文档暂时编辑完毕后要ctrl+s随手保存,不然会出现无法打字情况 2: 随时 ...

  2. dat.gui stats.js 通用参数配置及图像统计工具

    在网上看到了一个非常好的JS烟雾效果 https://paveldogreat.github.io/WebGL-Fluid-Simulation/看源码时发现了dat.gui很好用. dat.gui ...

  3. 谷歌浏览器插件-html页面js事件查看器

    谷歌浏览器插件-html页面js事件查看器 1.下载 下载地址:http://files.cnblogs.com/files/graceup/VisualEvent.zip 解压得到文件:Visual ...

  4. iOS小Tip之查看FPS

    可能大家有的时候会想要查看app在运行时的帧率能否达到60帧,如果达不到的话,你可能会想着去优化动画或者其它任何会影响显示性能的问题. 但是,你首先要观察到你的FPS,对吧? 我告诉大家一个简单的方法 ...

  5. 【jQuery小实例】js 插件 查看图片

    ---本系列文章所用使用js均可在本博客文件中找到. 像淘宝一样,鼠标放在某一件商品上,展示大图信息,甚至查看图片的具体部位.给人超炫的效果,这种效果实现基于js文件和js插件.大致可以分为三步,添加 ...

  6. 使用PDF.JS在线查看PDF

    过程简单粗暴. 第一步:下载源码https://github.com/mozilla/pdf.js 第二步:将源码拷贝进项目中,可以新建一个PDFShow文件夹存放代码 第三步:修改viewer.js ...

  7. JS：指定FPS帧频，requestAnimationFrame播放动画

    Flash制作动画,最基础的概念就是帧,但在Flash中,帧频的控制比较简单,只需要编译前指定一下目标帧频就可以了. 实际运行时,不需要我们关心定时器的问题,flash player会定时触发Ente ...

  8. viewer.js图片查看器插件（可缩放/旋转/切换）

    <!doctype html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  9. js通过查看屏幕大小，更改其他css属性

    首先,我们要知道如何得到屏幕的相关数据. <html><head><title>获取当前对象大小以及屏幕分辨率等</title><body> ...

随机推荐

  1. HOW TO： 在 Visual C# .NET 应用程序中提供文件拖放功能

    本文假定您熟悉下列主题: Windows 窗体列表框控件 Windows 窗体事件处理 生成示例的步骤 列表框控件提供了您需要处理的两个拖放事件: DragEnter 和 DragDrop. 当您在控 ...

  2. 学习Css补充知识点

    1.text-transform: capitalize;UpperCase等 2.border-size:box,边框在定义的宽高范围内画,  content默认,在宽高外画.元互的宽高只指内容 3 ...

  3. 兼容安卓和ios实现一键复制内容到剪切板

    实现代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <m ...

  4. linux基础命令---df

    df 显示磁盘分区上的磁盘使用状况,可以显示出文件系统名称.大小.挂载点等信息.df显示包含每个文件名参数的文件系统上可用的磁盘空间.如果不给出文件名,则显示所有当前挂载的文件系统上可用的空间.默认情 ...

  5. nohup 命令（设置后台进程）： appending output to ‘nohup.out’ 问题

    一.Linux 下使用 nohup Unix/Linux下一般比如想让某个程序在后台运行,很多都是使用 & 在程序结尾来让程序自动运行. 比如我们要运行weblogic在后台:./startW ...

  6. ssh连接linux服务器不断开－ "Write failed: Broken pipe"

    我自己用阿里云的服务器的时候,发现ssh连上以后,一会不用就断掉了,非常不方便,服务端的系统是ubuntu. 查了些东西,原来可以去配置服务端的sshd,或者客户端的ssh,就行了. 1,配置服务器端 ...

  7. go-restful 实现一个web server

    go web server 1. 在ubuntu上安装go. 在ubuntu14.04上目前,最高的版本是golang-1.6 $ sudo apt-get install  golang-1.6 $ ...

  8. TF-调整矩阵维度 tf.reshape 介绍

    函数原型为 def reshape(tensor, shape, name=None) 第1个参数为被调整维度的张量. 第2个参数为要调整为的形状. 返回一个shape形状的新tensor 注意sha ...

  9. POJ1144 Network（割点）题解

    Description A Telephone Line Company (TLC) is establishing a new telephone cable network. They are c ...

  10. AtCoder Tenka1 Programmer Beginner Contest 解题报告

    赛时写了ABC,D实在没啥思路,然后C又难调...然后就从写完AB时的32名掉到了150+名 T_T 码力不够,思维不行,我还是AFO吧 比赛链接 A - Measure sb模拟,奇数串倒着输出偶数 ...