[发明专利]一种结合虚拟DOM更新树形数据结构方法、装置及应用

说明书

本申请提出了一种结合虚拟DOM更新树形数据结构的方法、装置及应用，通过比对第一虚拟dom结构和第二虚拟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更新树形数据结构的方法。