一种树形数据渲染方法、装置、设备及介质制造方法及图纸

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

A tree data rendering method, device, device and medium

【技术实现步骤摘要】
一种树形数据渲染方法、装置、设备及介质
本专利技术涉及页面渲染领域，尤其涉及一种树形数据渲染方法、装置、设备及介质。
技术介绍
现有技术中的前端组件中能够用于显示树形拓扑的组件(例如AntDesign，ElementUI)均采用了与树形拓扑相适应的文档对象模型(DocumentObjectModel，DOM)，在DOM中可以表征树形拓扑，只需要使用能够对应渲染树形拓扑的前端组件即可达到显示树形拓扑的目的。请参考图1(1)，其示出了AntDesign官方文档的截图，从所述官方文档可以明显看出其使用的数据模型是树形拓扑。请参考图1(2)其示出了AntDesign官方文档对应的渲染结果，显然其渲染结果也具有树形拓扑。以AntDesign为示例可知，现有技术中的用于渲染树形拓扑的前端组件的内部数据模型与渲染结果具备一致性。但是，这种一致性为浏览器的实时渲染带来了负担，在海量数据条件下(比如十万级数据量)会出现严重的性能下降，从而导致浏览器近乎假死，难以及时响应用户操作。
技术实现思路
为了解决现有技术中对于海量树形拓扑数据渲染性能严重下降的技术问题，本专利技术实施例提供一种树形数据渲染方法、装置、设备及介质。一方面，本专利技术提供了一种树形数据渲染方法，所述方法包括：获取具备树形拓扑结构的第一数据，所述第一数据的每个节点均对应一个属性集合，所述属性结合包括至少一个属性；获取所述第一数据中的目标节点集，为所述目标节点集中的每个节点对应的属性集合添加深度属性，所述深度属性的深度属性对应值由所述第一数据对应的树形拓扑结构确定；提取所述目标节点集中各个节点的属性集合以构建具备目标拓扑的第二数据，所述目标拓扑为不包含继承关系的拓扑结构；根据所述第二数据中各个节点的深度属性对应值设置所述节点的缩进量，根据所述缩进量和所述目标拓扑渲染所述第二数据以得到渲染结果。另一方面，本专利技术提供了一种树形数据渲染装置，所述装置包括：第一数据获取模块，用于获取具备树形拓扑结构的第一数据，所述第一数据的每个节点均对应一个属性集合，所述属性结合包括至少一个属性；属性添加模块，用于获取所述第一数据中的目标节点集，为所述目标节点集中的每个节点对应的属性集合添加深度属性，所述深度属性的深度属性对应值由所述第一数据对应的树形拓扑结构确定；重建模模块，用于提取所述目标节点集中各个节点的属性集合以构建具备目标拓扑的第二数据，所述目标拓扑为不包含继承关系的拓扑结构；渲染模块，用于根据所述第二数据中各个节点的深度属性对应值设置所述节点的缩进量，根据所述缩进量和所述目标拓扑渲染所述第二数据以得到渲染结果。另一方面，本专利技术提供了一种设备，其特征在于，所述设备包括处理器和存储器，所述存储器中存储有至少一条指令、至少一段程序、代码集或指令集，所述至少一条指令、所述至少一段程序、所述代码集或指令集由所述处理器加载并执行以实现一种树形数据渲染方法。另一方面，本专利技术提供了一种计算机存储介质，其特征在于，所述存储介质中存储有至少一条指令、至少一段程序、代码集或指令集，所述至少一条指令、至少一段程序、代码集或指令集由处理器加载并执行一种树形数据渲染方法。本专利技术提供了一种树形数据渲染方法、装置、设备及介质。本专利技术基于树形拓扑的数据进行二次建模以得到扁平化结构的数据，从而在保持树形渲染结果不变的前提下显著提升了渲染的速度。并且通过只渲染当前渲染区间对应的数据，进一步减轻了浏览器的渲染压力，提升了浏览器响应用户操作的速度，以使得体验过程中几乎感觉不到任何延迟，缓解了在大数据量场景下树形数据的渲染压力和提升了响应速度。附图说明为了更清楚地说明本专利技术实施例或现有技术中的技术方案和优点，下面将对实施例或现有技术描述中所需要使用的附图作简单的介绍，显而易见地，下面描述中的附图仅仅是本专利技术的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其它附图。图1(1)是本专利技术
技术介绍
提供的AntDesign官方文档的截图示意图；图1(2)是本专利技术
技术介绍
提供的AntDesign官方文档的截图对应的渲染结果示意图；图2是本专利技术提供的一种树形数据渲染方法流程图；图3是本专利技术提供的树形拓扑示意图；图4是本专利技术提供的一种深度属性对应值的获取方法流程图；图5是本专利技术提供的另一种深度属性值的获取方法流程图；图6是本专利技术提供的现有的前端组件渲染第一数据的示意图；图7是本专利技术提供的第二数据渲染示意图；图8是本专利技术提供的根据所述缩进量和所述目标拓扑渲染所述第二数据流程图；图9是本专利技术提供的渲染逻辑示意图；图10是本专利技术提供的一种树形数据渲染装置框图；图11是本专利技术提供的一种用于实现本专利技术实施例所提供的方法的设备的硬件结构示意图。具体实施方式下面将结合本专利技术实施例中的附图，对本专利技术实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本专利技术一部分实施例，而不是全部的实施例。基于本专利技术中的实施例，本领域普通技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例，都属于本专利技术保护的范围。需要说明的是，本专利技术的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本专利技术的实施例能够以除了在这里图示或描述的那些以外的顺序实施。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或服务器不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。为了使本专利技术实施例公开的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本专利技术实施例进行进一步详细说明。应当理解，此处描述的具体实施例仅仅用以解释本专利技术实施例，并不用于限定本专利技术实施例。为了便于详述本专利技术实施例中的技术方案，本专利技术实施例首先对下述基本概念进行介绍：JavaScript(JS)：一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言。JavaScript为具有函数优先的轻量级解释型或即时编译型的编程语言。DOM：文档对象模型(DocumentObjectModel)，是处理可扩展标志语言的标准编程接口。在网页上，组织页面(或文档)的对象被组织在一个树形拓扑中，用来表示文档中对象的标准模型就称为DOM。padding-left：几乎所有主流浏览器都支持padding-left属性。padding-left属性设置元素左内边距(空白)。行内非替换元素上设置的左内边距仅在元素所生成的第一个行内框的左边出现。padding-top：几乎所有主流浏览器都支持padding-top属性。padding-top属性设置元素的上内边距(顶部空间)。该属性设置元素上内边距的宽度。行内非替换元素上设置的上内边距不会影响行高计算，因此，如果一个元素既有内边距又有背景，从视觉上看可能延伸到其他行，有可能还会与其他内容重叠。不允许指定负内边距值。padding-bottom：几乎所有主流浏览本文档来自技高网...

