在网页开发过程中，页面帧率FPS是衡量渲染流畅度的核心指标，通常来说FPS稳定在60左右时用户能感受到丝滑的交互体验，低于30就容易出现明显的卡顿感。准确计算FPS并进行性能监测，是优化页面渲染性能的重要前提。
FPS计算的核心原理
FPS指的是每秒渲染的帧数，浏览器的渲染频率通常是每秒60次，也就是每次渲染的间隔大约是16.7毫秒。我们可以通过统计单位时间内requestAnimationFrame的回调执行次数，来计算实际的渲染帧率。
requestAnimationFrame会在浏览器每次准备渲染下一帧时执行回调，它的执行频率和浏览器的渲染频率保持一致，因此用它来计算FPS比其他定时器更准确。
基础FPS计算实现方法
我们可以通过记录两次requestAnimationFrame回调的时间差，累加帧数，达到1秒统计一次帧率的逻辑，具体实现代码如下：
// 定义FPS计算相关变量
let frameCount = 0; // 累计帧数
let lastTime = performance.now(); // 上一次统计的时间
let currentFPS = 0; // 当前FPS值
// FPS计算函数
function calculateFPS() {
frameCount++;
const now = performance.now();
// 时间差达到1000毫秒（1秒）时统计一次FPS
if (now - lastTime >= 1000) {
currentFPS = frameCount;
frameCount = 0;
lastTime = now;
console.log('当前页面FPS:', currentFPS);
}
// 继续下一帧的回调
requestAnimationFrame(calculateFPS);
}
// 启动FPS计算
requestAnimationFrame(calculateFPS);
优化后的FPS监测方案
基础的FPS计算只能拿到瞬时值，实际监测中我们往往需要更稳定的数值，以及更完善的统计能力，优化后的实现可以加入平均FPS计算、异常帧记录等功能：
class FPSMonitor {
constructor() {
this.frameCount = 0;
this.lastTime = performance.now();
this.fpsList = []; // 存储每次统计的FPS
this.maxFPS = 0;
this.minFPS = Infinity;
this.avgFPS = 0;
}
start() {
const loop = () => {
this.frameCount++;
const now = performance.now();
const diff = now - this.lastTime;
if (diff >= 1000) {
const fps = Math.round((this.frameCount * 1000) / diff);
this.frameCount = 0;
this.lastTime = now;
// 更新统计数据
this.fpsList.push(fps);
if (fps > this.maxFPS) this.maxFPS = fps;
if (fps < this.minFPS) this.minFPS = fps;
// 计算平均FPS
this.avgFPS = Math.round(this.fpsList.reduce((a, b) => a + b, 0) / this.fpsList.length);
console.log(`当前FPS:${fps}, 平均FPS:${this.avgFPS}, 最高:${this.maxFPS}, 最低:${this.minFPS}`);
// 如果FPS过低，输出警告
if (fps < 30) {
console.warn('当前页面FPS过低，可能存在性能问题');
}
}
requestAnimationFrame(loop);
};
requestAnimationFrame(loop);
}
// 获取统计结果
getStats() {
return {
maxFPS: this.maxFPS,
minFPS: this.minFPS,
avgFPS: this.avgFPS,
fpsList: this.fpsList
};
}
}
// 使用示例
const monitor = new FPSMonitor();
monitor.start();
其他HTML性能监测方法
除了计算FPS，HTML环境下还有很多其他性能监测手段，可以配合FPS数据一起定位问题：
- 使用
performance.timingAPI获取页面加载各阶段的耗时，包括DNS查询、TCP连接、DOM解析等时间 - 通过
PerformanceObserver监听长任务，当单个任务执行时间超过50毫秒时记录，这类长任务是导致FPS下降的常见原因 - 利用
performance.memory获取页面内存使用情况，内存泄漏也会导致页面渲染性能下降
长任务监测示例代码
// 监听长任务
const observer = new PerformanceObserver((list) => {
const entries = list.getEntries();
entries.forEach(entry => {
console.log('发现长任务，耗时:', entry.duration, '毫秒');
console.log('长任务开始时间:', entry.startTime);
});
});
// 订阅长任务类型的性能条目
observer.observe({ entryTypes: ['longtask'] });
注意事项
在计算FPS时需要注意，requestAnimationFrame在页面处于后台运行时会暂停执行，因此统计到的FPS在页面切到后台后会变为0，这是正常表现，不需要特殊处理。另外，FPS统计本身也会占用少量性能，不要过于频繁地输出统计结果，避免影响页面本身的渲染性能。
如果需要在生产环境做性能监测，可以把统计到的FPS、长任务等数据上报到服务端，结合用户设备、网络环境等信息分析性能瓶颈，针对性做优化。
FPSHTMLperformance_monitoringrequestAnimationFrame修改时间：2026-07-17 11:39:25