Stats.js是一款JavaScript性能监控器，可以测试webgl代码的渲染性能。-BFW插件库

Stats.js是一款JavaScript性能监控器，可以测试webgl代码的渲染性能。

使用方式：

第一步插件

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/Stats-16.js"></script>

第二步配置参数

构造函数Stats

//创建stats对象

var myStats=new Stats();

界面输出控制

使用构造函数Stats创建对象时，构造函数中的Javascript代码默认创建一个id是stats的div元素，默认位置页面左上角，如果想设置界面的显示效果，可以修改stats源码

//把stats创建的div元素插入页面，domElement是对象的属性，属性值就是stats创建的div元素

document.getElementById("body").appendChild(myStats.domElement);

stats方法setMode(mode)

可以已通过setMode()方法的参数mode的数值设置首次打开页面，测试结果的显示模式，鼠标单击可以更换不同的显示模式

setMode参数mode默认值为0

设置测试结果显示模式为MS

myStats.setMode（1）;

参数mode 模式意义

0 FPS 刷新频率,一秒渲染次数

1 MS 刷新周期，渲染一次时间

stats方法update()

//requestAnimationFrame循环调用的函数中调用方法update()，来刷新时间

myStats.update();

示例代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />
    <title>BFW NEW PAGE</title>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/Stats-16.js"></script>

    <style>
    </style>
</head>

<body>
    <script type="text/javascript">
        var stats = new Stats();
    stats.showPanel( 1 ); // 0: fps, 1: ms, 2: mb, 3+: custom
    document.body.appendChild( stats.domElement );
    
    function animate() {
    
    	stats.begin();
    
    	// monitored code goes here
    
    	stats.end();
    
    	requestAnimationFrame( animate );
    
    }
    
    requestAnimationFrame( animate );
    </script>
</body>

</html>

github地址：https://github.com/mrdoob/stats.js