[教程]前端使用JS准确计算网页的帧数 FPS

对于前端开发者来说，计算屏幕帧数无疑是一个非常重要的问题。 随着互联网的普及和html5技术的不断发展，越来越多的网站和应用程序需要在前端进行大量的动画渲染。 如何保证动画的流畅度和效果以及计算屏幕帧数成为了必须掌握的技术。

在JavaScript中，计算屏幕帧数的方法主要是通过统计浏览器在两个时间点之间更新页面的次数。 具体地在每个页面重绘之前获取当前时间戳，然后在重绘之后获取时间戳。 通过两个时间戳的差值可以计算出每秒的重绘次数，从而获得屏幕帧数。

那么，这个方法正确吗？ 答案是肯定的。 事实上，这种方法已经广泛应用于前端性能监控和优化中。 例如，Chrome浏览器提供的Performance api包含一个performance.now()方法来获取当前时间戳，然后使用requestAnimationFrame()函数来计算每秒的帧数（FPS），就能可以帮助开发者实现类似的帧率监控功能了，代码如下：

let fps = 0; // 初始化帧数为0
const frameCounts = []; // 存放每次更新后的帧数
function calculateFPS() {
    const now = performance.now(); // 获取当前时间
    if (frameCounts.length >= 10) {
        const lastTimeStamp = frameCounts[0]; // 最早记录的时间戳
        // 计算两个时间戳之间经过了多少毫秒
        const elapsedMilliseconds = now - lastTimeStamp;
        // 将毫秒转换成秒并乘以60得到每分钟的帧数
        fps = Math.round(frameCounts.length / (elapsedMilliseconds / 1000));
        // 移除最早记录的时间戳
        frameCounts.shift();
    } else {
        frameCounts.push(now);
    }
}
// 定义一个动画循环函数
function animateLoop() {
    requestAnimationFrame(() => {
        calculateFPS();
        console.log("当前帧数：" + fps);
        animateLoop();
    });
}
animateLoop();

这段代码会不断地调用calculateFPS()函数来计算帧数，然后通过控制台输出结果。

如果大家常用vue框架，可以直接使用以下代码：

import { shallowRef } from "vue";
export const useFps = () => {
  const fps = shallowRef(0);
  let now = performance.now();
  const renderFps = () => {
    const nextFrame = performance.now();
    fps.value = 1000 / (nextFrame - now);
    now = nextFrame;
    requestAnimationFrame(renderFps);
  };
  requestAnimationFrame(renderFps);
  return { fps };
};

以上代码仅供参考，具体请根据使用场景而定。