一、長列表優(yōu)化概述

????????列表是應(yīng)用開發(fā)中最常見的一類開發(fā)場景，它可以將雜亂的信息整理成有規(guī)律、易于理解和操作的形式，便于用戶查找和獲取所需要的信息。應(yīng)用程序中常見的列表場景有新聞列表、購物車列表、各類排行榜等。隨著信息數(shù)據(jù)的累積，特別是一些新聞應(yīng)用、購物應(yīng)用、聊天應(yīng)用，列表數(shù)據(jù)往往會達到上萬條，針對這類大量數(shù)據(jù)加載的長列表應(yīng)用，如何對長列表的性能進行優(yōu)化是非常重要的。一個正確、高性能的長列表應(yīng)用能明顯降低列表渲染時間、提升頁面的滑動幀率、降低應(yīng)用內(nèi)存占用，大幅提升用戶體驗。

二、優(yōu)化手段

? ? ? ? 1、懶加載

????????提供列表數(shù)據(jù)按需加載能力，解決一次性加載長列表數(shù)據(jù)耗時長、占用過多資源的問題，可以提升頁面響應(yīng)速度。?

? ? ? ? （1）ForEach

????????ForEach循環(huán)渲染的過程如下：

? ? ? ? a、從列表數(shù)據(jù)源一次性加載全量數(shù)據(jù)

? ? ? ? b、為列表數(shù)據(jù)的每一個元素都創(chuàng)建對應(yīng)的組件，并全部掛載在組件樹上。即，ForEach遍歷多少個列表元素，就創(chuàng)建多少個ListItem組件節(jié)點并依次掛載在List組件樹根節(jié)點上

? ? ? ? c、列表內(nèi)容顯示時，只渲染屏幕可視區(qū)內(nèi)的ListItem組件，可視區(qū)外的ListItem組件滑動進入屏幕內(nèi)時，因為已經(jīng)完成了數(shù)據(jù)加載和組件創(chuàng)建掛載，直接渲染即可

????????

????????如果列表數(shù)據(jù)較少，數(shù)據(jù)一次性全量加載不是性能瓶頸時，可以直接使用ForEach；但是當數(shù)據(jù)量大、組件結(jié)構(gòu)復雜的情況下ForEach會出現(xiàn)性能瓶頸。這是因為要一次性加載所有的列表數(shù)據(jù)，創(chuàng)建所有組件節(jié)點并完成組件樹的構(gòu)建，在數(shù)據(jù)量大時會非常耗時，從而導致頁面啟動時間過長。另外，屏幕可視區(qū)外的組件雖然不會顯示在屏幕上，但是仍然會占用內(nèi)存。在系統(tǒng)處于高負載的情況下，更容易出現(xiàn)性能問題，極限情況下甚至會導致應(yīng)用異常退出。

? ? ? ? （2）LazyForEach?

????????LazyForEach懶加載的原理和渲染過程如下：

? ? ? ? a、LazyForEach會根據(jù)屏幕可視區(qū)能夠容納顯示的組件數(shù)量按需加載數(shù)據(jù)

? ? ? ? b、根據(jù)加載的數(shù)據(jù)量創(chuàng)建組件，掛載在組件樹上，構(gòu)建出一棵短小的組件樹。即，屏幕可以展示多少列表項組件，就按需創(chuàng)建多少個ListItem組件節(jié)點掛載在List組件樹根節(jié)點上

? ? ? ? c、?屏幕可視區(qū)只展示部分組件。當可視區(qū)外的組件需要在屏幕內(nèi)顯示時，需要從頭完成數(shù)據(jù)加載、組件創(chuàng)建、掛載組件樹這一過程，直至渲染到屏幕上

????????

????????LazyForEach實現(xiàn)了按需加載，針對列表數(shù)據(jù)量大、列表組件復雜的場景，減少了頁面首次啟動時一次性加載數(shù)據(jù)的時間消耗，減少了內(nèi)存峰值。不過在長列表滑動的過程中，因為需要根據(jù)用戶的滑動行為不斷地加載新的內(nèi)容，這需要進行額外的數(shù)據(jù)請求和處理，會增加滑動時的計算量，從而對性能產(chǎn)生一定的影響。然而，合理使用LazyForEach的按需加載能力，通過在滑動停止或達到某個閾值時才進行加載，可以減少不必要的計算和請求，從而提高性能，給用戶帶來更好的體驗。總之，在實現(xiàn)按需加載的場景中，需要綜合考慮性能和用戶體驗的平衡，合理地優(yōu)化加載邏輯和渲染方式，以提升整體的性能表現(xiàn)。

