本發(fā)明涉及視圖渲染，具體說(shuō)是一種基于虛擬列表的視圖展示方法。

背景技術(shù)：

1、在現(xiàn)代web及移動(dòng)應(yīng)用開發(fā)中，滑動(dòng)性能是直接影響用戶體驗(yàn)的關(guān)鍵因素之一。隨著應(yīng)用功能的日益復(fù)雜和數(shù)據(jù)的不斷增長(zhǎng)，特別是在處理包含大量商品分類和列表的應(yīng)用(如同福云商的小程序界面，其中商品分類超過百條)時(shí)，滑動(dòng)性能的優(yōu)化變得尤為重要。如果不對(duì)滑動(dòng)性能進(jìn)行優(yōu)化，小程序界面展示超過百條的商品分類會(huì)遇到滑動(dòng)卡頓、頁(yè)面渲染延遲等問題，這些問題會(huì)嚴(yán)重影響操作流暢度和體驗(yàn)滿意度。例如：

2、在采用了web開發(fā)的小程序中，文檔對(duì)象模型dom(document?object?model)允許程序和腳本動(dòng)態(tài)地訪問和更新文檔的內(nèi)容、結(jié)構(gòu)和樣式(在web環(huán)境中，dom可理解為html或xml文檔的編程接口，它將文檔的內(nèi)容組織成一個(gè)樹狀結(jié)構(gòu)，其中每個(gè)節(jié)點(diǎn)都是一個(gè)對(duì)象，可以通過這些對(duì)象進(jìn)行各種操作，如訪問節(jié)點(diǎn)的值、修改節(jié)點(diǎn)的結(jié)構(gòu)、改變節(jié)點(diǎn)的樣式等)，每次dom元素的更新都會(huì)觸發(fā)小程序界面的重繪(repaint)或重排(reflow)，這些操作都是計(jì)算密集型的，特別是在處理大量dom元素時(shí)，會(huì)導(dǎo)致性能瓶頸；

3、當(dāng)小程序界面需要從服務(wù)器加載大量數(shù)據(jù)時(shí)，頻繁的請(qǐng)求和響應(yīng)處理會(huì)占用大量的網(wǎng)絡(luò)帶寬和客戶端資源，導(dǎo)致小程序界面響應(yīng)緩慢，在數(shù)據(jù)加載或小程序界面渲染過程中，可能會(huì)呈現(xiàn)空白的小程序界面或未完成的小程序界面，這會(huì)影響用戶的等待體驗(yàn)和整體滿意度。

4、公開于該背景技術(shù)部分的信息僅僅旨在加深對(duì)本發(fā)明的總體背景技術(shù)的理解，而不應(yīng)當(dāng)被視為承認(rèn)或以任何形式暗示該信息構(gòu)成已為本領(lǐng)域技術(shù)人員所公知的現(xiàn)有技術(shù)。

技術(shù)實(shí)現(xiàn)思路

1、針對(duì)現(xiàn)有技術(shù)中存在的缺陷，本發(fā)明的目的在于提供一種基于虛擬列表的視圖展示方法，通過減少dom操作、控制元素?cái)?shù)量、使用防抖技術(shù)和數(shù)據(jù)緩存等手段，有效提升了小程序的滑動(dòng)性能和用戶體驗(yàn)，減少了卡頓和等待時(shí)間，同時(shí)優(yōu)化了系統(tǒng)資源利用和降低了網(wǎng)絡(luò)壓力，增強(qiáng)了代碼的可維護(hù)性和擴(kuò)展性，最終促進(jìn)了用戶留存和活躍度，為業(yè)務(wù)發(fā)展提供了有力支持。

2、為達(dá)到以上目的，本發(fā)明采取的技術(shù)方案是：

3、一種基于虛擬列表的視圖展示方法，其特征在于，包括如下步驟：

4、監(jiān)測(cè)頁(yè)面或組件是否因交互操作而觸發(fā)了滑動(dòng)事件；

5、當(dāng)觸發(fā)滑動(dòng)事件時(shí)，啟動(dòng)一個(gè)防抖動(dòng)定時(shí)器，在定時(shí)結(jié)束后，才發(fā)起對(duì)dom元素的渲染請(qǐng)求；

6、當(dāng)響應(yīng)渲染請(qǐng)求時(shí)，首先解析渲染請(qǐng)求涉及的交互界面id，根據(jù)交互界面id加載綁定的骨架屏信息，將骨架屏信息作為渲染加載過程中的臨時(shí)界面進(jìn)行呈現(xiàn)；

