可以通過計算每秒 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();