CN115017161A - 一种结合虚拟dom更新树形数据结构方法、装置及应用 - Google Patents

Abstract

本申请提出了一种结合虚拟DOM更新树形数据结构的方法、装置及应用，通过比对第一虚拟dom结构和第二虚拟dom结构，将需要删除的节点回收到回收数组内，并获取需要新增的节点记录比较结果数组，通过比较结果数组从回收数组中复用相同节点类型的节点，进而减少新增节点操作的频率，尽可能地利用原有的所有节点，可以极大程度地减少性能消耗，提高树形数据结构更新的效率。

Description

一种结合虚拟DOM更新树形数据结构方法、装置及应用

技术领域

本申请涉及数据处理领域，特别是涉及一种结合虚拟DOM更新树形数据结构的方法、装置及应用。

背景技术

为了区分不同功能和类别，例如不同的组织架构、部门、员工等，文件系统通常会采用三级或三级以上的多级目录结构，以提高对数据的检索速度和操作效率，多级目录结构又称为树状结构，每个目录下面存放着许多数据。

树形数据结构更新就需要重新渲染显示页面，以使得页面可展示最新的树形数据结构。然而目前在渲染树形数据结构时，传统的方式是采用原生api或者使用jquery库去操作dom，浏览器会从构建dom树开始将整个流程全部重新执行一遍，然而一个dom节点内包含非常庞大的数据，频繁的操作dom会引起不需要的计算，导致页面渲染不顺畅。

当然也有现有技术是将新的树形数据结构和旧的树形数据结构进行比对，但大部分技术都限于同一层级的树形数据结构的比对，当发现对应树状结构的的节点类型不同时，就选择利用新的树形数据结构替代旧的树形数据结构的方式，但这种技术手段忽略了复杂的树形数据结构的跨层级的移动，且删除和新增节点的操作也需要耗费大量的计算性能，导致渲染速度受到影响。

发明内容

本申请实施例提供了一种结合虚拟DOM更新树形数据结构的方法、装置及应用，通过移动或修改复用节点的方式减少新增节点的操作，有效利用移动或者修改节点的操作来代替新增节点操作，节省计算性能进而提高更新的速率。

第一方面，本申请实施例提供了一种结合虚拟DOM更新树形数据结构的方法，所述方法包括：获取第一树形数据结构；基于所述第一树形数据结构生成第一虚拟dom结构；获取第二树形数据结构对应的第二虚拟dom结构；依节点所在的层级依次比对所述第一虚拟dom结构和所述第二虚拟dom结构，将所述第一虚拟dom结构中相对所述第二虚拟dom结构被删除的节点作为无用节点，所述无用节点存入回收数组并记录对应的回收操作；将所述第二虚拟dom结构相对于所述第一虚拟dom结构增加的节点作为新增节点，所述新增节点的指针存入比较结果数组并记录对应的待新增操作；基于所述比较结果数组从所述回收数组中移动相同节点类型的无用节点，并修改所述无用节点的内容，将所述待新增操作转为新增操作；执行变更操作获取第二树形数据结构，其中所述变更操作至少包括回收操作和/或新增操作的一种或多种。

第二方面，本申请实施例提供了一种结合虚拟DOM更新树形数据结构的装置，包括：第一树形数据结构获取单元，用于获取第一树形数据结构；虚拟dom结构生成单元，用于基于所述第一树形数据结构生成第一虚拟dom结构更新数据获取单元，用于获取第二树形数据结构对应的第二虚拟dom结构；比对单元，用于依节点所在的层级依次比对所述第一虚拟dom结构和所述第二虚拟dom结构，将所述第一虚拟dom结构中相对所述第二虚拟dom结构被删除的节点作为无用节点，所述无用节点存入回收数组并记录对应的回收操作；将所述第二虚拟dom结构相对于所述第一虚拟dom结构增加的节点作为新增节点，所述新增节点的指针存入比较结果数组并记录对应的待新增操作；复用单元，用于基于所述比较结果数组从所述回收数组中移动相同节点类型的无用节点，并修改所述无用节点的内容，将所述待新增操作转为新增操作；更新单元，用于执行变更操作获取第二树形数据结构，其中所述变更操作至少包括回收操作和/或新增操作的一种或多种。