7、呈現(xiàn)臨時(shí)界面后，將渲染請(qǐng)求涉及的全部dom元素根據(jù)其在交互界面中的位置依次加載到虛擬存儲(chǔ)列表中，然后獲取滑動(dòng)事件結(jié)束時(shí)滾動(dòng)條的垂直位置，根據(jù)垂直位置對(duì)交互界面進(jìn)行分頁(yè)處理，解析出當(dāng)前屏幕內(nèi)的數(shù)據(jù)以及上下兩屏的數(shù)據(jù)；

8、將當(dāng)前屏幕內(nèi)的數(shù)據(jù)以及上下兩屏的數(shù)據(jù)寫入虛擬列表；

9、對(duì)虛擬列表內(nèi)的dom元素進(jìn)行渲染。

10、在上述技術(shù)方案的基礎(chǔ)上，所述防抖動(dòng)定時(shí)器默認(rèn)為200毫秒；

11、當(dāng)滑動(dòng)事件觸發(fā)時(shí)，經(jīng)過一個(gè)200毫秒的延遲，才發(fā)起對(duì)dom元素的渲染請(qǐng)求；如果在200毫秒內(nèi)再次觸發(fā)滑動(dòng)，之前的延遲會(huì)被取消，并重新開始計(jì)時(shí)。

12、在上述技術(shù)方案的基礎(chǔ)上，所述骨架屏信息包括：

13、html+css元素構(gòu)成的視覺元素；

14、javascript庫(kù)及javascript邏輯代碼構(gòu)成的顯示控制邏輯；

15、占位圖片構(gòu)成的占位元素。

16、在上述技術(shù)方案的基礎(chǔ)上，在獲取滾動(dòng)條的垂直位置后，基于可視區(qū)域高度和每個(gè)列表項(xiàng)的高度，確定需要渲染的列表項(xiàng)范圍，進(jìn)而對(duì)交互界面進(jìn)行分頁(yè)處理。

17、在上述技術(shù)方案的基礎(chǔ)上，渲染當(dāng)前屏幕內(nèi)的數(shù)據(jù)時(shí)，解析涉及的dom元素的數(shù)量及優(yōu)先級(jí)，按優(yōu)先級(jí)高低依次渲染對(duì)應(yīng)的dom元素并替代骨架屏中的占位元素，呈現(xiàn)實(shí)際的交互界面內(nèi)容。

18、在上述技術(shù)方案的基礎(chǔ)上，當(dāng)虛擬列表內(nèi)的dom元素渲染完畢時(shí)，逐個(gè)漸進(jìn)式的替代骨架屏中的占位元素，所述漸進(jìn)式的替代是指先調(diào)用并呈現(xiàn)過渡動(dòng)畫效果，然后再用渲染完畢的dom元素替代骨架屏中的占位元素。

19、在上述技術(shù)方案的基礎(chǔ)上，還包括：臨時(shí)列表，用于存儲(chǔ)響應(yīng)渲染請(qǐng)求后已經(jīng)完成渲染處理的dom元素，用于將已經(jīng)完成渲染處理的dom元素與骨架屏綁定；

20、當(dāng)骨架屏非首次呈現(xiàn)時(shí)，讀取臨時(shí)列表中的已經(jīng)完成渲染處理的dom元素，并隨骨架屏同步呈現(xiàn)。

21、本發(fā)明所述的一種基于虛擬列表的視圖展示方法，具有以下有益效果：

22、1、通過減少不必要的dom操作和控制滑動(dòng)列表中的元素?cái)?shù)量，避免了因渲染過多元素而導(dǎo)致的滑動(dòng)卡頓問題，提升了用戶操作的流暢度。

23、通過減少dom元素?cái)?shù)量和避免不必要的重繪、重排操作，減少了瀏覽器的計(jì)算負(fù)擔(dān)，提高了系統(tǒng)資源的利用率。

24、2、使用防抖技術(shù)減少接口請(qǐng)求頻率，以及通過數(shù)據(jù)緩存技術(shù)減少服務(wù)器請(qǐng)求和數(shù)據(jù)加載時(shí)間，使得頁(yè)面響應(yīng)更加迅速，用戶等待時(shí)間減少。

25、通過減少接口請(qǐng)求次數(shù)和數(shù)據(jù)傳輸量，降低了網(wǎng)絡(luò)帶寬的占用，減輕了服務(wù)器的負(fù)擔(dān)，提高了系統(tǒng)的穩(wěn)定性和可擴(kuò)展性。

26、3、在數(shù)據(jù)加載或頁(yè)面渲染過程中展示骨架屏，給用戶一種數(shù)據(jù)正在加載的直觀感受，緩解了用戶因等待而產(chǎn)生的焦慮，提升了用戶體驗(yàn)。

27、上述技術(shù)的應(yīng)用減少了滑動(dòng)時(shí)的卡頓，加快了頁(yè)面渲染速度，降低了服務(wù)器的負(fù)載，并且通過優(yōu)化數(shù)據(jù)加載和渲染流程，提高了數(shù)據(jù)加載效率。

