[發明專利]Web端長列表渲染方法

有效

• 申請號: 202010166783.6
• 申請日: 2020-03-11
• 公開（公告）號: CN111381823B
• 公開（公告）日: 2022-02-18
• 發明（設計）人: 蘇云祥;祁家林
• 申請（專利權）人: 四川長虹電器股份有限公司
• 主分類號: G06F8/38
• 分類號: G06F8/38
• 代理公司: 四川省成都市天策商標專利事務所(有限合伙) 51213
• 代理人: 張秀敏

本發明公開了一種Web端長列表渲染方法，包括：頁面布局：在根節點中設置固定長度列表；用戶設定需要渲染的數據數組，視圖的高度，和渲染數據所需的渲染函數，根據傳入的數據數組的長度和渲染后的每條數據所占DOM節點的高度，計算出整個頁面的高度；計算出所述固定長度列表中每頁內容所需的數據的最少條數；在固定長度列表的前后分別添加首部監聽節點和尾部監聽節點，再使用Intersection Observer對象為首部監聽節點和尾部監聽節點添加監聽事件，當首部監聽元素監聽事件被觸發時開始進行下拉更新數據，相反的，當尾部監聽元素監聽事件被觸發時開始進行上滑更新數據；本發明運用新的滾動監聽方法和DOM操作算法去優化長列表加載卡頓的問題。

技術領域

本發明涉及web技術領域，特別是一種Web端長列表渲染方法。

背景技術

在應用需要展示大量的數據時經常需要去渲染長列表，在不斷的進行翻頁與加載數據時，頁面的內容會越來越多，頁面在加載更多和更新時會逐漸出現卡頓現象，尤其是在web端網頁，應用的性能比不上其他客戶端，并且DOM的新建和更新也比較耗時，因此在頁面上渲染出大量的DOM節點后，數據的加載和更新會變得十分卡頓，性能很差。而目前最常用的解決方案是數據懶加載和模擬虛擬列表加載，懶加載是每次加載一部分數據，這樣開始時會很快速，頁面十分流暢，但在不斷的加載后頁面越來越長，DOM節點也越來越多，這時頁面就會卡頓，依然不適用于數據量大的應用，而且用戶也無法通過滾動條了解已看的數據量和剩余的數據量，用戶不知道還有多少數據需要查看。而對于模擬虛擬列表加載太過于依賴對滾動的監控，以往監控方式需要通過監聽頁面滾動的位置，再去計算首節點和尾節點的位置，然后判斷是否需要更新頁面數據，而同時DOM更新算法不夠優化，依然需要新建DOM，而且更新當前頁面數據時一旦出現卡頓，當前頁面可能會出現閃爍、空白頁面等情況，因此無論是滾動監控還是頁面DOM的更新的算法都需要優化。

發明內容

為解決現有技術中存在的問題，本發明的目的是提供一種Web端長列表渲染方法，本發明運用新的滾動監聽方法和DOM操作算法去優化長列表加載卡頓的問題。

為實現上述目的，本發明采用的技術方案是：一種Web端長列表渲染方法，包括以下步驟：

步驟1、頁面布局：在根節點中設置固定長度列表，所述固定長度列表從上到下依次包括可視區域上方不可見內容beforeOffset，中間可視區域內容content，可視區域下方不可見內容afterOffse三頁的內容；

步驟2、用戶設定需要渲染的數據數組data，視圖的高度viewHeight，和渲染數據所需的渲染函數，然后根據傳入的數據數組data的長度data.length和渲染后的每條數據所占DOM節點的高度itemHeight，計算出整個頁面的高度totalHeight，totalHeight＝data.length*itemHeight；

步驟3、計算出所述固定長度列表中每頁內容所需的數據的最少條數pageLength，即用viewHeight/data.length的值使用進一法保留整數；

步驟4、在所述固定長度列表的前后分別添加首部監聽節點和尾部監聽節點，再使用Intersection Observer對象為首部監聽節點和尾部監聽節點添加監聽事件，并在首尾添加空白不可見標記元素作為監聽元素，首先在創建監聽對象時傳入callback回調函數與options配置選項，其中options配置選項主要包括root，rootMargin，root表示視窗節點，不傳值表示瀏覽器窗口，rootMargin是對節點的延伸，再對上下margin設置固定高度，增加視圖觸發事件的區域范圍，然后分別添加首尾監聽函數到監聽對象中，當首部監聽元素監聽事件被觸發時開始進行下拉更新數據，相反的，當尾部監聽元素監聽事件被觸發時開始進行上滑更新數據。

作為一種優選的實施方式，在步驟1中，所述固定長度列表中每頁內容高度為最少數據渲染后的dom節點占滿一頁時的高度。