溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內(nèi)容主要講解“提升Flutter體驗的方法是什么”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“提升Flutter體驗的方法是什么”吧!
過度的丟幀從視覺上會出現(xiàn)卡頓現(xiàn)象，體現(xiàn)在用戶滑動操作不流暢；頁面加載耗時過長容易中斷操作流程；Flutter部分exception會導致發(fā)生異常代碼后面的邏輯沒有走到從而造成邏輯bug甚至白屏。這些問題很容易考驗用戶耐心，引起用戶反感。
所以我們制定以下三個指標作為線上Flutter性能穩(wěn)定性標準：
頁面滑動流暢度
頁面加載耗時（首屏時長+可交互時長）
Exception率
最終目標是讓這些數(shù)據(jù)指標驅(qū)動Flutter用戶體驗升級。
我們先大概了解下屏幕渲染流程：CPU先把UI對象轉(zhuǎn)變GPU可以識別的信息存儲進displaylist列表，GPU執(zhí)行繪圖指令來執(zhí)行displaylist，取出相應的圖元信息，進行柵格化渲染，顯示到屏幕上，這樣一個循環(huán)的過程實現(xiàn)屏幕刷新。
閑魚客戶端采用的Native、Flutter混合技術方案，Native頁面FPS監(jiān)控采用集團高可用方案，F(xiàn)lutter頁面是否可以直接采用這套方案監(jiān)控？
普遍的FPS檢測方案Android端采用的是Choreographer.FrameCallBack，IOS采用的是CADisplayLink注冊的回調(diào)，原理是類似的，在每次發(fā)出Vsync信號，并且CPU開始計算的時候執(zhí)行到對應的回調(diào)，這個時候表示屏幕開始一次刷新，計算固定時間內(nèi)屏幕渲染次數(shù)來得到fps。(這種方式只能檢測到CPU卡頓，對于GPU的卡頓是無法監(jiān)控到的)。由于這兩種方法都是在主線程做檢測處理，而Flutter的屏幕繪制是在UI TaskRunner中進行，真正的渲染操作是在GPU TaskRunner中，關于詳細的Flutter線程問題可以參考閑魚之前的文章：深入理解Flutter引擎線程模式。
這里我們得出結論：Native的FPS檢測方法并不適用于Flutter。
Flutter官方給我們提供了 Performance Overlay作為檢測幀率工具，可否直接拿來用？
上圖顯示了Performance Overlay模式下的幀率統(tǒng)計，可以看到，F(xiàn)lutter分開計算GPU 和UI TaskRunner。UI Task Runner被Flutter Engine用于執(zhí)行Dart root isolate代碼，GPU Task Runner被用于執(zhí)行設備GPU的相關調(diào)用。通過對Flutter engine源碼分析，UI frame time是執(zhí)行window.onBeginFrame所花費的總時間。GPU frame time是處理CPU命令轉(zhuǎn)換為GPU命令并發(fā)送給GPU所花費的時間。
這種方式只能在debug和profile模式下開啟，沒有辦法作為線上版本的fps統(tǒng)計。但是我們可以通過這種方式獲得啟發(fā)，通過監(jiān)聽Flutter頁面刷新回調(diào)方法handleBeginFrame()、handleDrawFrame()來計算實際FPS。
0
Future<Null> main() async {
FlutterError.onError = (FlutterErrorDetails details) async {
Zone.current.handleUncaughtError(details.exception, details.stack);
};
runZoned<Future<Null>>(() async {
runApp(new HomeApp());
}, onError: (error, stackTrace) async {
await _reportError(error, stackTrace);
});
}
其中，F(xiàn)lutterError.onError只會捕獲Flutter framework層的error和exception，官方建議將這個方法按照自己的exception捕獲上報需求定制。在實踐過程中，我們遇到很多不會對用戶體驗產(chǎn)生任何影響的exception會被頻繁觸發(fā)，這類沒有改善意義的exception可以添加白名單過濾上報。
02
有了線上exception的監(jiān)控，可以及早發(fā)現(xiàn)隱患，獲取問題堆棧信息，方便定位bug，提示整體穩(wěn)定性。
到此，相信大家對“提升Flutter體驗的方法是什么”有了更深的了解，不妨來實際操作一番吧！這里是億速云網(wǎng)站，更多相關內(nèi)容可以進入相關頻道進行查詢，關注我們，繼續(xù)學習！
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權內(nèi)容。
