Flutter性能監控工具（2）--- PerformanceOverlay簡介

0x00 前言

PerformanceOverlay是在app上顯示性能統計數據的浮窗。PerformanceOverlay是一個Widget，有幾個屬性，用於控制開啓哪些功能。

0x01 PerformanceOverlay 分析

PerformanceOverlay的源碼是：

~/flutter/packages/flutter/lib/src/widgets/performance_overlay.dart
複製代碼

能夠看出PerformanceOverlay有如下的屬性：

1. final int optionsMask ：用於標記哪些功能打開的flag，有四個標誌位，

   displayRasterizerStatistics ：顯示光柵化器統計信息（GPU） visualizeRasterizerStatistics ：可視化光柵化器統計信息(GPU) displayEngineStatistics ：顯示引擎統計（CPU） visualizeEngineStatistics ：可視化引擎統計（CPU）

2. final int rasterizerThreshold : 光柵化的閾值，用於捕獲SkPicture跟蹤以進行進一步分析，它的值表明每隔幾幀捕獲一次，默認是0，表明功能是關閉的

3. final bool checkerboardRasterCacheImages ：檢查緩存圖片的狀況

4. final bool checkerboardOffscreenLayers ：檢查沒必要要的setlayer

0x02 啓用 PerformanceOverlay

開啓Performance Overlay的方法有三種：

一、 Flutter Inspector

Flutter Inspector是一個強大的工具，Performance Overlay的功能也集成在Flutter Inspector裏。

須要咱們運行Flutter APP後纔可使用，

1. 在Android Studio裏

選擇 View > Tool Windows > Flutter Inspector，就能夠打開Flutter Inspector，能夠看到有不少功能，以下圖：

而後選擇Performance Overlay。

2. 在VS Code裏

經過 View > Command Palette 或者 cmd+p打開命令板，輸入「performance」 而後選擇 Toggle Performance Overlay 就行。

2. 使用代碼設置

咱們知道PerformanceOverlay是一個widget，PerformanceOverlay是在WidgetsApp裏被使用的，MaterialApp又使用了WidgetsApp，因此咱們經過給MaterialApp 或者 WidgetsApp 設置參數來控制PerformanceOverlay的功能。

因此爲了，開啓將PerformanceOverlay，要將MaterialApp 或者 WidgetsApp 的showPerformanceOverlay 屬性設置爲true，以下：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      showPerformanceOverlay: true,
      title: 'My Awesome App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'My Awesome App'),
    );
  }
}
複製代碼

0x03 PerformanceOverlay：GPU、CPU統計信息

以下圖：

這個浮窗有兩個圖形：

1. 上面的是GPU thread

   表示在GPU線程上生成每幀須要的時間。

2. 下面的UI thread

   表示在UI線程上生成每幀須要的時間。

3. 縱軸

   圖中的縱軸表明時間，每一個圖形都被分紅三格，每小隔表明16ms，若是圖中超過這三條線之一，那麼您的運行頻率低於60Hz。

4. 橫軸

   橫軸表明幀。 該圖僅在應用程序繪製時更新，所以若是它處於空閒狀態，該圖將中止移動。每一個圖形繪製的都是該線程最後300幀的數據。

爲了保證60FPS，每幀耗費的時間應該是小於16ms的，看上圖中綠色的粗線條，表明的是當前幀的數據，若是當前幀的數據符合預期（<16ms），那麼就是綠色的，若是不符合，就是紅色的，以下圖：

遇到紅色的就須要去具體分析，由於會形成APP卡頓：

1. 若是GPU thread是紅色的

   那麼多是繪製的圖形過於複雜，或者是執行了過多的GPU操做。

2. 若是UI thread是紅色的

   說明確定是Dart代碼裏有耗時操做，致使阻塞了UI操做。

3. 若是兩個都是紅色的 建議從UI thread，也就是Dart代碼查起。

0x03 GPU問題定位

輔助定位GPU問題的，就是PerformanceOverlay的下面兩個功能：

1. PerformanceOverlay：checkerboardRasterCacheImages -- 檢查緩存圖片的狀況

   還有一個拖慢GPU渲染速度的是沒有給靜態圖像作緩存，致使每次build都會從新繪製。咱們能夠把靜態圖像加到RepaintBoundry中，引擎會自動判斷圖像是否複雜到須要repaint boundary。

2. PerformanceOverlay：checkerboardOffscreenLayers -- 檢查沒必要要的setlayer

   setlayer是Canvas裏的操做，很是耗性能，因此要儘可能避免這個操做。你可能會好奇，我根本沒用到這個，是的，咱們通常是不會使用這個函數的，因此當你開啓了這個檢查後，會發現啥也沒有，正好說明了你沒有用到setlayer。咱們通常都是被動的使用，好比須要剪切、透明的操做，用到一些widget的時候，這些widget會用到setlayer方法，一旦遇到這種狀況，咱們要想一下是否必定要這麼作，能不能經過其餘方式實現。

開啓這兩個功能的方法：

MaterialApp(
    showPerformanceOverlay: true,
    checkerboardOffscreenLayers: true, //使用了saveLayer的圖像會顯示爲棋盤格式並隨着頁面刷新而閃爍
    checkerboardRasterCacheImages: true, // 作了緩存的靜態圖像圖片在刷新頁面使不會改變棋盤格的顏色；若是棋盤格顏色變了，說明被從新緩存，這是咱們要避免的
    ...
);
複製代碼

0x04 GPU優化 tip

1. 一些效果儘可能設置在子Widget上，而不是父Widget

例如，要實現一個混合圖層的半透明效果，若是把透明度設置在頂層Widget上，CPU會把每一個子Widget的圖層渲染出來，在執行saveLayer操做保存爲一個圖層，最後給這個圖層設置透明度，可是saveLayer的開銷很大，因此官方給出建議：首先確認這些效果是否真的有必要；若是有必要，應該把透明度設置到每一個子Widget上，而不是父Widget。裁剪操做也是相似。

0x05 UI問題定位

可使用 Observatory裏的timeline的功能分析。

看這一篇 Flutter性能監控工具（3）--- Observatory使用

0x08 UI優化 tip