<!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. webapi swagger学习笔记

    版权声明:部分摘抄其他博主朋友的博文内容,旨在分享学习,如给您带来不便,请原谅.原文地址 http://www.cnblogs.com/yanweidie/p/5709113.html#_label3 ...

  2. Groovy中的闭包

    Closures(闭包) 本节主要讲groovy中的一个核心语法:closurs,也叫闭包.闭包在groovy中是一个处于代码上下文中的开放的,匿名代码块.它可以访问到其外部的变量或方法. 1. 句法 ...

  3. 基于Axis1.4的webservice接口开发（代码开发）

    基于Axis1.4的webservice接口开发(代码开发) 一.开发环境: 我的开发环境是MyEclipse 2015+Apache-Tomcat-8.0.21. 二.代码开发: 1.新建一个Web ...

  4. OVS中的key解析

    OVS在处理每条流的时候,先根据每条流生产相应的key,然后根据key匹配相应的流表,根据流表中的action操作来处理每条流,本文对key的结构体进行分析,看看对于一条流会提出那些特征信息.对于ke ...

  5. Python 线程调用

    简介: Python 线程可以通过主线程,调用线程来执行其他命令, 为Python提供更方便的使用. 并发线程测试 # 命令调用方式 import threading,time # 定义每个线程要运行 ...

  6. 20145330 《网络对抗》 Web安全基础实践

    20145330 <网络对抗> Web安全基础实践 1.实验后回答问题 (1)SQL注入攻击原理,如何防御 SQL注入,就是通过把SQL命令插入到Web表单提交或输入域名或页面请求的查询字 ...

  7. linux内核分析 1、2章读书笔记

    一.linux历史 20世纪60年代,MIT开发分时操作系统(Compatible TIme-Sharing System),支持30台终端访问主机: 1965年,Bell实验室.MIT.GE(通用电 ...

  8. Spring DBCP用xml和properties2种格式配置DataSource

    Spring提供数据库连接池:DBCP配置DataSource并且获取连接完成数据库操作: Spring帮助文档的地址: http://static.springsource.org/spring/d ...

  9. Python3基础 list 推导式 生成与已知列表等长度+元素为0的列表

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...

  10. P2894 [USACO08FEB]酒店Hotel 线段树

    题目大意 多次操作 查询并修改区间内长度==len的第一次出现位置 修改区间,变为空 思路 类似于求区间最大子段和(应该是这个吧,反正我没做过) 维护区间rt的 从l开始向右的最长长度 从r开始向左的 ...