前端监测浏览器渲染帧率fps

在前端性能优化中，尤其是动画绘制中，我们需要关注浏览器的渲染频率FPS（每秒传输帧数(Frames Per Second)）,在Chrome浏览器上我们可以通过Performance 查看渲染Fps：

在前端性能检测需求中，我们可以计算浏览器的渲染帧数。

实现思路

1. window.requestAnimationFrame()是我们写动画经常使用的方法，根据浏览器的的渲染频率绘制页面，减少不必要的计算和动画绘制过程，requestAnimationFrame（）方法的调用频率就是我们需要的fps
2. 我们使用`window.performance.now()获取当前的时间，根据下一次绘制时间计算时间间隔，计算fps
3. 通过canvas绘制计算结果到页面上

window.performance.now()：

• 返回的时间戳不受一毫米精度的限制，使用的浮点数精确到微秒级别的精确度。
• 是一个以恒定速率增加的，不受系统时间的影响
• performance.timing.navigationStart + performance.now() 约等于 Date.now()

实现过程

<canvas id="_fps_canvas"></canvas>
<script>
  let canvas = document.getElementById('_fps_canvas');
  let ctx = canvas && canvas.getContext('2d');
  if(!ctx) {
    console.info("浏览器不支持canvas")
  } else {
    let lastTime = 0;  
    let fpsInterVal = 30; // fps监听间隔次数
    let fpsCount = 0; // fps监听间隔计数
    let fps = 0; // fps值
    let getFps = function() {
      fpsCount++;
      let nowTime = performance.now();
      if(fpsCount >= fpsInterVal) {
        fps = Math.round(1000 * fpsCount  / ( nowTime - lastTime ));
        lastTime = nowTime;
        fpsCount = 0;
      }      
      return fps;
    }    
      
    let clearCanvas = function() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
    }

    let startDraw = function(time) {
      clearCanvas();
      ctx.font = "22px serif";
      ctx.fillStyle = "#558abb";
      ctx.fillText(getFps() + ' fps', 10, 20);
      window.requestAnimationFrame(startDraw)
    }
    
    startDraw();
  }

</script>

为了减少页面绘制过程，我们使用类似节流的方式，通过 fpsCount 属性设置绘制到页面的频率，减少因为绘制过快导致页面字体闪烁。