使用`requestAnimationFrame`优化JavaScript刷新率估算

嘿，我写了个简单的JavaScript函数，用requestAnimationFrame来估算屏幕刷新率——毕竟这个API本身就是跟屏幕刷新周期对齐的，用它来统计帧数再合适不过，分享给大家看看：

let frameCount = 0;
let startTime = performance.now();
let refreshRateEstimate = 0;

function estimateRefreshRate(currentTime) {
  frameCount++;
  const elapsedTime = currentTime - startTime;

  if (elapsedTime >= 1000) {
    refreshRateEstimate = frameCount;
    console.log(`Estimated refresh rate: ${refreshRateEstimate} Hz`);
    // 要是需要持续监测刷新率变化，可以重置计数器循环统计
    frameCount = 0;
    startTime = currentTime;
  }
  requestAnimationFrame(estimateRefreshRate);
}

// 启动估算
requestAnimationFrame(estimateRefreshRate);

简单唠唠逻辑：

• 先用三个变量分别存帧数、计时起点和最终估算值
• 每次requestAnimationFrame触发时，帧数加1，同时计算已经流逝的时间
• 当时间满1秒时，这段时间内的帧数就是屏幕刷新率的估算值，直接打印就行；如果想持续监测，重置计数器和起点时间就可以循环跑
• 最后一定要手动启动一次函数，不然它不会自己跑起来哦

这个方法挺轻量的，要是追求更精准的结果，可以多取几次统计结果求平均，比如连续统计3-5秒再计算平均值，数据会更稳定~

备注：内容来源于stack exchange，提问作者asmtilde