浏览器计算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)
    })()
}