第三方面，本申请实施例提供了一种电子装置，包括存储器和处理器，所述存储器中存储有计算机程序，所述处理器被设置为运行所述计算机程序以执行所述的结合虚拟DOM更新树形数据结构的方法。

第四方面，本申请实施例提供了一种可读存储介质，所述可读存储介质中存储有计算机程序，所述计算机程序包括用于控制过程以执行过程的程序代码，所述过程包括根据所述的结合虚拟DOM更新树形数据结构的方法。

本发明的主要贡献和创新点如下：

本申请实施例提供的结合虚拟DOM更新树形数据结构的方法，通过新建回收数组存放同一层级删除的无用节点，新增比较结果数组存放新旧树形数据结构的节点比较结果，比对回收数组和比较结果数组，移动或修改以复用回收数组中的节点，且先对节点类型进行比对以确定进入回收数组的节点数量，本方案充分利用了旧树形数据结构中的所有节点，不会因为某一层级的节点类型不同而去删除节点，也不会对每个节点都进行n*n的深度遍历比对，且减少了新树形数据结构的需要耗费大量性能的新增节点操作，而是用移动和/或修改无用节点的方式替代新增节点操作，提高树形数据结构更新的效率。当页面的树状结构出现变换时，能够更高效的计算出dom的变换，减少操作的次数，然后去操作dom，更流畅的在页面上渲染出来。

本申请的一个或多个实施例的细节在以下附图和描述中提出，以使本申请的其他特征、目的和优点更加简明易懂。

附图说明

此处所说明的附图用来提供对本申请的进一步理解，构成本申请的一部分，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：

图1是根据本申请实施例的结合虚拟DOM更新树形数据结构的方法的流程图；

图2是根据本申请一种实施例的第一树形数据结构的示意图；

图3是根据本申请实施例的第二树形数据结构的示意图；

图4是根据本申请实施例的第一树形数据结构转换为第二树形数据结构的变更逻辑过程；

图5是树形数据结构的示意。

图6是根据本申请实施例的结合虚拟DOM更新树形数据结构的装置的结构示意图。

图7是根据本申请实施例的电子装置的硬件结构示意图。

具体实施方式

这里将详细地对示例性实施例进行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本说明书一个或多个实施例相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本说明书一个或多个实施例的一些方面相一致的装置和方法的例子。

需要说明的是：在其他实施例中并不一定按照本说明书示出和描述的顺序来执行相应方法的步骤。在一些其他实施例中，其方法所包括的步骤可以比本说明书所描述的更多或更少。此外，本说明书中所描述的单个步骤，在其他实施例中可能被分解为多个步骤进行描述；而本说明书中所描述的多个步骤，在其他实施例中也可能被合并为单个步骤进行描述。

实施例一

本申请旨在提出一种结合虚拟DOM更新树形数据结构的方法、装置及应用，充分利用旧树形数据结构中的所有节点，利用移动、修改无用节点的方式来替代删除后新增节点的操作，减少频繁的节点操作步骤，提高更新的效率。具体的，本方案将把本应该删掉的节点储存到回收数组里面，然后在下一个需要新增节点的时候，从回收数组中提取节点并修改，充分利用所有的节点，将需要删除节点后再新增节点的操作，简化为移动修改节点。

本方案结合虚拟dom完成树形数据结构的更新，在介绍本方案之前先对本方案可能涉及的专业名词进行解释：

虚拟dom：利用普通的javascript对象描述dom结构，其中只储存了基本的dom结构需要的参数。利用虚拟dom将真实dom的更改变成js对象的属性的更改，通过查找js对象的属性变化减少性能开销。

树形结构数据：以分支关系定义的层次结构以用于表示数据表素之间一对多的关系，是一种抽象数据类型(ADT)或是实作这种抽象数据类型的数据结构，用来模拟具有树状结构性质的数据集合，是由n(n>0)个有限节点组成一个具有层次关系的集合。

dom:是W3C组织推荐的处理可扩展置标语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本,更新其内容、结构和www文档的风格(HTMl和XML文档是通过说明部分定义的)。文档可以进一步被处理，处理的结果可以加入到当前的页面。DOM是一种基于树的API文档，它要求在处理过程中整个文档都表示在存储器中。另外一种简单的API是基于事件的SAX，它可以用于处理很大的XML文档，由于大，所以不适合全部放在存储器中处理。

