OpenHarmony列表場景性能提升方法

作者：zhushangyuan_ 2023-08-24 16:42:29

系統 OpenHarmony

本文基于Sample聊天實例應用中的聊天列表場景，分析了列表滑動性能的優化方法，包含懶加載、緩存列表項、小圖片的同步加載，以及頁面布局優化等。

想了解更多關于開源的內容，請訪問：

51CTO 開源基礎軟件社區

https://ost.51cto.com

OpenHarmony列表場景性能提升方法

摘要：列表場景在應用程序中很常見，列表性能非常影響用戶體驗。本文會介紹開發OpenHarmony列表頁面時需要考慮的性能提升方法。
關鍵字：OpenHarmony HarmonyOS 鴻蒙懶加載列表滑動性能 LazyForEach cachedCount IDataSource

概述

列表場景在應用程序中很常見，比如新聞列表，通訊軟件消息列表，聯系人列表，排行榜，各種賬單等。列表性能非常影響用戶體驗，優化列表性能可以提升用戶交互體驗。在開發OpenHarmony應用時，常用優化列表性能的方法包含：

懶加載
懶加載在需要數據時才加載數據。如果一次性加載所有的列表數據，一方面會導致頁面啟動時間過長，影響用戶體驗，另一方面也會增加
服務器的壓力和流量，加重系統負擔。數據懶加載可以從數據源中按需迭代加載數據并創建相應組件。
緩存列表項
緩存已經渲染過的列表項可以減少重復渲染的開銷。另外，通過把屏幕外列表項預先加載緩存起來，這樣也可以提升列表響應速度。
優化頁面布局
優化渲染布局可以減少不必要的渲染繪制操作，提升列表的流暢度。在優化頁面布局時，需要減少視圖嵌套層次，移除不必要的組件，保持頁面精簡。
優化圖片加載
在列表中包含圖片時，優化圖片加載可以提高列表的加載速度和流暢度。如果是小圖片可以同步下載，避免列表快速滑動時產生圖片白塊。
組件復用
有些場景下的自定義組件具有相同的組件布局結構，僅有狀態變量等承載數據的差異。把這樣的組件緩存起來，需要使用到該組件時直接復用，減少重復創建和渲染的時間，從而提高應用頁面的加載速度和響應速度。

本文會以一個范例應用來介紹開發OpenHarmony列表頁面時，如何使用上述方法來提升列表性能。

環境準備

本文會基于Sample聊天實例應用進行講解，該示例應用是一個仿聊天類應用，使用了靜態布局搭建了不同的頁面。為了優化內存與性能體驗，在部分列表場景使用了懶加載。除了懶加載，本文還會嘗試其他性能優化方法。

性能實踐

懶加載

開發者在使用長列表時，如果直接采用循環渲染方式，會一次性加載所有的列表元素，會導致頁面啟動時間過長，影響用戶體驗。建議開發者使用數據懶加載，從數據源中按需迭代加載數據并創建相應組件。

在使用數據懶加載之前，需要實現懶加載數據源接口IDataSource，該接口定義在OpenHarmony SDK的接口聲明文件ets\component\lazy_for_each.d.ts里。還需要為數據源注冊數據變更監聽器DataChangeListener，在數據變更時調用相應的回調函數。Sample聊天實例應用中，并沒有使用到數據變更監視器。數據源類BasicDataSource.ets定義如下，該類是一個abstract抽象類，每個列表的數據源具體實現類可以繼承實現該抽象類。

export abstract class BasicDataSource implements IDataSource {
  private listeners: DataChangeListener[] = []

  public abstract totalCount()

  public getData(index: number): any {
    return undefined
  }

  registerDataChangeListener(listener: DataChangeListener): void {
    if (this.listeners.indexOf(listener) < 0) {
      this.listeners.push(listener)
    }
  }

  unregisterDataChangeListener(listener: DataChangeListener): void {
    const pos = this.listeners.indexOf(listener)
    if (pos >= 0) {
      this.listeners.splice(pos, 1)
    }
  }

  notifyDataReload(): void {
    this.listeners.forEach(listener => {
      listener.onDataReloaded()
    })
  }
	......
}

以聊天列表為例，數據源具體類ChatListData實現如下，其中ChatModel類對應聊天列表中列表項，包含用戶名、最后一條消息內容，時間戳等信息。數據源類ChatListData中，getData()方法為數據源接口IDataSource中定義的，用于給LazyForEach提供數據；addData()和pushData()為數據源類中定義的方法，可用于給數據源增加數據。Sample聊天實例應用中，使用的模擬數據，并沒有從網絡上獲取，這些增加數據的接口實際上未使用，僅用于后續擴展。

