前言
做線上幀率監控上報時，少不了需要弄明白如何通過代碼獲取實時幀率的需求，這篇文章通過圖解配合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<frametiming>降噪保留最新關注幀數，
- 通過公式 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 的兩種監聽方案
如果覺得文章對你有幫助，點贊、收藏、關注、評論，一鍵四連支持，你的支持就是我創作最大的動力，
?? 本文原創聽蟬 公眾號：碼里特別有禪 歡迎關注原創技術文章第一時間推送 ??
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/542190.html
標籤：其他