前言
做線上幀率監控上報時，少不了需要弄明白如何通過代碼擷取實時幀率的需求，這篇文章通過圖解配合Flutter性能調試工具的方式一步步通俗易懂地讓你明白擷取幀率的基礎知識，以後再也不愁看不懂調試工具上名額了。
說說 List<FrameTiming>
Flutter 中通過如下方式監聽幀率，addTimingsCallback 涉及到幀排程知識，感興趣可以看看這篇Flutter 幀排程過程。
這裡重點說說 List<FrameTiming>。
List<FrameTiming>從哪裡來
addTimingsCallback 定義：
List<FrameTiming>可簡單了解成：引擎層到架構層的幀資料流。
List<FrameTiming>何時有值
List<FrameTiming>則表示一系列實時幀資訊。
如點選螢幕按鈕,引擎将傳遞系列幀資訊到架構層：“架構層，螢幕發送了變化，準備回調資料更新了！”。如果使用者未操作，addTimesCallback 則不會回調。
是以 ，addTimesCallback(List<FrameTiming>)隻有使用者操作界面時參數才有值。
List<FrameTiming>中幀存儲順序
List<FrameTiming>中 0 的位置是第一幀，last 是最新一幀。 最新的幀永遠在最後面。
再說說 FrameTiming
通過這個單詞不難猜測 Frame 表示幀，加上 Timing 可以了解成實時變化的幀。FrameTiming 是一個用來存儲實時幀資訊的資料結構。
FrameTiming 定義：
這裡列了下我認為最重要的幾個屬性：
前置知識簡單說明
了解上述屬性前需了解渲染相關知識，不清楚的可以看看Vsync 機制 和 卡頓産生原因 。
核心思想 圖像内容展示到螢幕的過程需要 CPU 和 GPU 共同參與。CPU 負責計算顯示内容，比如視圖的建立、布局計算、圖檔解碼、文本繪制等。随後 CPU 會将計算好的内容送出到 GPU 去，由 GPU 進行變換、合成、渲染。之後 GPU 會把渲染結果送出到幀緩沖區去，等待下一次 VSync 信号到來時顯示到螢幕上。由于垂直同步的機制，如果在一個 VSync 時間内，CPU 或者 GPU 沒有完成内容送出，則那一幀就會被丢棄，等待下一次機會再顯示，而這時顯示屏會保留之前的内容不變。
FrameTiming 在幀中的表示
當在應用中操作時候，就會産生連續的幀，如圖：
每兩個柱形一起表示一幀：ui 表示 cpu 耗時，raster 表示 gpu 耗時。
每幀細化後如下圖，其中标注 ①②③④ 對應 FrameTiming 中的四個主要屬性。而其中：
- ui 在 FrameTiming 中有對應衍生變量叫 buildDuration 。
- Raster 在 FrameTiming 中用 RasterDuration 表示。
同時可推導出 FrameTiming 中相關衍生變量與上述重點關注屬性關系：
④-① = totalSpan：同步信号開始到栅格化時間
②-① = vsyncOverhead：同步信号接受後到 ui 建構之間延遲。
③-② = buildDuration：ui 建構過程總時間。
④-③ = rasterDuration：栅格化過程總時間。
totalSpan 與 buildDuration+rasterDuration 關系
通過代碼驗證 Flutter 調試工具 PerformanceOverlay 中 Timing 每幀 ui 值和 ration 值與 vsyncstart、buildstart、buildFinish、rasterStart、rasterFinish 關系。
輸出：
代碼中，11 行是 ui 建構 + 栅格化時間，17 行是 totalSpan 時間， 22 行中是 vsyncOverhead + ui 建構 + 栅格化時間 這個值最終和才等于 totalSpan 值。
這裡有個誤區, 網上很少人關注 totalSpan 與 buildDuration+rasterDuration 關系，好像預設就是相等的。其實，totalSpan 不等于 Timing 中 ui + raster 值，而是 Vsync 信号接受後建構之前延遲 vsyncOverhead+cpu 建構耗時 + gpu 耗時，
通過上述案例和 totalSpan 定義很容易佐證這點：
如何擷取幀率
核心思路
- 将原始幀資料 List 降噪保留最新關注幀數。
- 通過公式 FPS≈ REFRESH_RATE * 實際繪制幀數 / 理論繪制幀數 。
如何降噪
-
從原生資料中篩查最新關注幀數，其他都幹掉。
如下，通過棧方式調換了存儲方式更容易操作，然後将棧中老的幹掉隻保留最新的關注 100 條。
-
将位于不同幀的無效資料過濾掉。
如下，以重新整理率為 60 舉例，如果一幀之間的時間 > 16.6 *2，該幀就位于不同幀中，因為一幀最大時間也就是 16.6ms。
如何計算
代碼如下：
這裡拆解下其中邏輯，友善了解。
有 5 幀，其中在實際繪制過程中 f① 和 f② 都是在正常時間範圍内繪制，f③ 則會繪制耗時，跨越 2 幀。
假設 f①，f②，f③ 繪制總耗時為 P1, P2, P3 則：
- 理論繪制幀數 = （P1 / 16.6）+ 1 + (P2 / 16.6) + 1 + (P3 / 16.6) + 1 圖中明顯可以看到 P1 和 P2 < 16.6, 而 P3 > 16.6 *2 ，所有理論繪制幀數 = 0 +1 + 0 + 1 + 2 + 1 = 5。
- 實際繪制幀數 = 3 。
- 本來正常應該繪制 5 幀，但是實際繪制 3 幀，取比值表示實際繪制能力，根據 FPS≈ REFRESH*RATE * 實際繪制幀數 / 理論繪制幀數 。 即 FPS = 3 _ 60 / 5。
完整代碼
效果展示
這就結束了？
上面代碼在重新整理率為 60HZ 的手機上每秒繪制幀時間為 16.6 是沒有問題的，但是如果在其他幀率的手機上，比如 90HZ(OnePlus 7 Pro), 120HZ（Redmi K30）上就會存在問題。
- 代碼中寫死了 REFRESH_RATE = 60 。
- maxframes = 100 也有問題，如果在 60HZ 手機上取 100 幀綽綽有餘，在 120HZ 手機上的話，每秒繪制 120 幀顯然不夠。
如何擷取幀率(改進版)
思路：通過通道擷取各系統提供的重新整理率擷取方式，然後更新上述代碼中的重新整理率。
擷取各系統幀率
在 Android 和 ios 平台提供了擷取幀率的方法。
- 對于 Android 通過 WindowManager 擷取重新整理率：
- 對于 iOS 從 CADisplayLink擷取重新整理率：
定義統一擷取接口并實作(以安卓為例)
定義接口
最終修改點
- 最大幀率數修改成 120。
- fpsHZ 這個值通過插件動态擷取。
- 時間間隔也同步修改下，也就是 16.6(60hz 的時候)。
- 最後 fps 計算公式中的重新整理率同步修改成 fpsHZ。
總結
本文重點講解了 FrameTiming 結構在幀顯示過程中的對應關系，圖解擷取準确幀的算法，最後完善了擷取幀的邏輯。
總體來說網上能搜到的我這裡都有，在學習過程中遇到 FrameTiming 結構和幀率計算方法這兩個點覺得不好了解，不夠系統，就重點介紹争取深入淺出表達出來。不足之處還望各位大佬指出，謝謝！
如果覺得文章對你有幫助，點贊、收藏、關注、評論，一鍵四連支援，你的支援就是我創作最大的動力。
❤️ 本文原創聽蟬 公衆号：碼裡特别有禅 歡迎關注原創技術文章第一時間推送 ❤️
PS: 文中所有源碼擷取方式：公衆号背景回複 “fps”
參考連結
如何代碼擷取 Flutter APP 的 FPS - Yrom's
Flutter 如何更加準确地擷取 FPS | 區長
Flutter 性能計算之流暢性 fps 計算 - 簡書
allenymt/flutter_fps: flutter Fps 的兩種監聽方案
如果覺得文章對你有幫助，點贊、收藏、關注、評論，一鍵四連支援，你的支援就是我創作最大的動力。
❤️ 本文原創聽蟬 公衆号：碼裡特别有禅 歡迎關注原創技術文章第一時間推送 ❤️