Flutter 如何實作性能優化

不可否認 Flutter 是一個非常強大的移動應用開發架構，我們在技術架構選型時就是選用的 Flutter，特别是跨端能力屬實很優秀，but 也逐漸發現在複雜的應用程式實作中，App 的性能會受到一些影響。

其實這個問題，我們内部也有發現，但是出于優先級的考慮，性能優化的需求一直沒有排到疊代中，但是産品營運陸陸續續有接到使用者回報使用體驗的問題，我們才把這個需求往前提，在需求評審和技術讨論後有一些實作路徑結論，也借機在這裡進行分享和交流。

Flutter 的渲染流程

在優化 Flutter 應用的性能之前，首先很有必要了解其渲染流程，了解這個流程對于性能優化至關重要。

Flutter 的渲染流程主要分為三個階段：建構、布局和繪制。

• 在建構階段，Flutter會建立和配置widget；
• 在布局階段，Flutter會确定每個widget的位置和大小；
• 在繪制階段，Flutter會将widget繪制到螢幕上。

1、限制使用 widget 數量 在Flutter中，建構過多的widget會消耗大量的CPU資源，進而影響應用的性能。是以，我們應盡量減少建構的widget數量。例如，我們可以使用ListView.builder來建構清單，而不是使用ListView。因為ListView.builder隻會建構螢幕上可見的widget，而ListView則會建構所有的widget。

2. 避免不必要的重繪 在Flutter中，如果一個widget的狀态發生改變，那麼這個widget以及其所有的子widget都會被重繪。是以，我們應該盡量避免不必要的重繪。例如，我們可以使用const來建立常量widget，這樣這個widget就不會被重繪了。另外，我們也可以使用RepaintBoundary來隔離需要重繪的widget，這樣就可以減少不必要的重繪。

Flutter 的資料處理結構

在處理大量資料時，使用正确的資料結構和算法是非常重要的。

1、巧用連結清單（LinkedList） 如果我們需要在清單中查找元素，那麼使用哈希集（HashSet）會比使用清單（List）更高效。因為在哈希集中查找元素的時間複雜度是O(1)，而在清單中查找元素的時間複雜度是O(n)。同樣，如果我們需要頻繁地在清單中添加或删除元素，那麼使用連結清單（LinkedList）會比使用數組（Array）更高效。

2、使用懶加載 在處理大量資料時，我們可以使用懶加載來提高應用的性能。懶加載是一種隻在需要時才加載資料的技術。例如，我們可以使用FutureBuilder或StreamBuilder來實作懶加載，這樣就可以避免一次性加載所有的資料，進而減少記憶體的使用。

使用性能分析工具

Flutter其實有提供了一些性能分析工具，如 Flutter DevTools 和 DartDevTools。

如果我們多善用這些工具可以幫助我們找出性能瓶頸，進而進行針對性的優化。

例如，我們可以使用 Flutter DevTools 的 Timeline 視圖來檢視應用的幀率，以及每一幀的建構、布局和繪制時間。我們也可以使用 Dart DevTools 的 CPU 分析器來檢視 CPU 的使用情況，以及每個函數的執行時間。

此外，我們在技術讨論的時候也發現，從圖檔緩存、JSON序列化、反序列化和拓展工具也可以實作。

在Flutter中，可以使用緩存來提高應用的性能。例如，我們可以使用圖檔緩存（ImageCache）來緩存圖檔，這樣就可以避免每次都從網絡上下載下傳圖檔。另外，我們也可以使用Memoization技術來緩存函數的結果，這樣就可以避免重複計算。

有些操作，如 JSON 序列化和反序列化，如果直接使用 Dart 的核心庫進行操作，可能會影響應用的性能。是以，我們可以使用專門的庫，如 json_serializable 和 built_value，來進行這些操作。

如果我們考慮從H5角度進行優化，我也非常建議使用小程式替代H5，讓過往開發的小程式直接運作在 Flutter 開發的應用中，同樣一個功能業務僅需一次小程式開發，即可實作在除了微信端的其它 App 中也運作起來，由于雙線程技術會使得效果明顯優于H5，白屏和卡頓的情況大大減少。原理其實很簡單的，FinClip 提供了小程式 SDK 給 Flutter 應用進行內建，這樣一來 App 即擁有了一套可運作小程式業務代碼的宿主環境。

小程式雙線程渲染

總的來說，Flutter的性能優化是一個持續的過程，需要我們不斷地學習和實踐。優化的目标不僅是提高應用的運作速度，還包括提高應用的響應速度，減少應用的記憶體使用，以及提高應用的能效。

希望我們深入的探索這些實用的技巧和最佳實踐可以幫助在使用 Flutter 建構應用時，提高應用的性能。