流暢動畫的標(biāo)準(zhǔn)

首先，理清一些概念。FPS 表示的是每秒鐘畫面更新次數(shù)。我們平時所看到的連續(xù)畫面都是由一幅幅靜止畫面組成的，每幅畫面稱為一幀，F(xiàn)PS 是描述“幀”變化速度的物理量。

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

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

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

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

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

OK，那么我們該如何準(zhǔn)確的獲取我們頁面動畫當(dāng)前的 FPS 值呢？

法一：借助 Chrome 開發(fā)者工具

Chrome 提供給開發(fā)者的功能十分強大，在開發(fā)者工具中，我們進行如下選擇調(diào)出FPS meter選項：

通過這個按鈕，可以開啟頁面實時 Frame Rate (幀率) 觀測及頁面 GPU 使用率。

缺點：

• 這個只能一次觀測一到幾個頁面，而且需要人工實時觀測
• 數(shù)據(jù)只能是主觀感受，并沒有一個十分精確的數(shù)據(jù)不斷上報或者被收集

因此，我們需要更加智能的方法。

法二：借助 Frame Timing API

在介紹下面這種方法前，繼續(xù)做一些基礎(chǔ)知識的科普。

Blink 內(nèi)核早期架構(gòu)

以 Chrome 瀏覽器內(nèi)核 Blink 渲染頁面為例。對早期的 Chrome 瀏覽器而言，每個頁面 Tab 對應(yīng)一個獨立的 renderer 進程，Renderer 進程中包含了主線程和合成線程。早期 Chrome 內(nèi)核架構(gòu)：

其中，主線程主要負(fù)責(zé)：

• Javascript 的計算與執(zhí)行
• CSS 樣式計算
• Layout 計算
• 將頁面元素繪制成位圖（paint），也就是光柵化（Raster）
• 將位圖給合成線程

合成線程則主要負(fù)責(zé)：

• 將位圖(GraphicsLayer 層)以紋理(texture)的形式上傳給 GPU
• 計算頁面的可見部分和即將可見部分（滾動）
• CSS 動畫處理
• 通知 GPU 繪制位圖到屏幕上

OK，云里霧里的，什么東西。其實知道了這兩個線程之后，下一個概念是厘清 CSS 動畫與 JS 動畫的細(xì)微區(qū)別（當(dāng)然它們都是 Web 動畫）。

JS 動畫與 CSS 動畫的細(xì)微區(qū)別

對于 JS 動畫而言，它們運行時的幀率即是主線程和合成線程加起來消耗的時間。對于流暢動畫而言，我們希望它們每一幀的耗時保持在 16.67ms 之內(nèi);

而對于 CSS 動畫而言，由于其流程不受主線程的影響，所以希望能得到合成線程的消耗的時間，而合成線程的繪制頻率也反映了滾動和 CSS 動畫的流程性。

上面主要想得出的一個結(jié)論是。如果我們能夠知道主線程和合成線程每一幀消耗的時間，那么我們就能大致得出對應(yīng)的 Web 動畫的幀率。那么上面說到的Frame Timing API是否可以幫助我們拿到這個時間點呢。

什么是 Frame Timing API ？

Frame Timing API 是 Web Performance Timing API 標(biāo)準(zhǔn)中的其中一位成員。

Web Performance Timing API是 W3C 推出的一套性能API 標(biāo)準(zhǔn)，用于幫助開發(fā)者對網(wǎng)站各方面的性能進行精確的分析與控制，提升 Web 網(wǎng)站性能。

它包含許多子類 API，完成不同的功能，大致如下（摘自使用性能API快速分析web前端性能，當(dāng)然你也可以看英文原版介紹：Web Performance Timing API）：

怎么使用呢？以Navigation Timing, Performance Timeline, Resource Timing為例子，對于兼容它的瀏覽器，它以只讀屬性的形式對外暴露掛載在window.performance上。

在調(diào)試臺 console 中打印window.performance，查看其中的 timing 屬性：

這對象內(nèi)一連串的變量表示什么呢，它表示我們頁面整個加載過程中每一個重要的時間點，可以詳細(xì)看看這張圖：

