HarmonyOS 效能最佳化

西北野狼發表於2024-04-17

如何合理使用動效來獲得更好的效能

  1. 元件轉場動畫使用 transition：

    • 推薦使用轉場動畫（transition）而不是元件動畫（animateTo），因為 transition 只需要在條件改變時更新一次，而 animateTo 需要在動畫前後做兩次屬性更新，導致效能開銷更大。
    • 反例：透過改變透明度屬性並使用 animateTo 來隱藏和顯示元件。
    • 正例：直接使用 transition 動畫，透過改變透明度實現元件的出現與消失。

  1. 元件佈局改動時使用圖形變換屬性動畫：

    • 當需要改動元件的佈局顯示時，推薦使用圖形變換屬性（如平移、旋轉、縮放）而不是改動佈局屬性（如 width、height、layoutWeight），因為圖形變換不會重新觸釋出局，從而減少效能開銷。
    • 反例：透過設定佈局屬性 width 和 height 來改變元件大小。
    • 正例：透過設定圖形變換屬性 scale 來改變元件大小。

  1. 動畫引數相同時使用同一個 animateTo：

    • 如果多個屬性需要使用相同的動畫引數進行動畫處理，應該將它們合併到一個 animateTo 閉包中，以減少元件更新的次數。
    • 反例：將相同動畫引數的狀態變數更新放在不同的動畫閉包中。
    • 正例：將相同動畫引數的動畫合併在一個動畫閉包中。

  1. 多次 animateTo 時統一更新狀態變數：

    • 在執行多個 animateTo 之前，應該統一更新狀態變數，避免在執行動畫之間產生冗餘的狀態更新。
    • 反例：在兩個 animateTo 之間更新狀態變數。
    • 正例 1：在 animateTo 之前使用原始狀態，讓動畫從原始狀態過渡到指定狀態。
    • 正例 2：在 animateTo 之前顯式指定所有需要動畫的屬性初值，統一更新到節點中，然後再執行動畫。

應用效能提升

1. 使用資料懶載入

在處理長列表資料時，傳統的迴圈渲染方式會一次性載入所有列表元素，這會導致頁面啟動時間過長，影響使用者體驗，並增加伺服器壓力。為了解決這個問題，推薦使用 DataSource 來實現資料懶載入技術。透過懶載入，只有當資料進入可視區域時才載入和渲染，這樣可以顯著提高頁面的響應速度和效能。

2. 設定 List 元件的寬高

在使用 Scroll 容器元件巢狀 List 元件載入長列表時，如果沒有指定 List 的寬高尺寸，List 將會佈局其所有子元件，這會導致效能問題。透過設定 List 的寬高，可以確保只佈局 List 顯示區域內的子元件，從而提高效能。
Scroll 巢狀 List 時：
  • List 沒有設定寬高，會佈局 List 的所有子元件。
  • List 設定寬高，會佈局 List 顯示區域內的子元件。
  • List 使用 ForEach 載入子元件時，無論是否設定 List 的寬高，都會載入所有子元件。
  • List 使用 LazyForEach 載入子元件時，沒有設定 List 的寬高，會載入所有子元件，設定了 List 的寬高，會載入 List 顯示區域內的子元件。

3. 使用條件渲染替代顯隱控制

使用 visibility 屬性控制元件的顯隱狀態時，即使元件不可見，它仍然會被重新建立，這會造成效能損耗。透過使用 if 條件渲染，可以避免元件的重新建立過程，從而提升效能。

4. 使用 Column/Row 替代 Flex

Flex 容器元件在預設情況下存在 shrink 屬性，這可能導致二次佈局，影響頁面渲染效能。透過使用 Column 和 Row 元件替代 Flex，可以避免二次佈局帶來的效能問題。

5. 減少應用滑動白塊

在應用中，滑動白塊是一個常見的效能問題。透過增大 List/Grid 控制元件的 cachedCount 引數，可以預載入更多的 item，減少白塊的出現。同時，如果需要請求網路圖片，可以提前下載內容，以減少滑動時的白塊現象。

狀態管理最佳化

以下是文件中提到的一些關鍵點：
  1. 使用@ObjectLink 代替@Prop 減少不必要的深複製：
在父子元件間傳遞數值時，如果子元件不需要改變狀態變數的值，使用@ObjectLink 比@Prop 更優，因為@Prop 會導致深複製，增加效能開銷。
  1. 不使用狀態變數強行更新非狀態變數關聯元件：開發者應避免透過改變自定義的 UI 狀態變數來帶動常規變數的更新，而應將相關成員變數用@State 裝飾，以便框架能夠檢測狀態變化並觸發 UI 更新。
  1. 精準控制狀態變數關聯的元件數：建議每個狀態變數關聯的元件數少於 20 個，以減少不必要的元件重新整理，提高效率。
  1. 合理控制物件型別狀態變數關聯的元件數量：如果一個複雜物件被定義為狀態變數，需要合理控制其關聯的元件數，避免“冗餘重新整理”。
  1. 查詢狀態變數關聯的元件數：可以使用 HiDumper 工具檢視狀態變數關聯的元件數，進行效能最佳化。
  1. 避免在 for、while 等迴圈邏輯中頻繁讀取狀態變數：應該在迴圈外面讀取狀態變數，避免在迴圈邏輯中頻繁讀取，以提高效能。

避免冗餘操作

  1. 避免在高頻回撥中進行冗餘操作：在處理如滾動事件、觸控事件等高頻回撥時，應避免在回撥函式內部執行冗餘的日誌記錄、Trace追蹤和耗時操作。這些操作會嚴重影響應用的效能和響應速度。
  1. 刪除冗餘Trace和日誌列印：在開發階段，日誌和Trace追蹤是重要的輔助工具，但在釋出版本中應移除這些冗餘的輸出，以避免不必要的效能開銷。
  1. 避免設定冗餘的系統回撥監聽：如果回撥函式體內不包含任何業務邏輯程式碼，應將其刪除。註冊但未使用的回撥會消耗系統資源，影響程式執行效率。

相關文章