Flutter的性能優化

前言

本文是就Flutter的數據更新形式來操做，而後經過以觀測觀測臺的狀態數據報告，來完成對代碼執行效率的監控，並找到突破口。

觀測臺

不論是Idea仍是Android Studio都提供了觀測臺的功能。 通常咱們使用的都是Observatory的timeline部分。

我打開的方式通常都是在 terminal中輸入 flutter run，若是要使用真機測試則輸入 flutter run --profile。成功後會出現如圖所示的網址，不過這個網址適合在Google瀏覽器中進行顯示。

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

性能優化

在性能優化以前，咱們須要知道Flutter重構的邏輯。 在Android中咱們知道繪製須要的三個步驟是 measure、layout、draw。 而Flutter對應的是build、layout、paint。 他的重構是基於一種標髒和從新建立的方式進行的，因此咱們的性能影響通常來自於一個複雜界面的不斷重建。可能你只須要修改一個很小的部分，也就是很小的一個子樹須要進行修改，那麼在代碼沒有規範的狀況下，可能會出現整個界面的刷新，這樣咱們的性能可能就要降低了數倍。 對於個人代碼而言，就是整個界面的代碼都獲得了重建的，可是這是基於自己代碼仍是簡單的緣由，若是代碼是很是複雜的，那會獲得怎樣毀滅性的結果，也是可想而知。

上文的意思用這張圖來表示，就是原本咱們重構的就是實線叉號的子樹，可是由於代碼的書寫緣由，致使咱們的結果重構的虛線叉號的整棵樹。因此代碼的書寫規範在性能優化上起了相當重要的做用。

代碼測試

測試代碼位於包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