节点：表示树中的数据元素，由数据项和数据元素之间的关系组成。

节点的度：结点所拥有的子树的个数，例如图5中的“动态视觉识别任务”的节点含有的子树的个数为6。

根节点；所有节点的初始数据，例如图5中的“全部任务”就是根节点。

叶子节点：度为0的节点，也叫终端节点。

分支节点：相对于叶子节点而言度不为0的节点，也叫非终端节点或内部节点。

子节点：分支节点的下层节点，例如图5中的“图片识别任务”就是“全部任务”的子节点；

父节点：节点的上层节点，例如图5中的“全部任务”就是“图片识别任务”的父节点。

具体地，参考图1，所述结合虚拟DOM更新树形数据结构的方法包括：

获取第一树形数据结构；

基于所述第一树形数据结构生成第一虚拟dom结构；

获取第二树形数据结构对应的第二虚拟dom结构；

依节点所在的层级依次比对所述第一虚拟dom结构和所述第二虚拟dom结构，将所述第一虚拟dom结构中相对所述第二虚拟dom结构被删除的节点作为无用节点，所述无用节点存入回收数组并记录对应的回收操作；将所述第二虚拟dom结构相对于所述第一虚拟dom结构增加的节点作为新增节点，所述新增节点的指针存入比较结果数组并记录对应的待新增操作；

基于所述比较结果数组从所述回收数组中移动相同节点类型的无用节点，并修改所述无用节点的内容，将所述待新增操作转为新增操作；

执行变更操作获取第二树形数据结构，其中所述变更操作至少包括回收操作和/或新增操作的一种或多种。

本方案获取的第一树形数据结构的每一节点至少包含唯一节点标识id、节点名称name、节点类型type以及父节点pid，其中唯一节点标识id用于唯一地标识该节点，节点名称name用于定义节点的名称，节点类型type用于区分节点的类型，父节点pid用于定义节点所述的层级结构。

示例性的，如图2所示展示的第一树形数据结构，所述第一树形数据结构包括唯一节点标识id分别为“1”、“11”、“12”、“2”、“21”、“3”、“31”、“311”的8个节点，8个节点依照层级存储排布形成第一树形数据结构。

本方案利用虚拟dom来实现树形数据结构的变更的方式以尽可能地减少性能开销。在“基于所述第一树形数据结构生成第一虚拟dom结构”步骤中，在所述第一树形数据结构外部添加根节点，并转换所述第一树形数据结构的节点类型得第一虚拟dom结构。

在“在所述第一树形数据结构外部添加根节点”步骤中，所述第一树形数据结构的全部数据作为所述根节点的子节点。在“转换所述第一树形数据结构的节点类型得第一虚拟dom结构”步骤中，将所述第一树形数据结构的节点类型转换为页面可识别的节点类型。

示例性，依旧如图2所示的第一树形数据结构的节点类型为“categrate”、“node”、“root”,则将节点类型type为root的转换为div，节点类型type为categrate的节点转换为div，节点类型type为node转换为text节点。

本方案通过第一虚拟dom结构和第二虚拟dom结构的比对来确定需要回收的无用节点，再从无用节点中移动可被复用的节点用于更新树形数据结构。值得一提的是，本方案将无用节点回收至回收数组中的操作并不是删除操作，回收数组是本方案自维护的一个数组，用于存放暂时无用的节点。另外，为了避免多余的无用节点进入回收数组。

本方案在回收无用节点之前包括步骤：遍历所述第一虚拟dom结构并统计不同节点类型的第一节点数量，遍历所述第二虚拟dom结构并统计不同节点类型的第二节点数量。此时，在“所述无用节点存入回收数组并记录对应的回收操作”步骤中，若同一节点类型的所述第二节点数量大于等于所述第一节点数量，回收该节点类型下的所有无用节点；若同一节点类型的所述第一节点数量大于所述第二节点数量，回收所述节点的数量为第二节点数量。

