瀏覽器計算FPS

轉自：https://www.ccc5.cc/2534.html

FPS的概念隨手一搜有很多，簡單來講，就是一秒鐘內渲染了多少次畫面。

在瀏覽器裏面，瀏覽器渲染一次頁面是有回調的requestAnimationFrame，

那麼計算FPS就是計算: 1÷兩次渲染的時差，這事好辦呀：

function calcFps(){
    let lastTime = Date.now();
    (function loop(){
        const now = Date.now()
        const fps = Math.round(1 / ((now - lastTime) / 1000))
        console.log('fps:', fps)
        lastTime = now
        requestAnimationFrame(loop)
    })()
}

現在的實現是每次渲染都計算下FPS是多少，變化太快，我們加入更新頻率：

function calcFps(debounce = 1000){
    let lastTime = Date.now();
    let count = 0; // 記錄decounce週期內渲染次數
    (function loop(){
        count++
        const now = Date.now()
        if( now - lastTime > debounce){
            const fps = Math.round(count / ((now - lastTime) / 1000))
            lastTime = now
            count = 0
            console.log('fps:', fps)
        }
        requestAnimationFrame(loop)
    })()
}