Flutter幀率監控 | 由淺入深，詳解獲取幀率的那些事

前言做線上幀率監控上報時，少不了需要弄明白如何通過代碼獲取實時幀率的需求，這篇文章通過圖解配合Flutter性能調試工具的方式一步步通俗易懂地讓你明白獲取幀率的基礎知識，以後再也不愁看不懂調試工具上指標了。說說 List<FrameTiming> Flutter 中通過如下方式監聽幀率，addT ...

前言

做線上幀率監控上報時，少不了需要弄明白如何通過代碼獲取實時幀率的需求，這篇文章通過圖解配合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。