【技术保护点】
1.一种树形数据渲染方法，其特征在于，所述方法包括：获取具备树形拓扑结构的第一数据，所述第一数据的每个节点均对应一个属性集合，所述属性结合包括至少一个属性；获取所述第一数据中的目标节点集，为所述目标节点集中的每个节点对应的属性集合添加深度属性，所述深度属性的深度属性对应值由所述第一数据对应的树形拓扑结构确定；提取所述目标节点集中各个节点的属性集合以构建具备目标拓扑的第二数据，所述目标拓扑为不包含继承关系的拓扑结构；根据所述第二数据中各个节点的深度属性对应值设置所述节点的缩进量，根据所述缩进量和所述目标拓扑渲染所述第二数据以得到渲染结果。

【技术特征摘要】
1.一种树形数据渲染方法，其特征在于，所述方法包括：获取具备树形拓扑结构的第一数据，所述第一数据的每个节点均对应一个属性集合，所述属性结合包括至少一个属性；获取所述第一数据中的目标节点集，为所述目标节点集中的每个节点对应的属性集合添加深度属性，所述深度属性的深度属性对应值由所述第一数据对应的树形拓扑结构确定；提取所述目标节点集中各个节点的属性集合以构建具备目标拓扑的第二数据，所述目标拓扑为不包含继承关系的拓扑结构；根据所述第二数据中各个节点的深度属性对应值设置所述节点的缩进量，根据所述缩进量和所述目标拓扑渲染所述第二数据以得到渲染结果。2.根据权利要求1所述的方法，其特征在于，还包括获取深度属性对应值，所述获取深度属性对应值，包括：获取每个节点在第一数据表征的树形拓扑结构中的深度；将所述深度设置所述节点的深度属性对应值。3.根据权利要求2所述的方法，其特征在于，所述根据所述缩进量和所述目标拓扑渲染所述第二数据以得到渲染结果，包括：获取当前渲染区间；获取所述第二数据中落入所述当前渲染区间的待渲染数据；根据所述缩进量和所述目标拓扑渲染所述待渲染数据；对所述第二数据中排序在待渲染数据之前的数据使用padding-top属性定义渲染方式，对所述第二数据中排序在待渲染数据之后前的数据使用padding-bottom属性定义渲染方式。4.根据权利要求1所述的方法，其特征在于，还包括获取深度属性对应值，所述获取深度属性对应值，包括：获取第一数据中用于在所述当前渲染区间渲染的目标数据；获取所述目标数据对应的子树拓扑；获取所述目标数据的每个节点在所述子树拓扑中的深度；将所述深度设置为所述节点的深度属性对应值。5.根据权利要求1所述的方法，其特征在于：还包括监听用户的操作，根据所述用户的操作获取第一数据中待渲染的目标节点集，得到所述目标节点集对应的具有目标拓扑的待渲染数据，并对所述待渲染数据进行渲染。6.根...

【专利技术属性】
技术研发人员：杜佳，高飞宇，
申请(专利权)人：腾讯科技深圳有限公司，
类型：发明
国别省市：广东,44