FPS，是 frames per second 的縮寫(xiě)，也就是一秒渲染了多少幀的畫(huà)面。對(duì)于瀏覽器來(lái)說(shuō)，通常 fps 為 60。
FPS = 一秒的幀數(shù) / 1s

主要都是利用了requestAnimationFrame，使瀏覽器在下次重繪之前執(zhí)行回調(diào)

1.使用requestAnimationFrame結(jié)合performance

const times = []; // 存儲(chǔ)當(dāng)前的時(shí)間數(shù)組
let fps;
function refreshLoop() {
  window.requestAnimationFrame(() => {
    const now = performance.now(); // 使用performance.now()能獲取更高的精度
    while (times.length > 0 && times[0] <= now - 1000) {
      times.shift(); // 去掉1秒外的時(shí)間
    }
    times.push(now);
    fps = times.length;
    refreshLoop();
    console.log(fps);
  });
}

refreshLoop();

2 使用requestAnimationFrame

var before,now,fps;
before=Date.now(); // 僅對(duì)獲取當(dāng)前日期+時(shí)間有用。 不適用于測(cè)量時(shí)間跨度。
fps=0;
requestAnimationFrame(
    function loop(){
        now=Date.now();
        fps=Math.round(1000/(now-before));
        before=now;
        requestAnimationFrame(loop);
        console.log("fps",fps)
    }
 );