大家好，我是前端西瓜哥。今天来聊聊如何计算浏览器页面的渲染帧数。
要完成这个任务，我们需要借助一个叫做requestAnimationFrame的方法。
什么是requestAnimationFrame呢？
requestAnimationFrame是一种浏览器提供的API，它接受一个回调函数，并在浏览器下一次重绘页面之前调用这个回调函数。我们通常用raf来简称requestAnimationFrame。
使用方式如下：
javascript
const id = window.requestAnimationFrame((timestamp) => {
// 回调函数会在浏览器下一次重绘前执行
// 这里可以放置你的代码逻辑
});
回调函数会接收到一个高精度的时间戳，称为DOMHighResTimeStamp，这个时间戳表示的是回调函数执行时的时间点。它的单位是毫秒，并且具有很高的小数点精度。值得注意的是，这个时间戳并不是从应用启动就累计的时间，而是从浏览器页面加载完成后开始计算的时间。
我们还可以利用cancelAnimationFrame方法来取消之前通过requestAnimationFrame请求的任务，只需要提供由requestAnimationFrame返回的id即可：
javascript
cancelAnimationFrame(id);
接下来我们来谈谈FPS（Frames Per Second），也就是每秒渲染的帧数。通常浏览器的FPS为60。我们可以通过requestAnimationFrame来实时计算FPS。每次页面重绘前，都会调用requestAnimationFrame的回调函数，我们可以通过统计在一定时间（比如1秒）内回调函数的调用次数来计算FPS。当时间间隔超过1秒时，我们就读取这个计数并重置它。实现方法如下：
javascript
let count = 0; // 记录调用回调函数的次数
let prevTimestamp = null; // 记录上一次的时间戳
function showFPS(fps) { // 显示FPS的函数，可以将fps值输出到某个DOM元素上或控制台中
console.log(fps); // 输出FPS值到控制台中