示例性，第一虚拟dom结构统计得到节点类型type为“div”的第一节点数量为5，节点类型为“text”的第一节点数量为4；第二虚拟dom结构统计得到节点类型type为“div”的第二节点数量为6，节点类型为“text”的节点数量为4，不论是节点类型为“div”亦或是“text”，第二节点数量均大于等于第一节点数量，故在回收无用节点时可将所有无用节点都回收。而第二虚拟dom结构统计得到节点类型type为“div”的第二节点数量为4，节点类型为“text”的节点数量为5，此时对于节点类型为“div”的节点，第二节点数量小于第二节点数量，则在回收该节点类型的无用节点时有一个无用节点可以直接删除。

在“依节点所在的层级依次比对所述第一虚拟dom结构和所述第二虚拟dom结构”步骤中，若所述第二虚拟dom结构中存在同所述第一虚拟dom结构相比仅是内容变更的节点，直接记录修改操作。此时，所述变更操作至少包括回收操作、修改操作和/或新增操作的一种或多种。

也就是说，在同一层级的第一虚拟dom结构和第二虚拟dom结构的比对后会有三个结果：

1.节点数量减少，此时记录回收操作并将无用节点回收至回收数组；

2.节点数量增加，此时记录待新增操作，基于待新增操作从所述回收数组中复用无用节点。

3.节点数量不变等节点内容变化，此时直接记录修改操作。

另外值得说明的是，本方案依据节点所属的层级自上往下依次进行比对，每个层级比对的结果记录对应的变更操作。

在“将所述第一虚拟dom结构中相对所述第二虚拟dom结构被删除的节点作为无用节点”步骤中，在同一层级内，获取所述第一虚拟dom结构中未出现在所述第二虚拟dom结构中对应层级位置的节点，以及所述第一虚拟dom结构中同所述第二虚拟dom结构位于同一层级位置但节点类型不同的节点作为无用节点，所述无用节点的子节点也作为无用节点。

在“将所述第二虚拟dom结构相对于所述第一虚拟dom结构增加的节点作为新增节点，所述新增节点的指针存入比较结果数组并记录对应的待新增操作”步骤中，获取第二虚拟dom结构中相对所述第一虚拟dom结构增加的节点作为新增节点，在所述比较结果数组中添加执行所述新增节点的指针并记录待新增操作。

值得一提的是，本方案的比较结果数组仅是记录新增节点的指针，而不进行实际的新增操作。

示例性的，如图3所示的第二树形数据结构中在第一层级中新增了目录5和目录6，修改了目录3为目录4；在第二层级中删除了子节点12，新增了子节点22以及子节点41。

如图4所示，图4展示了第一树形数据结构和第二树形结构比对的过程图，在第一层级比较中，对应目录3的节点记录修改修改操作，记录指向目录5的节点和目录6的节点的指针并记录待新增操作；在第二层级比较中，子节点11、子节点21不变，子节点22等待新增，子节点12删除放入回收数组，目录31(原目录3的子节点)由于和子节点41类型不同，也放入回收数组，由于目录31放入回收数组，所以子节点311也放入回收数组，对应的，记录指向子节点22的指针并记录待新增操作，将目录31、子节点12和子节点311的节点放入回收数组内，并记录回收操作。

在“基于所述比较结果数组从所述回收数组中移动相同节点类型的无用节点，并修改所述无用节点的内容，将所述待新增操作转为新增操作”步骤中，遍历所述比较结果数组，并从所述回收数组中移动相同节点类型的无用节点，并修改无用节点的内容。

另外，若所述回收数组内的无用节点不足以匹配所有所述比较结果数组记录的指针，则针对所述指针生成新增操作。也就是说，本方案首先通过复用无用节点的方式，尽可能减少新增节点的操作。

示例性，如图4所示本方案最终得到变更操作如下：

新增操作：移动目录31对应的节点，并修改目录31为目录5；移动子节点12对应的节点，并修改子节点12为子节点22；移动子节点311对应的节点，并修改子节点311为41；新增目录6对应的节点。

若不采用本方案的方案内容的话，则从第一树形数据结构变更为第二树形数据结构至少需要以下的操作：

删除操作：删除目录3、以及对应的子节点目录31、子节点311。

新增操作：新增目录4

新增操作：新增目录5

