動畫其實是由一幀一幀的圖像構成的。有 Web 動畫那么就會存在該動畫在播放運行時的幀率。而幀率在不同設備不同情況下又是不一樣的。

[[345185]]

有的時候，一些復雜SVGA或者CSS動畫，我們需要實時監控它們的幀率，或者說是需要知道它們在不同設備的運行狀況，從而更好的優化它們。

流暢的標準
首先，理清一些概念。FPS 表示的是每秒鐘畫面更新次數。我們平時所看到的連續畫面都是由一幅幅靜止畫面組成的，每幅畫面稱為一幀，FPS 是描述“幀”變化速度的物理量。

理論上說，FPS 越高，動畫會越流暢，目前大多數設備的屏幕刷新率為 60 次/秒，所以通常來講 FPS 為 60 frame/s 時動畫效果最好，也就是每幀的消耗時間為 (1000/60) 16.67ms。

當然，經常玩 FPS 游戲的朋友肯定知道，吃雞/CSGO 等 FPS 游戲推薦使用 144HZ 刷新率的顯示器，144Hz 顯示器特指每秒的刷新率達到 144Hz 的顯示器。相較于普通顯示器每秒60的刷新速度，畫面顯示更加流暢。因此144Hz顯示器比較適用于視角時常保持高速運動的第一人稱射擊游戲。

不過，這個只是顯示器提供的高刷新率特性，對于我們 Web 動畫而言，是否支持還要看瀏覽器，而大多數瀏覽器刷新率為 60 次/秒。

直觀感受，不同幀率的體驗：

• 幀率能夠達到 50 ～ 60 FPS 的動畫將會相當流暢，讓人倍感舒適；
• 幀率在 30 ～ 50 FPS 之間的動畫，因各人敏感程度不同，舒適度因人而異；
• 幀率在 30 FPS 以下的動畫，讓人感覺到明顯的卡頓和不適感；
• 幀率波動很大的動畫，亦會使人感覺到卡頓。

那么我們該如何通過JS來模擬獲取我們頁面動畫當前的 FPS 值呢？

requestAnimationFrame
requestAnimationFrame 大家應該都不陌生，方法告訴瀏覽器您希望執行動畫并請求瀏覽器調用指定的函數在下一次重繪之前更新動畫。

// 語法 
window.requestAnimationFrame(callback); 

 當你準備好更新屏幕畫面時你就應用此方法。這會要求你的動畫函數在瀏覽器下次重繪前執行。回調的次數常是每秒 60 次，大多數瀏覽器通常匹配 W3C 所建議的刷新率。

使用 requestAnimationFrame 計算 FPS 原理 原理是，正常而言 requestAnimationFrame 這個方法在一秒內會執行 60 次，也就是不掉幀的情況下。假設動畫在時間 A 開始執行，在時間 B 結束，耗時 x ms。而中間 requestAnimationFrame 一共執行了 n 次，則此段動畫的幀率大致為：n / (B - A)。

核心代碼如下，能近似計算每秒頁面幀率，以及我們額外記錄一個 allFrameCount，用于記錄 rAF 的執行次數，用于計算每次動畫的幀率 ：

var rAF = function () { 
    return ( 
        window.requestAnimationFrame || 
        window.webkitRequestAnimationFrame || 
        function (callback) { 
            window.setTimeout(callback, 1000 / 60); 
        } 
    ); 
}(); 
   
var frame = 0; 
var allFrameCount = 0; 
var lastTime = Date.now(); 
var lastFameTime = Date.now(); 
   
var loop = function () { 
    var now = Date.now(); 
    var fs = (now - lastFameTime); 
    var fps = Math.round(1000 / fs); 
   
    lastFameTime = now; 
    // 不置 0，在動畫的開頭及結尾記錄此值的差值算出 FPS 
    allFrameCount++; 
    frame++; 
   
    if (now > 1000 + lastTime) { 
        var fps = Math.round((frame * 1000) / (now - lastTime)); 
        console.log(`${new Date()} 1S內 FPS：`, fps); 
        frame = 0; 
        lastTime = now; 
    }; 
   
    rAF(loop); 
} 
  
loop(); 

如果我們需要統計某個特定動畫過程的幀率，只需要在動畫開始和結尾兩處分別記錄 allFrameCount 這個數值大小，再除以中間消耗的時間，也可以得出特定動畫過程的 FPS 值。

值得注意的是，這個方法計算的結果和真實的幀率肯定是存在誤差的，因為它是將每兩次主線程執行 javascript 的時間間隔當成一幀，而非上面說的主線程加合成線程所消耗的時間為一幀。但是對于現階段而言，算是一種可取的方法。

適當美化一下

import BUS from 'event-bus'; 
 
// 計算性能指標 
(() => { 
    const createConsole = (desc, val) => console.log( 
        `%c${desc}`, 
        'color:#fff;background:red;padding:2px 6px;border-radius:3px;', 
        val); 
 
    window.addEventListener('load', () => { 
        const timing = performance.timing; 
        createConsole('DNS 解析耗時', timing.domainLookupEnd - timing.domainLookupStart); 
        createConsole('TCP連接耗時', timing.connectEnd - timing.connectStart); 
        createConsole('網絡請求耗時', timing.responseStart - timing.requestStart); 
        createConsole('數據傳輸耗時', timing.responseEnd - timing.requestStart); 
        createConsole('頁面首次渲染時間', timing.responseEnd - timing.navigationStart); 
        createConsole('首次可交互時間', timing.domInteractive - timing.navigationStart); 
        createConsole('DOM解析耗時', timing.domInteractive - timing.responseEnd); 
        createConsole('DOM構建耗時', timing.domComplete - timing.domInteractive); 
        createConsole('HTML 加載完成,DOM Ready', timing.domContentLoadedEventEnd - timing.navigationStart); 
        createConsole('頁面完全加載耗時', timing.loadEventStart - timing.navigationStart); 
    }); 
})(); 
 
 
// FPS檢測 
(() => { 
    const limit = 3;                        // 出現低FPS的連續次數上限 
    const below = 20;                       // 可容忍的最低FPS 
    const updateInterval = 2 * 1000;        // 檢測幀率的間隔時間 
    let updateTimer = 0;                    // 已經過去的時間 
    let count = 0; 
 
    let lastTime = performance.now(); 
    let frame = 0; 
    let lastFameTime = performance.now(); 
    const loop = () => { 
        frame += 1; 
        const now = performance.now(); 
        const fs = (now - lastFameTime); 
        lastFameTime = now; 
        updateTimer += fs || 0; 
        if (updateTimer < updateInterval) { 
            window.requestAnimationFrame(loop); 
            return; 
        } 
        updateTimer = 0; 
 
        let fps = 0; 
        fps = Math.round(1000 / fs); 
        if (now > 1000 + lastTime) { 
            fps = Math.round((frame * 1000) / (now - lastTime)); 
            frame = 0; 
            lastTime = now; 
        } 
        if (fps < below) { 
            count += 1; 
            if (count >= limit) { 
                console.log('網頁卡頓', `連續${count}次FPS低于${below}，當前FPS為${fps}`); 
                BUS.trigger('fps-low');    // 關閉一些JS動畫 
            } 
        } else { 
            count = 0; 
        } 
        window.requestAnimationFrame(loop); 
    }; 
 
    loop(); 
})(); 

參考
Web 動畫幀率（FPS）計算：https://www.cnblogs.com/coco1s/p/8029582.html