[发明专利]一种树形数据渲染方法、装置、设备及介质

说明书

本发明公开了一种树形数据渲染方法、装置、设备及介质，所述方法包括获取具备树形拓扑的第一数据，所述第一数据每个节点均对应一个属性集合；获取目标节点集，为所述目标节点集中每个节点对应的属性集合添加深度属性，所述深度属性的深度属性对应值由所述第一数据对应的树形拓扑结构确定；提取所述目标节点集中各个节点的属性集合以构建具备目标拓扑的第二数据，所述目标拓扑为不包含继承关系的拓扑结构；根据所述第二数据中各个节点的深度属性对应值设置所述节点的缩进量，根据所述缩进量和所述目标拓扑渲染所述第二数据。本发明基于树形拓扑的数据进行二次建模以得到扁平化结构的数据，从而在保持树形渲染结果不变的前提下提升了渲染速度。

技术领域

本发明涉及页面渲染领域，尤其涉及一种树形数据渲染方法、装置、设备及介质。

背景技术

现有技术中的前端组件中能够用于显示树形拓扑的组件(例如Ant Design，Element UI)均采用了与树形拓扑相适应的文档对象模型(Document Object Model，DOM)，在DOM中可以表征树形拓扑，只需要使用能够对应渲染树形拓扑的前端组件即可达到显示树形拓扑的目的。请参考图1(1)，其示出了Ant Design官方文档的截图，从所述官方文档可以明显看出其使用的数据模型是树形拓扑。请参考图1(2)其示出了Ant Design官方文档对应的渲染结果，显然其渲染结果也具有树形拓扑。以Ant Design为示例可知，现有技术中的用于渲染树形拓扑的前端组件的内部数据模型与渲染结果具备一致性。

但是，这种一致性为浏览器的实时渲染带来了负担，在海量数据条件下(比如十万级数据量)会出现严重的性能下降，从而导致浏览器近乎假死，难以及时响应用户操作。

发明内容

为了解决现有技术中对于海量树形拓扑数据渲染性能严重下降的技术问题，本发明实施例提供一种树形数据渲染方法、装置、设备及介质。

一方面，本发明提供了一种树形数据渲染方法，所述方法包括：

获取具备树形拓扑结构的第一数据，所述第一数据的每个节点均对应一个属性集合，所述属性结合包括至少一个属性；

获取所述第一数据中的目标节点集，为所述目标节点集中的每个节点对应的属性集合添加深度属性，所述深度属性的深度属性对应值由所述第一数据对应的树形拓扑结构确定；

提取所述目标节点集中各个节点的属性集合以构建具备目标拓扑的第二数据，所述目标拓扑为不包含继承关系的拓扑结构；

根据所述第二数据中各个节点的深度属性对应值设置所述节点的缩进量，根据所述缩进量和所述目标拓扑渲染所述第二数据以得到渲染结果。

另一方面，本发明提供了一种树形数据渲染装置，所述装置包括：

第一数据获取模块，用于获取具备树形拓扑结构的第一数据，所述第一数据的每个节点均对应一个属性集合，所述属性结合包括至少一个属性；

属性添加模块，用于获取所述第一数据中的目标节点集，为所述目标节点集中的每个节点对应的属性集合添加深度属性，所述深度属性的深度属性对应值由所述第一数据对应的树形拓扑结构确定；

重建模模块，用于提取所述目标节点集中各个节点的属性集合以构建具备目标拓扑的第二数据，所述目标拓扑为不包含继承关系的拓扑结构；

渲染模块，用于根据所述第二数据中各个节点的深度属性对应值设置所述节点的缩进量，根据所述缩进量和所述目标拓扑渲染所述第二数据以得到渲染结果。

另一方面，本发明提供了一种设备，其特征在于，所述设备包括处理器和存储器，所述存储器中存储有至少一条指令、至少一段程序、代码集或指令集，所述至少一条指令、所述至少一段程序、所述代码集或指令集由所述处理器加载并执行以实现一种树形数据渲染方法。