新增操作：新增目录6

删除操作：删除子节点12

新增操作：新增子节点22

新增操作：新增子节点41。

可见本方案可以极大程度地减少新增节点的操作，更高效地实现树形数据结构的更新。

实施例二

基于相同的构思，参考图6，本申请还提出了一种结合虚拟DOM更新树形数据结构的装置，包括：

第一树形数据结构获取单元，用于获取第一树形数据结构；

虚拟dom结构生成单元，用于基于所述第一树形数据结构生成第一虚拟dom结构；

更新数据获取单元，用于获取第二树形数据结构对应的第二虚拟dom结构；

比对单元，用于依节点所在的层级依次比对所述第一虚拟dom结构和所述第二虚拟dom结构，将所述第一虚拟dom结构中相对所述第二虚拟dom结构被删除的节点作为无用节点，所述无用节点存入回收数组并记录对应的回收操作；将所述第二虚拟dom结构相对于所述第一虚拟dom结构增加的节点作为新增节点，所述新增节点的指针存入比较结果数组并记录对应的待新增操作；

复用单元，用于基于所述比较结果数组从所述回收数组中移动相同节点类型的无用节点，并修改所述无用节点的内容，将所述待新增操作转为新增操作；

更新单元，用于执行变更操作获取第二树形数据结构，其中所述变更操作至少包括回收操作和/或新增操作的一种或多种。

关于该实施例二同于实施例一的技术特征，在此不进行累赘说明。

实施例三

本实施例还提供了一种电子装置，参考图7，包括存储器404和处理器402，该存储器404中存储有计算机程序，该处理器402被设置为运行计算机程序以执行上述任一项结合虚拟DOM更新树形数据结构的方法实施例中的步骤。

具体地，上述处理器402可以包括中央处理器(CPU)，或者特定集成电路(ApplicationSpecificIntegratedCircuit，简称为ASIC)，或者可以被配置成实施本申请实施例的一个或多个集成电路。

其中，存储器404可以包括用于数据或指令的大容量存储器404。举例来说而非限制，存储器404可包括硬盘驱动器(HardDiskDrive，简称为HDD)、软盘驱动器、固态驱动器(SolidStateDrive，简称为SSD)、闪存、光盘、磁光盘、磁带或通用串行总线(UniversalSerialBus，简称为USB)驱动器或者两个或更多个以上这些的组合。在合适的情况下，存储器404可包括可移除或不可移除(或固定)的介质。在合适的情况下，存储器404可在数据处理装置的内部或外部。在特定实施例中，存储器404是非易失性(Non-Volatile)存储器。在特定实施例中，存储器404包括只读存储器(Read-OnlyMemory，简称为ROM)和随机存取存储器(RandomAccessMemory，简称为RAM)。在合适的情况下，该ROM可以是掩模编程的ROM、可编程ROM(ProgrammableRead-OnlyMemory，简称为PROM)、可擦除PROM(ErasableProgrammableRead-OnlyMemory，简称为EPROM)、电可擦除PROM(ElectricallyErasableProgrammableRead-OnlyMemory，简称为EEPROM)、电可改写ROM(ElectricallyAlterableRead-OnlyMemory，简称为EAROM)或闪存(FLASH)或者两个或更多个以上这些的组合。在合适的情况下，该RAM可以是静态随机存取存储器(StaticRandom-AccessMemory，简称为SRAM)或动态随机存取存储器(DynamicRandomAccessMemory，简称为DRAM)，其中，DRAM可以是快速页模式动态随机存取存储器404(FastPageModeDynamicRandomAccessMemory，简称为FPMDRAM)、扩展数据输出动态随机存取存储器(ExtendedDateOutDynamicRandomAccessMemory，简称为EDODRAM)、同步动态随机存取内存(SynchronousDynamicRandom-AccessMemory，简称SDRAM)等。

存储器404可以用来存储或者缓存需要处理和/或通信使用的各种数据文件，以及处理器402所执行的可能的计算机程序指令。

处理器402通过读取并执行存储器404中存储的计算机程序指令，以实现上述实施例中的任意一结合虚拟DOM更新树形数据结构方法。

