[發明專利]一種樹形數據渲染方法、裝置、設備及介質

有效

• 申請號: 201910524363.8
• 申請日: 2019-06-18
• 公開（公告）號: CN110333864B
• 公開（公告）日: 2021-09-14
• 發明（設計）人: 杜佳;高飛宇
• 申請（專利權）人: 騰訊科技（深圳）有限公司
• 主分類號: G06F8/38
• 分類號: G06F8/38;G06F16/901;G06F16/957
• 代理公司: 廣州三環專利商標代理有限公司 44202
• 代理人: 郝傳鑫;賈允

本發明公開了一種樹形數據渲染方法、裝置、設備及介質，所述方法包括獲取具備樹形拓撲的第一數據，所述第一數據每個節點均對應一個屬性集合；獲取目標節點集，為所述目標節點集中每個節點對應的屬性集合添加深度屬性，所述深度屬性的深度屬性對應值由所述第一數據對應的樹形拓撲結構確定；提取所述目標節點集中各個節點的屬性集合以構建具備目標拓撲的第二數據，所述目標拓撲為不包含繼承關系的拓撲結構；根據所述第二數據中各個節點的深度屬性對應值設置所述節點的縮進量，根據所述縮進量和所述目標拓撲渲染所述第二數據。本發明基于樹形拓撲的數據進行二次建模以得到扁平化結構的數據，從而在保持樹形渲染結果不變的前提下提升了渲染速度。

技術領域

本發明涉及頁面渲染領域，尤其涉及一種樹形數據渲染方法、裝置、設備及介質。

背景技術

現有技術中的前端組件中能夠用于顯示樹形拓撲的組件(例如Ant Design，Element UI)均采用了與樹形拓撲相適應的文檔對象模型(Document Object Model，DOM)，在DOM中可以表征樹形拓撲，只需要使用能夠對應渲染樹形拓撲的前端組件即可達到顯示樹形拓撲的目的。請參考圖1(1)，其示出了Ant Design官方文檔的截圖，從所述官方文檔可以明顯看出其使用的數據模型是樹形拓撲。請參考圖1(2)其示出了Ant Design官方文檔對應的渲染結果，顯然其渲染結果也具有樹形拓撲。以Ant Design為示例可知，現有技術中的用于渲染樹形拓撲的前端組件的內部數據模型與渲染結果具備一致性。

但是，這種一致性為瀏覽器的實時渲染帶來了負擔，在海量數據條件下(比如十萬級數據量)會出現嚴重的性能下降，從而導致瀏覽器近乎假死，難以及時響應用戶操作。

發明內容

為了解決現有技術中對于海量樹形拓撲數據渲染性能嚴重下降的技術問題，本發明實施例提供一種樹形數據渲染方法、裝置、設備及介質。

一方面，本發明提供了一種樹形數據渲染方法，所述方法包括：

獲取具備樹形拓撲結構的第一數據，所述第一數據的每個節點均對應一個屬性集合，所述屬性結合包括至少一個屬性；

獲取所述第一數據中的目標節點集，為所述目標節點集中的每個節點對應的屬性集合添加深度屬性，所述深度屬性的深度屬性對應值由所述第一數據對應的樹形拓撲結構確定；

提取所述目標節點集中各個節點的屬性集合以構建具備目標拓撲的第二數據，所述目標拓撲為不包含繼承關系的拓撲結構；

根據所述第二數據中各個節點的深度屬性對應值設置所述節點的縮進量，根據所述縮進量和所述目標拓撲渲染所述第二數據以得到渲染結果。

另一方面，本發明提供了一種樹形數據渲染裝置，所述裝置包括：

第一數據獲取模塊，用于獲取具備樹形拓撲結構的第一數據，所述第一數據的每個節點均對應一個屬性集合，所述屬性結合包括至少一個屬性；

屬性添加模塊，用于獲取所述第一數據中的目標節點集，為所述目標節點集中的每個節點對應的屬性集合添加深度屬性，所述深度屬性的深度屬性對應值由所述第一數據對應的樹形拓撲結構確定；

重建模模塊，用于提取所述目標節點集中各個節點的屬性集合以構建具備目標拓撲的第二數據，所述目標拓撲為不包含繼承關系的拓撲結構；

渲染模塊，用于根據所述第二數據中各個節點的深度屬性對應值設置所述節點的縮進量，根據所述縮進量和所述目標拓撲渲染所述第二數據以得到渲染結果。

另一方面，本發明提供了一種設備，其特征在于，所述設備包括處理器和存儲器，所述存儲器中存儲有至少一條指令、至少一段程序、代碼集或指令集，所述至少一條指令、所述至少一段程序、所述代碼集或指令集由所述處理器加載并執行以實現一種樹形數據渲染方法。