28、本發(fā)明所述的一種基于虛擬列表的視圖展示方法，可以很容易地集成到現(xiàn)有的小程序或web應(yīng)用中，提高了代碼的重用性和可移植性，增強(qiáng)了系統(tǒng)的可維護(hù)性和擴(kuò)展性，降低了能耗，并確保了應(yīng)用的響應(yīng)速度；改善了用戶互動(dòng)體驗(yàn)，能夠提升用戶的滿意度和忠誠(chéng)度，進(jìn)而促進(jìn)用戶的留存和轉(zhuǎn)化；用戶能夠更加順暢地瀏覽商品和分類，提高了用戶的活躍度和參與度，為用戶提供了更加流暢和愉悅的瀏覽體驗(yàn)。

技術(shù)特征：

1.一種基于虛擬列表的視圖展示方法，其特征在于，包括如下步驟：

2.如權(quán)利要求1所述的一種基于虛擬列表的視圖展示方法，其特征在于，所述防抖動(dòng)定時(shí)器默認(rèn)為200毫秒；

3.如權(quán)利要求1所述的一種基于虛擬列表的視圖展示方法，其特征在于，所述骨架屏信息包括：

4.如權(quán)利要求1所述的一種基于虛擬列表的視圖展示方法，其特征在于，在獲取滾動(dòng)條的垂直位置后，基于可視區(qū)域高度和每個(gè)列表項(xiàng)的高度，確定需要渲染的列表項(xiàng)范圍，進(jìn)而對(duì)交互界面進(jìn)行分頁(yè)處理。

5.如權(quán)利要求1所述的一種基于虛擬列表的視圖展示方法，其特征在于，渲染當(dāng)前屏幕內(nèi)的數(shù)據(jù)時(shí)，解析涉及的dom元素的數(shù)量及優(yōu)先級(jí)，按優(yōu)先級(jí)高低依次渲染對(duì)應(yīng)的dom元素并替代骨架屏中的占位元素，呈現(xiàn)實(shí)際的交互界面內(nèi)容。

6.如權(quán)利要求1所述的一種基于虛擬列表的視圖展示方法，其特征在于，當(dāng)虛擬列表內(nèi)的dom元素渲染完畢時(shí)，逐個(gè)漸進(jìn)式的替代骨架屏中的占位元素，所述漸進(jìn)式的替代是指先調(diào)用并呈現(xiàn)過渡動(dòng)畫效果，然后再用渲染完畢的dom元素替代骨架屏中的占位元素。

7.如權(quán)利要求1所述的一種基于虛擬列表的視圖展示方法，其特征在于，還包括：臨時(shí)列表，用于存儲(chǔ)響應(yīng)渲染請(qǐng)求后已經(jīng)完成渲染處理的dom元素，用于將已經(jīng)完成渲染處理的dom元素與骨架屏綁定；

技術(shù)總結(jié)
本發(fā)明涉及一種基于虛擬列表的視圖展示方法，包括如下步驟：當(dāng)觸發(fā)滑動(dòng)事件時(shí)，啟動(dòng)一個(gè)防抖動(dòng)定時(shí)器，定時(shí)結(jié)束后發(fā)起對(duì)DOM元素的渲染請(qǐng)求；將骨架屏信息作為渲染加載過程中的臨時(shí)界面進(jìn)行呈現(xiàn)；將渲染請(qǐng)求涉及的全部DOM元素根據(jù)其在交互界面中的位置依次加載到虛擬存儲(chǔ)列表中；將當(dāng)前屏幕內(nèi)的數(shù)據(jù)以及上下兩屏的數(shù)據(jù)寫入虛擬列表；對(duì)虛擬列表內(nèi)的DOM元素進(jìn)行渲染。本發(fā)明，通過減少DOM操作、控制元素?cái)?shù)量、使用防抖技術(shù)和數(shù)據(jù)緩存等手段，有效提升了小程序的滑動(dòng)性能和用戶體驗(yàn)，減少了卡頓和等待時(shí)間，同時(shí)優(yōu)化了系統(tǒng)資源利用和降低了網(wǎng)絡(luò)壓力，增強(qiáng)了代碼的可維護(hù)性和擴(kuò)展性，最終促進(jìn)了用戶留存和活躍度，為業(yè)務(wù)發(fā)展提供了有力支持。

技術(shù)研發(fā)人員：李坤達(dá),劉山國(guó),劉輝,尹志剛,盧述奇,何畏
受保護(hù)的技術(shù)使用者：同福集團(tuán)股份有限公司
技術(shù)研發(fā)日：
技術(shù)公布日：2025/1/2