通過這張圖以及上面的window.performance.timing，我們就可以輕松的統(tǒng)計出頁面每個重要節(jié)點的耗時，這就是Web Performance Timing API的強大之處，感興趣的可以詳細(xì)去研究研究，使用在頁面統(tǒng)計上。

Frame Timing API 示意

好的，終于可以回歸正題，借助Web Performance Timing API中的Frame Timing API，可以輕松的拿到每一幀中，主線程以及合成線程的時間。或者更加容易，直接拿到每一幀的耗時。

獲取 Render 主線程和合成線程的記錄，每條記錄包含的信息基本如下，代碼示意，（參考至Developer feedback needed: Frame Timing API）：

var rendererEvents = window.performance.getEntriesByType("renderer");
var compositeThreadEvents = window.performance.getEntriesByType("composite");

或者是：

var observer = new PerformanceObserver(function(list) {
    var perfEntries = list.getEntries();
    for (var i = 0; i < perfEntries.length; i++) {
        console.log("frame: ", perfEntries[i]);
    }
});
 
// subscribe to Frame Timing
observer.observe({entryTypes: ['frame']});

每條記錄包含的信息基本如下：

{
  sourceFrameNumber: 120,
  startTime: 1342.549374253
  cpuTime: 6.454313323
}

每個記錄都包括唯一的 Frame Number、Frame 開始時間以及 cpuTime 時間。通過計算每一條記錄的 startTime ，我們就可以算出每兩幀間的間隔，從而得到動畫的幀率是否能夠達(dá)到 60 FPS。

不過！看看Web Performance Timing API整體的兼容性：

Frame Timing API 雖好，但是，現(xiàn)在Frame Timing API的兼容性不算很友好，額，不友好到什么程度呢。還沒有任何瀏覽器支持，處于實驗性階段，屬于面向未來編程。這你 TM 逗我呢？說了這么久完全不能用.....

法三：借助 requestAnimationFrame API

費了這么多筆墨描述 Frame Timing API 但最后因為兼容性問題完全沒辦法使用。不過不代表這么長篇幅的描述沒有用，從上面的介紹，我們得知，如果我們可以到得到每一幀中的固定一個時間點，那么兩者相減，也能夠近似得到一幀所消耗的時間。

那么，我們再另辟蹊徑。這次，我們借助兼容性不錯的 requestAnimationFrame API。

// 語法
window.requestAnimationFrame(callback);

requestAnimationFrame大家應(yīng)該都不陌生，方法告訴瀏覽器您希望執(zhí)行動畫并請求瀏覽器調(diào)用指定的函數(shù)在下一次重繪之前更新動畫。

當(dāng)你準(zhǔn)備好更新屏幕畫面時你就應(yīng)用此方法。這會要求你的動畫函數(shù)在瀏覽器下次重繪前執(zhí)行。回調(diào)的次數(shù)常是每秒 60 次，大多數(shù)瀏覽器通常匹配 W3C 所建議的刷新率。

使用 requestAnimationFrame 計算 FPS 原理

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

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

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，在動畫的開頭及結(jié)尾記錄此值的差值算出 FPS
    allFrameCount++;
    frame++;
  
    if (now > 1000 + lastTime) {
        var fps = Math.round((frame * 1000) / (now - lastTime));
        console.log(`${new Date()} 1S內(nèi) FPS：`, fps);
        frame = 0;
        lastTime = now;
    };
  
    rAF(loop);
}
 
loop();

OK，尋找一個有動畫不斷運行的頁面進行測試，可以看到代碼運行如下：

這里，我使用了我之前制作的一個頁面進行了測試，使用 Chrome 同時調(diào)出頁面的 FPS meter，對比兩邊的實時 FPS 值，基本吻合。

測試頁面，Solar System。你可以將上面的代碼貼到這個頁面的 console 中，測試一下數(shù)據(jù)：

對比右上角的 Frame Rate，幀率基本一致。在大部分情況下，這種方法可以很好的得出 Web 動畫的幀率。

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

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

以上就是如何計算Web動畫幀率FPS的詳細(xì)內(nèi)容，更多關(guān)于計算Web動畫幀率FPS的資料請關(guān)注腳本之家其它相關(guān)文章！