[發明專利]表格頁面渲染方法、裝置、電子裝置和存儲介質

在審

• 申請號: 202210747769.4
• 申請日: 2022-06-29
• 公開（公告）號: CN115203603A
• 公開（公告）日: 2022-10-18
• 發明（設計）人: 柏立悅;王杰暢;陳善鎮
• 申請（專利權）人: 浙江中控技術股份有限公司
• 主分類號: G06F16/957
• 分類號: G06F16/957;G06F16/958
• 代理公司: 暫無信息
• 代理人: 暫無信息

本申請涉及一種表格頁面渲染方法、裝置、電子裝置和存儲介質，其中，該表格頁面渲染方法包括：獲取表格參數、可視區域以及虛擬列表區域，根據所述表格參數，獲取第一渲染數據以及生成表格總范圍；根據所述第一渲染數據對所述虛擬列表區域的頁面進行渲染，生成表格頁面；檢測所述虛擬列表區域的數據是否全部有值；若所述虛擬列表區域的數據不是全部有值，則獲取虛擬列表區域的第二渲染數據，對所述虛擬列表區域的頁面進行渲染更新所述表格頁面。通過本申請，解決了頁面滾動渲染慢的問題，實現表格數據的按需加載和分片渲染，極大的提高了瀏覽器對大型表格數據的渲染性能，對類似需求場景下的開發工作具有很好的普適性。

技術領域

本申請涉及互聯網技術領域，特別是涉及表格頁面渲染方法、裝置、電子裝置和存儲介質。

背景技術

隨著互聯網行業的迅猛發展，web前端技術也處于高速發展階段。Web項目的數量和規模在不斷擴大，項目的復雜度在不斷提升。

Web前端發展的初期階段，前端開發主要是實現后臺數據的簡單排版，以及數據展示。這種方式主要通過后臺來實現數據的維護和表格參數的整體刷新，加之初期受瀏覽器性能限制，頁面資源消耗很大。

web前端發展到2.0階段后，出現了Ajax通信與頁面局部更新機制，有限緩解了整體頁面刷新導致的性能瓶頸。這種方案的主流實現方案為模板引擎技術，將數據通過模板引擎渲染到視圖，再將舊視圖進行替換，從而實現頁面的局部更新。但是隨著項目復雜度越來越高，加載的數據量越來越大，會引發潛在的性能問題：如果海量數據要加載渲染，導致頁面渲染的DOM節點也很多，這樣視圖在更新時，要對大量的DOM節點進行替換操作，而DOM節點的操作是瀏覽器的性能瓶頸，所以造成的性能開銷很大，容易造成頁面白屏或卡頓現象。

通過表格對表格參數進行展示，是很多web項目中常見的應用場景。而表格中的行和列都對應一個DOM節點，如果不做任何優化，直接渲染大量的DOM節點，即使框架本身用了虛擬DOM，但是在首次渲染的時候，仍然生成了大量的真實DOM，進入頁面后，需要渲染這批節點，就會花費很長的時間，從而出現白屏現象。此外，如果在頁面觸發了滾動時間，則會使得內存使用率增加，出現頁面卡頓的操作感受。如果同時渲染大批量的DOM節點，仍會造成以下幾個問題：1.瀏覽器失幀。因為渲染較慢，所以無法維持瀏覽器的幀率，用戶主觀感受為嚴重的卡頓。2.頁面失去響應或者其他時間無法及時被觸發。

針對相關技術中存在頁面滾動渲染慢的問題，目前還沒有提出有效的解決方案。

發明內容

在本實施例中提供了一種表格頁面渲染方法、裝置、電子裝置和存儲介質，以解決相關技術中頁面滾動渲染慢的問題。

第一個方面，在本實施例中提供了一種表格頁面渲染方法，包括：

獲取表格參數、可視區域以及虛擬列表區域，其中，所述表格頁面顯示在屏幕上的區域為可視區域，所述虛擬列表區域包含所述可視區域；

根據所述表格參數，獲取第一渲染數據以及生成表格總范圍；

根據所述第一渲染數據對所述虛擬列表區域的頁面進行渲染，生成表格頁面；

檢測所述虛擬列表區域的數據是否全部有值；

若所述虛擬列表區域的數據不是全部有值，則獲取虛擬列表區域的第二渲染數據，對所述虛擬列表區域的頁面進行渲染更新所述表格頁面。

在其中的一些實施例中，所述獲取表格參數、可視區域以及虛擬列表區域包括：

獲取所述可視區域的位置參數；

根據所述位置參數，更新所述虛擬列表區域。

在其中的一些實施例中，所述根據所述第一渲染數據對所述虛擬列表區域的頁面進行渲染，生成表格頁面包括：

接收客戶端發送的刷新頁面請求；