JavaScript：获取帧率FrameUtil.js

代码

1. 设置一个帧率类

   /*
     FPS 每秒传输帧数(Frames Per Second)
     FPS = 一秒走过的帧数
   */
   
   class FrameUtil {
       constructor(){
           // 1. 当前的帧序号 —— 总帧数
           this.currentFrame = 0;
           // 2. FPS
           this.realFps = 0;
           // 3. 起始帧 —— 记录每一秒的开始帧和开始时间
           this.sFrame = 0;
           this.sTime = new Date();
       }
   
       /**
        * 更新
        */
       update(){
           // 1. 当前的帧序号++
           this.currentFrame++;
           // 2. 判断sTime是否走过了1s
           let t = new Date();
           // 3. 判断
           if(t - this.sTime >= 1000){
               // 3.1 计算FPS
               this.realFps = this.currentFrame - this.sFrame;
               // 3.2 更新起始帧和起始时间
               this.sFrame = this.currentFrame;
               this.sTime = t;
           }
       }
   }
   

使用

1. 引入FrameUtil.js
2. 实例化帧类

   let frameUtil= new FrameUtil();
   

3. 获取初始FPS

   let FPS = frameUtil.realFps || 60;
   

4. 开启定时器，时间为一帧走过的时间
   在这里时间之所以是一帧走过的时间，是因为在帧类update()方法中，是currentFrame++
   也就是说，走过一帧，更新一次。

   timer = setInterval(()=>{
      
   }, 1000 / this.fps);
   

5. 在定时器内部，不断执行update方法，即可不断更新帧对象FPS，并获取FPS和FNO

   timer = setInterval(()=>{
      frameUtil.update();
      let currentFPS = frameUtil.realFps;
      let currentFNO = frameUtil.currentFrame;
   }, 1000 / this.fps);