javascript 获取浏览器fps

一、前言

帧率在某些需求下是需要提前获取的，因为不同设备屏幕的刷新率不同，常见的有60hz，获取帧率推荐使用兼容性比较好的Window.requestAnimationFrame()，不同浏览器厂商提供的BOM API（注意此功能为browser提供）会不同。

二、获取代码

原理：先执行loop内的方法，直到animationFrame执行的时候，即是下一帧回调，再将loop执行，然后又走到直到animationFrame执行的时候，实现递归。

var animationFrame = (function () {
  return (
    window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    function (callback) {
      window.setTimeout(callback, 1000 / 60);
    }
  );
})();

var frame = 0;
var allFrameCount = 0;
var lastTime = Date.now();
var lastFameTime = Date.now();

var loop = function () {
  var now = Date.now();
  var fs = now - lastFameTime;
  var fps = Math.round(1000 / fs); // fps可能会有一定误差

  lastFameTime = now;
  // 不置 0，在动画的开头及结尾记录此值的差值算出 FPS
  allFrameCount++;
  frame++;

  if (now > 1000 + lastTime) {
    var fps = Math.round((frame * 1000) / (now - lastTime)); // 毫秒取整 保证精确值
    console.log(`${new Date()} 1S内 FPS：`, fps);
    frame = 0;
    lastTime = now;
  }

  animationFrame(loop);
};

loop();

三、拓展

如果需要监听浏览器刷新率，可以测一段时间内的刷新率，比如10s，但是也要注意，如果页面10s没有测出fps，需要用window.cancelAnimationFrame()来取消。