class ChatListData extends BasicDataSource {
  private chatList: Array<ChatModel> = []

  public totalCount(): number {
    return this.chatList.length
  }

  public getData(index: number): any {
    return this.chatList[index]
  }

  public addData(index: number, data: ChatModel): void {
    this.chatList.splice(index, 0, data)
    this.notifyDataAdd(index)
  }

  public pushData(data: ChatModel): void {
    this.chatList.push(data)
    this.notifyDataAdd(this.chatList.length - 1)
  }
}

最后看下列表頁面的代碼，詳細代碼見文件ChatListPage.ets。

可以看出，在List組件容器中，使用LazyForEach循環生成ListItem列表項，按屏幕展示需要逐次加載所需的數據，實現了懶加載。如果使用ForEach循環會一次性加載所有的數據。

build() {
    Column() {
      List() {
		......
        LazyForEach(this.chatListData, (msg: ChatModel) => {
          ListItem() {
            ChatView({ chatItem: msg, wantParams: this.wantParams, wantFileParams: this.wantFileParams })
          }
        }, (msg: ChatModel) => msg.user.userId)
      }
      .backgroundColor(Color.White)
      .listDirection(Axis.Vertical)
		......
    }
  }

緩存列表項

在OpenHarmony SDK文件list.d.ts中，ListAttribute列表屬性類中定義了一個cachedCount屬性。

該屬性cachedCount用于設置長列表延遲懶加載時列表項ListItem的最少緩存數量，表示屏幕外List/Grid預加載項的個數。

應用通過增大List控件的cachedCount參數，調整UI界面的加載范圍。如果需要請求網絡圖片，可以在列表項滑動到屏幕顯示之前，提前下載好內容，從而減少滑動白塊。

在Sample聊天實例應用中，并未使能該屬性，可以嘗試使能該屬性。緩存列表項數量，建議設置為當前列表頁面屏幕可以展示列表項的2倍，具體設置根據列表頁面實際情況進行酌情設置。

如下是使用cachedCount參數的例子，我們設置為緩存20條列表項。當設置cachedCount，可以通過在數據源實現類getData()方法中，添加日志打印來驗證。當列表界面滑動時，除了獲取屏幕上展示的數據，還會額外獲取20條列表項數據緩存起來。

build() {
    Column() {
      List() {
		......
        LazyForEach(this.chatListData, (msg: ChatModel) => {
          ListItem() {
            ChatView({ chatItem: msg, wantParams: this.wantParams, wantFileParams: this.wantFileParams })
          }
        }, (msg: ChatModel) => msg.user.userId)
      }
      .backgroundColor(Color.White)
      .listDirection(Axis.Vertical)
		......
	  .cachedCount(20)
    }
  }

優化渲染布局

在OpenHarmony應用開發時，使用ArkUI Inspector分析列表的界面布局。減少嵌套層次，移除不必要的組件來提升頁面響應性能。
可以參考文章《OpenHarmony使用ArkUI Inspector分析布局》了解更多。

優化圖片加載

分析下Image組件的圖片加載流程。syncLoad屬性默認為false，創建圖片時創建一個異步任務，并使用互斥鎖。異步加載圖片可以避免阻塞主線程，影響UI交互，適合圖片加載較長時間時使用。異步任務和使用互斥鎖也是有開銷的，也可能會影響內存和性能，需要根據實際業務情況進行設置。

在列表場景下，快速滑動時，圖片刷新會出現閃爍，這時可以設置syncLoad屬性為true，使圖片同步加載，從而避免出現閃爍，可以解決快速滑動時產生的圖片白塊。

build() {
		......
        Row() {
          Row() {
            Image(this.chatItem.user.userImage)
			      ......
            .syncLoad(true)
          }
			......
      }
	......
  }

組件復用

在OpenHarmony應用開發時，自定義組件被@Reusable裝飾器修飾時表示該自定義組件可以復用。在父自定義組件下創建的可復用組件從組件樹上移除后，會被加入父自定義組件的可復用節點緩存里。在父自定義組件再次創建可復用組件時，會通過更新可復用組件的方式，從緩存快速創建可復用組件。

使用裝飾器@Reusable標記一個組件屬于可復用組件后，還需要實現組件復用聲明周期回調函數aboutToReuse，其參數為可復用組件的狀態變量。調用可復用自定義組件時，父組件會給子組件傳遞構造數據。示例代碼如下所示：

@Reusable
@Component
struct ReusableChatView {
  @State chatItem: ChatModel = undefined

  aboutToReuse(params) {
    this.chatItem = params.chatItem
  }

  build() {
    ChatView({ chatItem: this.chatItem })
  }
}