stats.js使用性能监控源码分析

这篇文章主要介绍“stats.js使用性能监控源码分析”，在日常操作中，相信很多人在stats.js使用性能监控源码分析问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”stats.js使用性能监控源码分析”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

1.性能监控

github 地址:github/mrdoob/stats.js/blob/master/src/Stats.js

• FPS 在最近一秒渲染的帧数量。数值越高，性能越好.

• MS 渲染帧所需的毫秒数。数值越低，性能越好.

• MB 占用的内存大小. (Chrome 浏览器快捷键后面添加--enable-precise-memory-info 命令)

2.fps 计算

varfps=0;varprevTime=(performance||Date).now(),frames=0;functionaaa(){frames++;vartime=(performance||Date).now();//每秒计算一次渲染帧数量if(time>=prevTime+1000){fps=(frames*1000)/(time-prevTime);console.log(fps);prevTime=time;frames=0;}window.requestAnimationFrame(aaa);}aaa();

3.ms 每个渲染帧运行需要多少毫秒

letms=0;varbeginTime=(performance||Date).now();functionbbb(){//当前时间减去开始时间ms=(performance||Date).now()-beginTime;console.log(ms);window.requestAnimationFrame(bbb);beginTime=(performance||Date).now();}bbb();

4.memory 内存占用

usedJSHeapSize已经使用的内存

jsHeapSizeLimit内存大小限制

letmb=0,mbPercent=0;letprevTime=(performance||Date).now();functionccc(){vartime=(performance||Date).now();//每秒获取一次if(time>=prevTime+1000){//获取性能里的内存相关参数，前提是performance.memory存在varmemory=performance.memory;//1M=1048576=2^20//使用了多少内存mb=memory.usedJSHeapSize/1048576;//内存占用百分比mbPercent=memory.usedJSHeapSize/memory.jsHeapSizeLimit;console.log(mb,mbPercent);}window.requestAnimationFrame(ccc);}ccc();

5.画 Canvas 的板面

创建 canvas

//name性能名称,fg颜色,bg背景Stats.Panel=function(name,fg,bg){varmin=Infinity,max=0,round=Math.round;varPR=round(window.devicePixelRatio||1);varWIDTH=80*PR,//canvas板面宽度HEIGHT=48*PR,//canvas板面高度TEXT_X=3*PR,//文本x坐标TEXT_Y=2*PR,//文本y坐标GRAPH_X=3*PR,//图表x坐标GRAPH_Y=15*PR,//图表y坐标GRAPH_WIDTH=74*PR,//图表宽度GRAPH_HEIGHT=30*PR;//图表高度//创建canvasvarcanvas=document.createElement('canvas');canvas.width=WIDTH;canvas.height=HEIGHT;canvas.style.cssText='width:80px;height:48px';varcontext=canvas.getContext('2d');//设置字体样式context.font='bold'+9*PR+'pxHelvetica,Arial,sans-serif';context.textBaseline='top';};

板面更新数值

update:function(value,maxValue){//监控过程中，最小最大值范围min=Math.min(min,value);max=Math.max(max,value);context.fillStyle=bg;context.globalAlpha=1;//清空内容重绘context.fillRect(0,0,WIDTH,GRAPH_Y);context.fillStyle=fg;//画文本，当前数值，name,最小最大值context.fillText(round(value)+''+name+'('+round(min)+'-'+round(max)+')',TEXT_X,TEXT_Y);//截取canvas之前的内容范围，往前移动，覆盖内容context.drawImage(canvas,GRAPH_X+PR,GRAPH_Y,GRAPH_WIDTH-PR,GRAPH_HEIGHT,GRAPH_X,GRAPH_Y,GRAPH_WIDTH-PR,GRAPH_HEIGHT);//清空最后的那部分context.fillRect(GRAPH_X+GRAPH_WIDTH-PR,GRAPH_Y,PR,GRAPH_HEIGHT);context.fillStyle=bg;context.globalAlpha=0.9;//画出最新的数值矩形context.fillRect(GRAPH_X+GRAPH_WIDTH-PR,GRAPH_Y,PR,round((1-value/maxValue)*GRAPH_HEIGHT));}

6.创建 Stats 板面

varmode=0;varcontainer=document.createElement('div');container.style.cssText='position:fixed;top:0;left:0;cursor:pointer;opacity:0.9;z-index:10000';//点击切换板面模式container.addEventListener('click',function(event){event.preventDefault();showPanel(++mode%container.children.length);},false);//添加canvas板面functionaddPanel(panel){container.appendChild(panel.dom);returnpanel;}//显示对应的板面模式functionshowPanel(id){for(vari=0;i<container.children.length;i++){container.children[i].style.display=i===id?'block':'none';}mode=id;

添加三种 canvas 板面

//添加索引为0的fps板面varfpsPanel=addPanel(newStats.Panel('FPS','#0ff','#002'));//添加索引为1的ms板面varmsPanel=addPanel(newStats.Panel('MS','#0f0','#020'));//如果performance.memory存在，添加索引为2的内存板面if(self.performance&&self.performance.memory){varmemPanel=addPanel(newStats.Panel('MB','#f08','#201'));}//默认显示fpsshowPanel(0);

每个板面数值的更新

varbeginTime=(performance||Date).now(),prevTime=beginTime,frames=0;//开始时间begin:function(){beginTime=(performance||Date).now();},//计算end:function(){frames++;vartime=(performance||Date).now();//ms板面的数值msPanel.update(time-beginTime,200);if(time>=prevTime+1000){//fps板面数值fpsPanel.update((frames*1000)/(time-prevTime),100);prevTime=time;frames=0;//内存板面数值更新if(memPanel){varmemory=performance.memory;//1M=1048576=2^20memPanel.update(memory.usedJSHeapSize/1048576,memory.jsHeapSizeLimit/1048576);}}returntime;},//更新update:function(){beginTime=this.end();},

7.使用 Stats

varstats=newStats();document.body.appendChild(stats.dom);functionanimate(){stats.update();window.requestAnimationFrame(animate);}animate();

到此，关于“stats.js使用性能监控源码分析”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注主机评测网网站，小编会继续努力为大家带来更多实用的文章！

上一篇：怎么在同一个类中调用带有@Transactional注解

下一篇：怎么使用React+TS+IntersectionObserver实现视频懒加载和自动播放功能

---