[發(fā)明專利]一種Web瀏覽器下的大數(shù)據(jù)量樹形結(jié)構(gòu)渲染系統(tǒng)及方法

有效

• 申請?zhí)枺?/td>: 202210440881.3
• 申請日: 2022-04-26
• 公開（公告）號: CN114547525B
• 公開（公告）日: 2022-08-05
• 發(fā)明（設(shè)計）人: 歐陽建龍;張曉宇;石丹杰
• 申請（專利權(quán)）人: 成都瑞華康源科技有限公司
• 主分類號: G06F16/958
• 分類號: G06F16/958;G06F16/2455;G06F16/25
• 代理公司: 成都正德明志知識產(chǎn)權(quán)代理有限公司 51360
• 代理人: 楊木梅

本發(fā)明公開了一種Web瀏覽器下的大數(shù)據(jù)量樹形結(jié)構(gòu)渲染系統(tǒng)及方法，方法包括以下步驟：S1、通過數(shù)據(jù)模塊調(diào)用服務(wù)端系統(tǒng)接口獲取服務(wù)端系統(tǒng)數(shù)據(jù)，得到真實數(shù)據(jù)；S2、通過中央處理模塊獲取真實數(shù)據(jù)和緩存模塊的緩存數(shù)據(jù)，調(diào)用比對算法獲取比對結(jié)果構(gòu)建虛擬DOM樹數(shù)據(jù)；S3、根據(jù)虛擬DOM樹數(shù)據(jù)調(diào)用渲染模塊構(gòu)建真實DOM樹結(jié)構(gòu)，完成渲染W(wǎng)eb瀏覽器界面。本發(fā)明通過將大數(shù)據(jù)量轉(zhuǎn)換為真實DOM樹結(jié)構(gòu)數(shù)據(jù)，并采用分頁查詢的形式，轉(zhuǎn)換成小數(shù)據(jù)量模式，采用樹形結(jié)構(gòu)+面包屑路徑的形式，將真實DOM樹結(jié)構(gòu)轉(zhuǎn)化成平鋪結(jié)構(gòu)通過瀏覽器裝置展現(xiàn)，分頁小數(shù)據(jù)量渲染也能夠減輕瀏覽器負荷，達到同樣的樹形層次結(jié)構(gòu)展示。

技術(shù)領(lǐng)域

本發(fā)明屬于大數(shù)據(jù)分析技術(shù)領(lǐng)域，具體涉及一種Web瀏覽器下的大數(shù)據(jù)量樹形結(jié)構(gòu)渲染系統(tǒng)及方法。

背景技術(shù)

樹形結(jié)構(gòu)數(shù)據(jù)在Web瀏覽器上展現(xiàn)目前局限于較小量數(shù)據(jù)（小于1000條數(shù)據(jù)），當數(shù)據(jù)量巨大情況下會出現(xiàn)瀏覽器渲染緩慢，無法正常展現(xiàn)數(shù)據(jù)，瀏覽器無響應(yīng)等情況。因為大數(shù)據(jù)量下，由于瀏覽器會一次性加載大量數(shù)據(jù)并完成樹形結(jié)構(gòu)渲染，耗費大量內(nèi)存空間和GPU。如果直接渲染到真實DOM上會引起整個DOM樹重繪和重排，在修改或者刪除某個節(jié)點時候必定造成回流，引起整個DOM樹結(jié)構(gòu)多次回流和重繪，很多未修改節(jié)點也被重新渲染，造成頁面加載緩慢。

目前樹形結(jié)構(gòu)列表展現(xiàn)存在一些問題：

1.目前常規(guī)樹形結(jié)構(gòu)展現(xiàn)，僅僅局限于小數(shù)據(jù)量形式展現(xiàn)在界面上，當同胞兄弟節(jié)點大于1000條以后，便會出現(xiàn)渲染緩慢，甚至渲染不出來，瀏覽器無響應(yīng)情況，無法正常展現(xiàn)數(shù)據(jù)；

2.沒有利用瀏覽器緩存，虛擬DOM對比，造成多次點擊查詢按鈕下發(fā)請求獲取相同數(shù)據(jù)，多次重復渲染情況；

3.通過循環(huán)遞歸對節(jié)點進行依次對比，算法復雜度達到 O(n^3) ，n是樹的節(jié)點數(shù)，如果要展示1000個節(jié)點，得執(zhí)行上億次比較。即便是CPU快能執(zhí)行30億條命令，也很難在一秒內(nèi)計算出差異。

發(fā)明內(nèi)容

針對現(xiàn)有技術(shù)中的上述不足，本發(fā)明提供的一種Web瀏覽器下的大數(shù)據(jù)量樹形結(jié)構(gòu)渲染系統(tǒng)及方法解決了當數(shù)據(jù)量巨大情況下樹形結(jié)構(gòu)數(shù)據(jù)在Web瀏覽器上渲染緩慢的問題。

為了達到上述發(fā)明目的，本發(fā)明采用的技術(shù)方案為：一種Web瀏覽器下的大數(shù)據(jù)量樹形結(jié)構(gòu)渲染系統(tǒng)，包括相互連接的客戶端和服務(wù)端；

所述客戶端包括渲染模塊、數(shù)據(jù)模塊、緩存模塊和中央處理模塊，所述中央處理模塊分別與所述渲染模塊、數(shù)據(jù)模塊和緩存模塊連接；所述服務(wù)端設(shè)置有服務(wù)端系統(tǒng)；所述服務(wù)端系統(tǒng)與所述數(shù)據(jù)模塊連接；

所述數(shù)據(jù)模塊用于發(fā)送http請求，還用于將獲取服務(wù)端的數(shù)據(jù)處理成所需數(shù)據(jù)格式的數(shù)據(jù)；所述緩存模塊用于生成緩存數(shù)據(jù)；所述中央處理模塊用于集中處理獲取的數(shù)據(jù)模塊的真實數(shù)據(jù)和緩存模塊的緩存數(shù)據(jù)，還用于構(gòu)建虛擬DOM樹數(shù)據(jù)；所述渲染模塊用于接收虛擬DOM樹數(shù)據(jù)，構(gòu)建真實DOM樹結(jié)構(gòu)；所述服務(wù)端系統(tǒng)用于傳輸客戶端所需數(shù)據(jù)。

進一步地：所述渲染模塊包括相互連接的面包屑組件和分頁表格組件；所述面包屑組件用于構(gòu)建真實DOM樹結(jié)構(gòu)，所述分頁表格組件用于進行分頁查詢虛擬DOM樹數(shù)據(jù)生成分頁表格。

上述進一步方案的有益效果為：渲染模塊為一種處理面包屑組件和分頁表格組件實現(xiàn)界面更新的渲染工具。根據(jù)傳入的虛擬DOM樹數(shù)據(jù)，通過渲染模塊的分頁表格組件的創(chuàng)建方法構(gòu)建成真實DOM樹結(jié)構(gòu)，然后更新界面。

一種Web瀏覽器下的大數(shù)據(jù)量樹形結(jié)構(gòu)渲染方法，包括以下步驟：

S1、通過數(shù)據(jù)模塊調(diào)用服務(wù)端系統(tǒng)接口獲取服務(wù)端系統(tǒng)數(shù)據(jù)，得到真實數(shù)據(jù)；

S2、通過中央處理模塊獲取真實數(shù)據(jù)和緩存模塊的緩存數(shù)據(jù)，調(diào)用比對算法獲取比對結(jié)果構(gòu)建虛擬DOM樹數(shù)據(jù)；