# Flutter - 效能調教
## profile 模式
使用**真機**（非模擬器）以 profile 模式啟動，分析 APP 效能，profile 模式相較於 release 模式，他更好追蹤程式碼且依舊可以使用[DevTools](https://docs.flutter.dev/development/tools/devtools/overview)工具。
### 開啟 profile 模式

flutter run --profile

## DevTools
### 開啟 DevTools
command line 顯示內容如下：

Flutter run key commands.
h List all available interactive commands.
c Clear the screen
q Quit (terminate the application on the device).
An Observatory debugger and profiler on Yen的iPhone is available at:
http://127.0.0.1:50617/7g4yRS1_JUk=/
The Flutter DevTools debugger and profiler on Yen的iPhone is
available at: http://127.0.0.1:9101?uri=http://127.0.0.1:50617/7g4yRS1_JUk=/

點擊對應網址就可以開啟 DevTools。

### 基本概念
#### 幀（frame）
依據[官網](https://docs.flutter.dev/development/tools/devtools/performance#what-is-a-frame-in-flutter)描述當每一幀的渲染時間超過 16 ms 就會產生卡頓（抖動）的感覺。

#### Flutter frames chart

使用長條圖進行表示，每一長條代表每一個幀的資訊，以不同的顏色表現出每一幀在不同工作（見圖片右上）的狀態表現，總共有以下四種工作狀態：
1. UI
2. Raster
3. Jank (slow frame): 這一個表示卡頓的狀況發生，需特別注意此段操作相關的程式碼是否可以優化的地方
4. Shader compilation: 著色器初次發生渲染此時也很容易發生卡頓

若有耗時較久的操作也會跳出警告視窗就可以藉此追溯是哪一個地方需要進行優化(目前我最常發生的是在頁面進行`initState`的時候，若評估依舊須放置在這則考慮是否添加一些 loading 效果，讓使用者不要有太嚴重的卡頓感)。

另外若需要顯示每一幀的詳細資訊可以點擊長條圖後究會在**TimeLine Event**顯示如上圖最下方。

另外也可開啟 Track Widget Builds (開啟方式如下)，他會顯示對應的事件名稱更好追蹤。

## Flutter Inspector
### 開啟方式
需使用 debug 模式開啟

### 功能介紹
有諸多功能，其中我覺得以 `Select Widget Mode` 及 `Repaint Rainbow` 最為實用。
#### Select Widget Mode
當只是進行微調不想改程式碼時，可以使用下方截圖方式可以立即顯示不同的效果
#### Highlight Repaints
在還沒發現這一個工具我用來檢查是否重複 rebuild 的方法就是用更換 widget 背景顏色檢查(所以作品集有些[測試範例](https://hackmd.io/@BzWzq-x9Rb2G4WG03gcyKg/H1xyJ8bs9#buildWhen)是換背景色)。但使用這一個工具後他就會自動幫你框出來了! 而且同一次 rebuild 的 widget 也會是類似顏色方便擬進行追蹤。

#### Slow Animations
點擊後動畫將以原本 1/5 速度運行，這一個我比較常用在查看動畫 / 換頁特效的時候，主要是確認動畫本身的正確性，有些一閃而過的點擊效果透過放慢會比較容易看清，另需要補充的是 GIF 圖也會被影響變得很緩慢，不過放緩的只是動畫程式裡的 Timer 就不會被此影響。

#### Show Guidelines
點擊後會繪製引導線，展示繪製區域、對齊、間距、滾動視圖(會用箭頭表示預設滾動方向)，通常我會用來檢查是否有多餘的 widget 可以被移除，是否文字及 icon 有對齊。

#### Show BaseLine
點擊後會在文字下方顯示基準線，通常會使用在中文字上的對齊，另外建議在同樣的版面安卓及 IOS 都看過一遍有時候**置中**都不是真的置中。

#### Highlight OverSized Images
該選項會將尺寸過大的圖片進行垂直翻轉及色調反轉，超過128KB 的圖片會被視為過大。建議可以請設計人員重新出圖，要不若手機效能不好可能會有卡頓的狀況發生要特別注意，[官網](https://flutter.cn/docs/development/tools/devtools/inspector#section-16)也有提供以下做法進行參考:

class ResizedImage extends StatelessWidget {
  const ResizedImage({super.key});

  @override
  Widget build(BuildContext context) {
    return Image.asset(
      'dash.png',
      cacheHeight: 213,
      cacheWidth: 392,
    );
  }
}

## 參考資料
1. https://docs.flutter.dev/testing/build-modes#profile
2. https://docs.flutter.dev/development/tools/devtools/performance
3. https://juejin.cn/post/7066954522655981581

###### tags: `flutter`