可选地，上述电子装置还可以包括传输设备406以及输入输出设备408，其中，该传输设备406和上述处理器402连接，该输入输出设备408和上述处理器402连接。

传输设备406可以用来经由一个网络接收或者发送数据。上述的网络具体实例可包括电子装置的通信供应商提供的有线或无线网络。在一个实例中，传输设备包括一个网络适配器(Network Interface Controller，简称为NIC)，其可通过基站与其他网络设备相连从而可与互联网进行通讯。在一个实例中，传输设备406可以为射频(Radio Frequency，简称为RF)模块，其用于通过无线方式与互联网进行通讯。

输入输出设备408用于输入或输出信息。在本实施例中，输入的信息可以第一树形数据结构，输出的信息可以是第二树形数据结构等。

可选地，在本实施例中，上述处理器402可以被设置为通过计算机程序执行以下步骤：

获取第一树形数据结构；

基于所述第一树形数据结构生成第一虚拟dom结构；

获取第二树形数据结构对应的第二虚拟dom结构；

依节点所在的层级依次比对所述第一虚拟dom结构和所述第二虚拟dom结构，将所述第一虚拟dom结构中相对所述第二虚拟dom结构被删除的节点作为无用节点，所述无用节点存入回收数组并记录对应的回收操作；将所述第二虚拟dom结构相对于所述第一虚拟dom结构增加的节点作为新增节点，所述新增节点的指针存入比较结果数组并记录对应的待新增操作；

基于所述比较结果数组从所述回收数组中移动相同节点类型的无用节点，并修改所述无用节点的内容，将所述待新增操作转为新增操作；

执行变更操作获取第二树形数据结构，其中所述变更操作至少包括回收操作和/或新增操作的一种或多种。

需要说明的是，本实施例中的具体示例可以参考上述实施例及可选实施方式中所描述的示例，本实施例在此不再赘述。

通常，各种实施例可以以硬件或专用电路、软件、逻辑或其任何组合来实现。本发明的一些方面可以以硬件来实现，而其他方面可以以可以由控制器、微处理器或其他计算设备执行的固件或软件来实现，但是本发明不限于此。尽管本发明的各个方面可以被示出和描述为框图、流程图或使用一些其他图形表示，但是应当理解，作为非限制性示例，本文中描述的这些框、装置、系统、技术或方法可以以硬件、软件、固件、专用电路或逻辑、通用硬件或控制器或其他计算设备或其某种组合来实现。

本发明的实施例可以由计算机软件来实现，该计算机软件由移动设备的数据处理器诸如在处理器实体中可执行，或者由硬件来实现，或者由软件和硬件的组合来实现。包括软件例程、小程序和/或宏的计算机软件或程序(也称为程序产品)可以存储在任何装置可读数据存储介质中，并且它们包括用于执行特定任务的程序指令。计算机程序产品可以包括当程序运行时被配置为执行实施例的一个或多个计算机可执行组件。一个或多个计算机可执行组件可以是至少一个软件代码或其一部分。另外，在这一点上，应当注意，如图中的逻辑流程的任何框可以表示程序步骤、或者互连的逻辑电路、框和功能、或者程序步骤和逻辑电路、框和功能的组合。软件可以存储在诸如存储器芯片或在处理器内实现的存储块等物理介质、诸如硬盘或软盘等磁性介质、以及诸如例如DVD及其数据变体、CD等光学介质上。物理介质是非瞬态介质。

本领域的技术人员应该明白，以上实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。

以上实施例仅表达了本申请的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对本申请范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本申请构思的前提下，还可以做出若干变形和改进，这些都属于本申请的保护范围。因此，本申请的保护范围应以所附权利要求为准。

Claims (10)

1.一种结合虚拟DOM更新树形数据结构的方法，其特征在于，包括以下步骤：

获取第一树形数据结构；

基于所述第一树形数据结构生成第一虚拟dom结构；

获取第二树形数据结构对应的第二虚拟dom结构；

依节点所在的层级依次比对所述第一虚拟dom结构和所述第二虚拟dom结构，将所述第一虚拟dom结构中相对所述第二虚拟dom结构被删除的节点作为无用节点，所述无用节点存入回收数组并记录对应的回收操作；将所述第二虚拟dom结构相对于所述第一虚拟dom结构增加的节点作为新增节点，所述新增节点的指针存入比较结果数组并记录对应的待新增操作；

