<!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. OAuth 白话简明教程 2.授权码模式（Authorization Code）

    转自:http://www.cftea.com/c/2016/11/6703.asp OAuth 白话简明教程 1.简述 OAuth 白话简明教程 2.授权码模式(Authorization Code ...

  2. mysql套接字文件

  3. Perl中的正则表达式(五)

    正则表达式(Regular Expression),在Perl里边通常也叫做模式(Pattern),用来表示匹配(或不匹配)某个字符串的特征模板. 使用简单模式:若模式匹配的对象是$_的内容,只要把模 ...

  4. c#: using Microsoft.Office.Interop.Excel 异常

    解决方法: Project>Reference>右键Add Reference...>Choose Microsoft Excel 15.0 Object Library

  5. Python: 正则表达式匹配反斜杠 "\"

    Python正则表达式匹配反斜杠 "\" eg: >>>a='w\w\w' 'w\\w\\w' #  打印出来的 "\\" 被转义成 一个反斜 ...

  6. Python3 简明教程

    Python是由吉多·范罗苏姆(Guido Van Rossum)在90年代早期设计.它是如今最常用的编程 语言之一.它的语法简洁且优美,几乎就是可执行的伪代码. 注意:这篇教程是特别为Python3 ...

  7. python openpyxl 2.5.4 版本 excel常用操作封装

    最近搭框架用的openpyxl 2.5.4版本,之前封装的函数有些提示不推荐使用了,我做了一些更新: 代码: # encoding=utf-8 from openpyxl import load_wo ...

  8. ES6之前模拟Map数据结构的写法

    在ES6之前JavaScript 里面本身没有map对象,但是用JavaScript的Array.Object来模拟实现Map的数据结构. 现在已经有Map对象了,这里记录一下之前的写法 Array方 ...

  9. 基于GIT的管理

    常用命令 git init : 初始化仓库git add 文件名 :把文件添加到暂存区git commit -m "操作记录" : 提交到仓库,设置相关操作的记录 git stat ...

  10. MySQL Crash Course #12# Chapter 18. Full-Text Searching

    INDEX 由于性能.智能结果等多方面原因,在搜索文本时,全文搜索一般要优于通配符和正则表达式,前者为指定列建立索引,以便快速找到对应行,并且将结果集智能排序.启用查询扩展可以让我们得到未必包含关键字 ...