【前端性能】Web 动画帧率(FPS) 计算

FPS，是 frames per second 的缩写，也就是一秒渲染了多少帧的画面。对于浏览器来说，通常 fps 为 60。
FPS = 一秒的帧数 / 1s

主要都是利用了requestAnimationFrame，使浏览器在下次重绘之前执行回调

1.使用requestAnimationFrame结合performance

const times = []; // 存储当前的时间数组
let fps;
function refreshLoop() {
  window.requestAnimationFrame(() => {
    const now = performance.now(); // 使用performance.now()能获取更高的精度
    while (times.length > 0 && times[0] <= now - 1000) {
      times.shift(); // 去掉1秒外的时间
    }
    times.push(now);
    fps = times.length;
    refreshLoop();
    console.log(fps);
  });
}

refreshLoop();

2 使用requestAnimationFrame

var before,now,fps;
before=Date.now(); // 仅对获取当前日期+时间有用。 不适用于测量时间跨度。
fps=0;
requestAnimationFrame(
    function loop(){
        now=Date.now();
        fps=Math.round(1000/(now-before));
        before=now;
        requestAnimationFrame(loop);
        console.log("fps",fps)
    }
 );