<!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. 019-centos的yum用法

    1.检测系统是否已经安装过mysql或其依赖:# yum list installed | grep mysql(当然也可以用 rpm -qa | grep mysql) 2.卸载已经存在的mysql ...

  2. python+Django框架运用（三）

    Django模型 模式指的是根据数据库中数据表的结构来创建出来的class,每一张表到Python中就是一个 class,表中的每一个列,到Python中就是class的一个属性. 在模型中可以完成对 ...

  3. vue的双向数据绑定原理

    原理. vue是采用数据劫持结合发布者-订阅者模式的方式, 通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回 ...

  4. Java求解迷宫问题：栈与回溯算法

    摘要: 使用栈的数据结构及相应的回溯算法实现迷宫创建及求解,带点JavaGUI 的基础知识. 难度: 中级 迷宫问题是栈的典型应用,栈通常也与回溯算法连用. 回溯算法的基本描述是: (1)  选择一个 ...

  5. linux常用命令：which 命令

    我们经常在linux要查找某个文件,但不知道放在哪里了,可以使用下面的一些命令来搜索: which  查看可执行文件的位置. whereis 查看文件的位置. locate   配合数据库查看文件位置 ...

  6. 20165207 2017-2018-2《Java程序设计》课程总结

    20165207 2017-2018-2<Java程序设计>课程总结 每周作业链接汇总 预备作业1:我期望的师生关系 预备作业2:学习基础与C语言调查反馈 预备作业3:Linux安装与命令 ...

  7. ACM竞赛之输入输出（以C与C++为例）

    本文转自互联网,内容.排版有修正. 欢迎和大家交流技术相关问题: 邮箱: jiangxinnju@163.com 博客园地址: http://www.cnblogs.com/jiangxinnju G ...

  8. ThinkPHP CURD mysql操作

    ThinkPHP CURD操作 ThinkPHP提供了灵活和方便的数据操作方法,对数据库操作的四个基本操作(CURD):创建.更新.读取和删除的实现是最基本的,也是必须掌握的,在这基础之上才能熟悉更多 ...

  9. Unity3D之预设

      预设的两个特性: 1.重用性.可以使我们快速方便的创建大量的重复性资源.这种创建是通过预设的实例化Instance操作来完成的 在Hierarchy视图中将实例物理添加到Assests中,此时图标 ...

  10. logistic回归和softmax回归

    logistic回归 在 logistic 回归中,我们的训练集由  个已标记的样本构成:.由于 logistic 回归是针对二分类问题的,因此类标记 . 假设函数(hypothesis functi ...