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

来源:https://www.cnblogs.com/xuge2it/archive/2023/01/17/17057307.html
-Advertisement-
Play Games

前言 做線上幀率監控上報時,少不了需要弄明白如何通過代碼獲取實時幀率的需求,這篇文章通過圖解配合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 定義很容易佐證這點:

如何獲取幀率

核心思路

  1. 將原始幀數據 List降噪保留最新關註幀數。
  2. 通過公式 FPS≈ REFRESH_RATE * 實際繪製幀數 / 理論繪製幀數 。

如何降噪

  • 從原生數據中篩查最新關註幀數,其他都幹掉。

    如下,通過棧方式調換了存儲方式更容易操作,然後將棧中老的幹掉只保留最新的關註 100 條。

  • 將位於不同幀的無效數據過濾掉。

    如下,以刷新率為 60 舉例,如果一幀之間的時間 > 16.6 *2,該幀就位於不同幀中,因為一幀最大時間也就是 16.6ms。

如何計算

代碼如下:

這裡拆解下其中邏輯,方便理解。

有 5 幀,其中在實際繪製過程中 f① 和 f② 都是在正常時間範圍內繪製,f③ 則會繪製耗時,跨越 2 幀。

假設 f①,f②,f③ 繪製總耗時為 P1, P2, P3 則:

  1. 理論繪製幀數 = (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。

  2. 實際繪製幀數 = 3 。

  3. 本來正常應該繪製 5 幀,但是實際繪製 3 幀,取比值表示實際繪製能力,根據 FPS≈ REFRESH*RATE * 實際繪製幀數 / 理論繪製幀數 。 即 FPS = 3 _ 60 / 5。

完整代碼

效果展示

這就結束了?

上面代碼在刷新率為 60HZ 的手機上每秒繪製幀時間為 16.6 是沒有問題的,但是如果在其他幀率的手機上,比如 90HZ(OnePlus 7 Pro), 120HZ(Redmi K30)上就會存在問題。

  1. 代碼中寫死了 REFRESH_RATE = 60 。
  2. maxframes = 100 也有問題,如果在 60HZ 手機上取 100 幀綽綽有餘,在 120HZ 手機上的話,每秒繪製 120 幀顯然不夠。

如何獲取幀率(改進版)

思路:通過通道獲取各系統提供的刷新率獲取方式,然後更新上述代碼中的刷新率。

獲取各系統幀率

在 Android 和 ios 平臺提供了獲取幀率的方法。

  • 對於 Android 通過 WindowManager 獲取刷新率:

定義統一獲取介面並實現(以安卓為例)

定義介面

安卓中獲取方式

最終修改點

  1. 最大幀率數修改成 120。
  2. fpsHZ 這個值通過插件動態獲取。
  3. 時間間隔也同步修改下,也就是 16.6(60hz 的時候)。
  4. 最後 fps 計算公式中的刷新率同步修改成 fpsHZ。

總結

本文重點講解了 FrameTiming 結構在幀顯示過程中的對應關係,圖解獲取準確幀的演算法,最後完善了獲取幀的邏輯。

總體來說網上能搜到的我這裡都有,在學習過程中遇到 FrameTiming 結構和幀率計算方法這兩個點覺得不好理解,不夠系統,就重點介紹爭取深入淺出表達出來。不足之處還望各位大佬指出,謝謝!

如果覺得文章對你有幫助,點贊、收藏、關註、評論,一鍵四連支持,你的支持就是我創作最大的動力。

❤️ 本文原創聽蟬 公眾號:碼里特別有禪 歡迎關註原創技術文章第一時間推送 ❤️

PS: 文中所有源碼獲取方式:公眾號後臺回覆 “fps”

參考鏈接

如何代碼獲取 Flutter APP 的 FPS - Yrom's

Flutter 如何更加準確地獲取 FPS | 區長

Flutter 性能計算之流暢性 fps 計算 - 簡書

allenymt/flutter_fps: flutter Fps 的兩種監聽方案

如果覺得文章對你有幫助,點贊、收藏、關註、評論,一鍵四連支持,你的支持就是我創作最大的動力。

❤️ 本文原創聽蟬 公眾號:碼里特別有禪 歡迎關註原創技術文章第一時間推送 ❤️


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 前言 眾所周知記憶體緩存(MemoryCache)數據是從記憶體中獲取,性能表現上是最優的,但是記憶體緩存有一個缺點就是不支持分散式,數據在各個部署節點上各存一份,每份緩存的過期時間不一致,會導致幻讀等各種問題,所以我們實現分散式緩存通常會用上Redis 但如果在高併發的情況下讀取Redis的緩存,會進行 ...
  • 大家好,我是痞子衡,是正經搞技術的痞子。今天痞子衡給大家介紹的是國內Cortex-M內核MCU廠商高主頻產品。 在 2021 年初痞子衡寫了篇 《盤點國內Cortex-M內核MCU廠商高性能產品》,搜羅了當時市面上主頻不低於 96MHz 的 CM 核國產 MCU。如今過去了兩年,痞子衡又一次梳理了國 ...
  • 前言 學習知識要掌握有效的學習方法,學習技術也是一樣,本篇分享關於我學習 STM32 後總結的學習方法。 推薦的學習方法 系統學習 在網上購買一款開發板,使用開發板+開發板配套視頻教程+開發板配套源碼+晶元官方手冊搭配學習。 安富萊、正點原子、野火,這三家公司研發的開發板都挺不錯,可自由選擇一款作為 ...
  • APPERK 軟體信息 軟體名稱 ParallelsDesktop 版本號 18.1.1 軟體類型 官網版 + 商業版 安裝包大小 390MB 語言 中文 系統支持 macOS11及以上(M晶元原生) 測試設備 20款Mac Pro 與 M1 Mac Pro 測試系統 macOS 13.1 軟體介紹 ...
  • 1. Openkylin介紹 Openkylin是麒麟軟體公司主導的開源操作系統,正在逐步與該公司的銀河麒麟操作系統保持基礎庫的同源。 時至2022年12月,開源操作系統Openkylin的預設軟體商場版本中還沒有微信可供下載,預計後續會和麒麟銀河系統一樣上線微信官方版本。 2. OpenKylin ...
  • 摘要:用戶使用Mogdb 2.0.1版本進行業務上線測試,發現在插入數據時,應用日誌中提示primary key衝突,用戶自查業務SQL沒有問題,接到通知後,招手處理故障。 本文分享自華為雲社區《使用MTK遷移Mysql源庫後主鍵自增列導致數據無法插入問題》,作者:Gauss松鼠會。 故障背景 用戶 ...
  • 使用數據處理函數 函數 與其他大多數電腦語言一樣,SQL支持利用函數來處理數據。函數一般是在數據上執行的,它給數據的轉換和處理提供了方便。 註意: 函數沒有SQL的可移植性強:能運行在多個系統上的代碼稱為可移植的(portable)。函數的可移植性卻不強。幾乎每種主要的DBMS的實現都支持其他實現 ...
  • 京東物流:康睿 姚再毅 李振 劉斌 王北永 說明:以下全部均基於elasticsearch8.1 版本 一.跨集群檢索 - ccr 官網文檔地址: https://www.elastic.co/guide/en/elasticsearch/reference/8.1/modules-cross-cl ...
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...