? ? ? ? 2、緩存列表項

????????提供屏幕可視區(qū)域外列表項長度的自定義調(diào)節(jié)能力，配合懶加載設(shè)置可緩存列表項參數(shù)，通過預(yù)加載數(shù)據(jù)提升列表滑動體驗。

????????LazyForEach懶加載可以通過設(shè)置cachedCount來指定緩存數(shù)量，在設(shè)置cachedCount后，除屏幕內(nèi)顯示的ListItem組件外，還會預(yù)先將屏幕可視區(qū)外指定數(shù)量的列表項數(shù)據(jù)緩存。這樣當一個屏幕數(shù)據(jù)加載完成后，再次向下滑動時，會先加載上一次請求的數(shù)據(jù)，加載完成后，再加載本次請求的數(shù)據(jù)。LazyForEach添加了cachedCount緩存列表項后，其渲染過程如下：

? ? ? ? a、首先，請求n+cachedCount條數(shù)據(jù)，并在屏幕上顯示n條數(shù)據(jù)

? ? ? ? b、當列表滑動，緩存列表項需要從屏幕可視區(qū)外進入可視區(qū)內(nèi)時，此時只用渲染組件即可，相比不設(shè)置cachedCount提升了顯示效率

? ? ? ? c、當列表不斷滑動，屏幕可視區(qū)外緩存的列表項數(shù)量少于cachedCount設(shè)置數(shù)量時，會觸發(fā)列表項數(shù)據(jù)加載事件，繼續(xù)預(yù)加載下一組緩存列表項（cachedCount個）

? ? ? ? d、當上滑下滑間隔進行時，列表兩個方向分別緩存cachedCount條數(shù)據(jù)

? ? ? ? e、如果不顯式設(shè)置cachedCount，cachedCount默認為1

????????

????????緩存列表項適合加載列表項數(shù)據(jù)請求比較耗時的場景。比如，滑動列表中含有短視頻、高清圖片等數(shù)據(jù)量比較大的資源，可以通過預(yù)先從網(wǎng)絡(luò)加載并緩存相關(guān)數(shù)據(jù)，縮短渲染前的準備時間，提升列表響應(yīng)速度。

????????使用限制為：緩存列表項僅在使用LazyForEach懶加載時有效，ForEach循環(huán)渲染會一次性加載全量數(shù)據(jù)，故無法也不需要設(shè)置緩存列表項。?

? ? ? ? 3、動態(tài)預(yù)加載

????????根據(jù)歷史任務(wù)加載耗時情況，動態(tài)調(diào)整屏幕可視區(qū)域外數(shù)據(jù)預(yù)取數(shù)量，配合懶加載設(shè)置，可在列表不斷滑動時，屏幕可視區(qū)外實時更新列表數(shù)據(jù)，通過預(yù)取和預(yù)渲染數(shù)據(jù)提升列表滑動體驗。

????????HarmonyOS提供了內(nèi)容預(yù)取的能力Prefetcher，支持應(yīng)用動態(tài)自適應(yīng)網(wǎng)絡(luò)狀態(tài)，通過提前下載一些圖片或資源，確保相關(guān)資源在需要時能立即顯示，以盡可能減少白塊出現(xiàn)的概率。

????????LazyForEach懶加載可以通過使用Prefetcher來預(yù)取和預(yù)渲染數(shù)據(jù)。在使用Prefetcher后，除屏幕內(nèi)顯示的ListItem組件外，還會預(yù)先將屏幕可視區(qū)外的部分列表項數(shù)據(jù)進行預(yù)渲染和預(yù)取。這樣當列表向下滑動時，會先顯示預(yù)渲染組件，屏幕可視區(qū)外會動態(tài)調(diào)整預(yù)取范圍。預(yù)取邏輯在Prefetcher的BasicPrefetcher類中實現(xiàn)，BasicPrefetcher支持預(yù)取和預(yù)渲染（圖像解碼、添加到組件樹等）過程分離、自適應(yīng)調(diào)整預(yù)獲取范圍、優(yōu)先加載可視區(qū)域、以及取消不必要任務(wù)（快速滾動列表的場景下，智能取消不必要任務(wù)），其渲染過程如下：

? ? ? ? a、首先，請求n條數(shù)據(jù)，并在屏幕上顯示m條數(shù)據(jù)

? ? ? ? b、當列表滑動，緩存列表項需要從屏幕可視區(qū)外進入可視區(qū)內(nèi)時，此時顯示預(yù)渲染組件，屏幕可視區(qū)外會動態(tài)調(diào)整預(yù)取范圍，相比僅設(shè)置cachedCount提升了顯示效率

