如何使用 JavaScript 获取当前页面帧率 FPS通过计算每秒 requestAnimationFrame 的调用

可以通过计算每秒 window.requestAnimationFrame 的调用频率来做为 FPS 值。它接收一个回调函数，该回调函数会在浏览器下一次重绘之前执行。所以只要我们循环调用并记录单位时间内的调用次数就能计算当前页面的帧率了。

效果展示

使用 JavaScript 获取当前页面帧率 FPS，在线预览HTML - 笔.COOL

实现代码

html

<p>当前FPS：<span id="fps"></span></p>

let last = Date.now();
let ticks = 0;
//循环调用 requestAnimationFrame
function rafLoop(timestamp) {
    ticks += 1;
    //每30帧统计一次帧率
    if (ticks >= 30) {
        const now = Date.now();
        const diff = now - last
        const fps = Math.round(1000 / (diff / ticks));
        last = now
        ticks = 0
        renderFps(fps);// 刷新帧率数值
    }
    requestAnimationFrame(rafLoop);
}

let fpsEl = document.getElementById('fps');
//显示帧率数值到界面上
function renderFps(fps) {
    fpsEl.textContent = fps;
}

//开始执行
rafLoop();