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

原创

伯爵

修改于 2020-05-21 17:54:07

3.1K0

修改于 2020-05-21 17:54:07

文章被收录于专栏：前端小菜鸟

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

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

实现思路

window.requestAnimationFrame()是我们写动画经常使用的方法，根据浏览器的的渲染频率绘制页面，减少不必要的计算和动画绘制过程，requestAnimationFrame（）方法的调用频率就是我们需要的fps
我们使用`window.performance.now()获取当前的时间，根据下一次绘制时间计算时间间隔，计算fps
通过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属性设置绘制到页面的频率，减少因为绘制过快导致页面字体闪烁。

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

渲染