? ? ? ? c、當列表不斷滑動，屏幕可視區(qū)外實時更新列表項、更新預(yù)取數(shù)據(jù)和預(yù)渲染數(shù)據(jù)

????????

????????動態(tài)預(yù)加載適合加載列表項數(shù)據(jù)請求比較耗時的場景。

? ? ? ? 4、組件復用

????????提供可復用組件對象的緩存資源池，通過重復使用已經(jīng)創(chuàng)建過并緩存的組件對象，降低相同組件短時間內(nèi)頻繁創(chuàng)建和銷毀的開銷，提升組件渲染效率。

????????HarmonyOS應(yīng)用框架提供了組件復用能力，可復用組件從組件樹上移除時，會進入到一個回收緩存區(qū)。后續(xù)創(chuàng)建新組件節(jié)點時，會復用緩存區(qū)中的節(jié)點，節(jié)約組件重新創(chuàng)建的時間。尤其在列表等場景下，其自定義子組件具有相同的組件布局結(jié)構(gòu)，列表更新時僅有狀態(tài)變量等數(shù)據(jù)差異。通過組件復用可以提高列表頁面的加載速度和響應(yīng)速度。

????????組件復用機制如下：

? ? ? ? a、標記為@Reusable的組件從組件樹上被移除時，組件和其對應(yīng)的JSView對象都會被放入復用緩存中

? ? ? ? b、當列表滑動新的ListItem將要被顯示，List組件樹上需要新建節(jié)點時，將會從復用緩存中查找可復用的組件節(jié)點

? ? ? ? c、找到可復用節(jié)點并對其進行更新后添加到組件樹中。從而節(jié)省了組件節(jié)點和JSView對象的創(chuàng)建時間

????????

????????組件復用生效的條件是：

? ? ? ? （1）自定義組件被@Reusable裝飾器修飾，即表示其具備組件復用的能力

? ? ? ? （2）在一個自定義父組件下創(chuàng)建出來的具備組件復用能力的自定義子組件，在可復用自定義組件從組件樹上移除之后，會被加入到其自定義父組件的可復用節(jié)點緩存中

? ? ? ? （3）在一個自定義父組件下創(chuàng)建可復用的子組件時，若其父自定義組件的可復用節(jié)點緩存中有對應(yīng)類型的可復用子組件，會通過更新可復用子組件的方式，快速創(chuàng)建可復用子組件

? ? ? ? （4）?ForEach循環(huán)渲染會一次性加載全量數(shù)據(jù)，因此不支持組件復用

????????若業(yè)務(wù)實現(xiàn)中存在以下場景，并成為UI線程的幀率瓶頸，推薦使用組件復用：

? ? ? ? （1）列表滾動：當應(yīng)用需要展示大量數(shù)據(jù)的列表，并且用戶進行滾動操作時，頻繁創(chuàng)建和銷毀列表項的視圖可能導致卡頓和性能問題。在這種情況下，使用列表組件的組件復用機制可以重用已經(jīng)創(chuàng)建的列表項視圖，提高滾動的流暢度

? ? ? ? （2）動態(tài)布局更新：如果應(yīng)用中的界面需要頻繁地進行布局更新，例如根據(jù)用戶的操作或數(shù)據(jù)變化動態(tài)改變視圖結(jié)構(gòu)和樣式，重復創(chuàng)建和銷毀視圖可能導致頻繁的布局計算，影響幀率。在這種情況下，使用組件復用可以避免不必要的視圖創(chuàng)建和布局計算，提高性能

????????（3）地圖渲染：在地圖渲染這種場景下，頻繁創(chuàng)建和銷毀數(shù)據(jù)項的視圖可能導致性能問題。使用組件復用可以重用已創(chuàng)建的視圖，只更新數(shù)據(jù)的內(nèi)容，減少視圖的創(chuàng)建和銷毀，能有效提高性能

? ? ? ? 5、布局優(yōu)化

????????使用扁平化布局方案，減少視圖嵌套層級和組件數(shù)，避免過度繪制，提升頁面渲染效率。

????????列表不同于其他布局，包含了大量重復循環(huán)的ListItem，所以對每一個ListItem的布局優(yōu)化格外重要。錯誤的布局方式可能會導致組件樹和嵌套層數(shù)過多，在創(chuàng)建和布局繪制階段產(chǎn)生較大的性能開銷，導致界面卡頓。合理使用布局，減少嵌套層數(shù)，能提高布局效率。