Flutter的效能優化

ClericYi發表於2020-02-21
原文網址 : https://juejin.im/post/5e50674e6fb9a07ccb7e91c9
Flutter優化

Flutter的效能優化

前言

本文是就Flutter的資料更新形式來操作，然後通過以觀測觀測臺的狀態資料包告，來完成對程式碼執行效率的監控，並找到突破口。

觀測臺

不管是Idea還是Android Studio都提供了觀測臺的功能。 一般我們使用的都是Observatory的timeline部分。

Flutter的效能優化
我開啟的方式一般都是在terminal中輸入flutter run，如果要使用真機測試則輸入flutter run --profile。成功後會出現如圖所示的網址，不過這個網址適合在Google瀏覽器中進行顯示。
Flutter的效能優化

一般在timeline中，我們一般選用Flutter Developer的選項。出現的渲染顯示我們一般會看到gpu和ui的渲染，以及重構過程。

Flutter的效能優化

效能優化

在效能優化之前，我們需要知道Flutter重構的邏輯。 在Android中我們知道繪製需要的三個步驟是 measure、layout、draw。 而Flutter對應的是build、layout、paint。 他的重構是基於一種標髒和重新建立的方式進行的，所以我們的效能影響一般來自於一個複雜介面的不斷重建。可能你只需要修改一個很小的部分，也就是很小的一個子樹需要進行修改，那麼在程式碼沒有規範的情況下，可能會出現整個介面的重新整理，這樣我們的效能可能就要下降了數倍。 對於我的程式碼而言，就是整個介面的程式碼都得到了重建的，但是這是基於本身程式碼還是簡單的原因，如果程式碼是非常複雜的，那會得到怎樣毀滅性的結果，也是可想而知。

Snipaste_2020-02-13_13-41-19.png
上文的意思用這張圖來表示，就是本來我們重構的就是實線叉號的子樹，但是因為程式碼的書寫原因，導致我們的結果重構的虛線叉號的整棵樹。所以程式碼的書寫規範在效能優化上起了至關重要的作用。

程式碼測試

測試程式碼位於包test:WanAndroid-Flutter

測試程式碼
上圖是我測試的程式碼，黑色圖形中的資料是通過Timer自動更新的。

  int _num = 0;
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    Timer.periodic(Duration(seconds: 1), (timer) {
      setState(() {
        _num = timer.tick;
      });
    });
  }
複製程式碼

在initState()函式中，我們做了一件事情，就是一個初始化，並且這是一個每1s進行一次更新的。

在原始碼中，這個資料更新處於兩種位置：Main頁面、元件化的_buildBottom。

  • Main頁面：在這個頁面中，如果重構，就會發生我們上述所說的情況，把整個頁面全部重構了。
  • 元件化的_buildBottomde：將上述的更新程式碼轉移到這個元件中，那麼重構的效果就會和上述的一樣，當然你可以更進行細化。
效能優化前
效能優化後

通過Observatory的觀測，我們能夠看到兩種位置進行更新，他們重構所需要進行的步驟是完全不一樣的程度的，更何況我的頁面邏輯是處於一個還算簡單的狀態呢。

以上就是我的學習成果，如果有什麼我沒有思考到的地方或是文章記憶體在錯誤，歡迎與我分享。

相關文章推薦： 手撕Flutter

相關文章