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

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

二、優(yōu)化手段

? ? ? ? 1、懶加載

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

? ? ? ? （1）ForEach

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

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

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

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

????????

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

? ? ? ? （2）LazyForEach?

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

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

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

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

????????

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

? ? ? ? 2、緩存列表項(xiàng)

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

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

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

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

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

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

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

????????

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

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

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

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

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

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

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

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

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

????????

????????動(dòng)態(tài)預(yù)加載適合加載列表項(xiàng)數(shù)據(jù)請(qǐng)求比較耗時(shí)的場(chǎng)景。

? ? ? ? 4、組件復(fù)用

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

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

????????組件復(fù)用機(jī)制如下：

? ? ? ? a、標(biāo)記為@Reusable的組件從組件樹(shù)上被移除時(shí)，組件和其對(duì)應(yīng)的JSView對(duì)象都會(huì)被放入復(fù)用緩存中

? ? ? ? b、當(dāng)列表滑動(dòng)新的ListItem將要被顯示，List組件樹(shù)上需要新建節(jié)點(diǎn)時(shí)，將會(huì)從復(fù)用緩存中查找可復(fù)用的組件節(jié)點(diǎn)

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

????????

????????組件復(fù)用生效的條件是：

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

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

? ? ? ? （3）在一個(gè)自定義父組件下創(chuàng)建可復(fù)用的子組件時(shí)，若其父自定義組件的可復(fù)用節(jié)點(diǎn)緩存中有對(duì)應(yīng)類(lèi)型的可復(fù)用子組件，會(huì)通過(guò)更新可復(fù)用子組件的方式，快速創(chuàng)建可復(fù)用子組件

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

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

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

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

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

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

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

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