基于所述比较结果数组从所述回收数组中移动相同节点类型的无用节点，并修改所述无用节点的内容，将所述待新增操作转为新增操作；

执行变更操作获取第二树形数据结构，其中所述变更操作至少包括回收操作和/或新增操作的一种或多种。

2.根据权利要求1所述的结合虚拟DOM更新树形数据结构的方法，其特征在于，在“基于所述第一树形数据结构生成第一虚拟dom结构”步骤中，在所述第一树形数据结构外部添加根节点，并转换所述第一树形数据结构的节点类型得第一虚拟dom结构。

3.根据权利要求1所述的结合虚拟DOM更新树形数据结构的方法，其特征在于，遍历所述第一虚拟dom结构并统计不同节点类型的第一节点数量，遍历所述第二虚拟dom结构并统计不同节点类型的第二节点数量，若同一节点类型的所述第二节点数量大于等于所述第一节点数量，回收该节点类型下的所有无用节点；若同一节点类型的所述第一节点数量大于所述第二节点数量，回收所述节点的数量为第二节点数量。

4.根据权利要求1所述的结合虚拟DOM更新树形数据结构的方法，其特征在于，在“依节点所在的层级依次比对所述第一虚拟dom结构和所述第二虚拟dom结构”步骤中，若所述第二虚拟dom结构中存在同所述第一虚拟dom结构相比仅是内容变更的节点，直接记录修改操作，所述变更操作至少包括回收操作、修改操作和/或新增操作的一种或多种。

5.根据权利要求1所述的结合虚拟DOM更新树形数据结构的方法，其特征在于，在“将所述第一虚拟dom结构中相对所述第二虚拟dom结构被删除的节点作为无用节点”步骤中，在同一层级内，获取所述第一虚拟dom结构中未出现在所述第二虚拟dom结构中对应层级位置的节点，以及所述第一虚拟dom结构中同所述第二虚拟dom结构位于同一层级位置但节点类型不同的节点作为无用节点，所述无用节点的子节点也作为无用节点。

6.根据权利要求1所述的结合虚拟DOM更新树形数据结构的方法，其特征在于，若所述回收数组内的无用节点不足以匹配所有所述比较结果数组记录的指针，则针对所述指针生成新增操作。

7.根据权利要求1所述的结合虚拟DOM更新树形数据结构的方法，其特征在于，第一树形数据结构的每一节点至少包含唯一节点标识、节点名称、节点类型以及父节点。

8.一种结合虚拟DOM更新树形数据结构的装置，其特征在于，包括：

第一树形数据结构获取单元，用于获取第一树形数据结构；

虚拟dom结构生成单元，用于基于所述第一树形数据结构生成第一虚拟dom结构；

更新数据获取单元，用于获取第二树形数据结构对应的第二虚拟dom结构；

比对单元，用于依节点所在的层级依次比对所述第一虚拟dom结构和所述第二虚拟dom结构，将所述第一虚拟dom结构中相对所述第二虚拟dom结构被删除的节点作为无用节点，所述无用节点存入回收数组并记录对应的回收操作；将所述第二虚拟dom结构相对于所述第一虚拟dom结构增加的节点作为新增节点，所述新增节点的指针存入比较结果数组并记录对应的待新增操作；

复用单元，用于基于所述比较结果数组从所述回收数组中移动相同节点类型的无用节点，并修改所述无用节点的内容，将所述待新增操作转为新增操作；

更新单元，用于执行变更操作获取第二树形数据结构，其中所述变更操作至少包括回收操作和/或新增操作的一种或多种。

9.一种电子装置，包括存储器和处理器，其特征在于，所述存储器中存储有计算机程序，所述处理器被设置为运行所述计算机程序以执行权利要求1到7任一所述的结合虚拟DOM更新树形数据结构的方法。

10.一种可读存储介质，其特征在于，所述可读存储介质中存储有计算机程序，所述计算机程序包括用于控制过程以执行过程的程序代码，所述过程包括根据权利要求1至7任一项所述的结合虚拟DOM更新树形数据结构的方法。

Images