如何使用 JavaScript 獲取當前頁面幀率 FPS

可以通過計算每秒 window.requestAnimationFrame 的調用頻率來做爲 FPS 值。它接收一個回調函數，該回調函數會在瀏覽器下一次重繪之前執行。所以只要我們循環調用並記錄單位時間內的調用次數就能計算當前頁面的幀率了。

效果展示

在線預覽 - 使用 JavaScript 獲取當前頁面幀率 FPS

實現代碼

html:

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

js:

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();