CN114547525B - 一种Web浏览器下的大数据量树形结构渲染系统及方法 - Google Patents

Abstract

本发明公开了一种Web浏览器下的大数据量树形结构渲染系统及方法，方法包括以下步骤：S1、通过数据模块调用服务端系统接口获取服务端系统数据，得到真实数据；S2、通过中央处理模块获取真实数据和缓存模块的缓存数据，调用比对算法获取比对结果构建虚拟DOM树数据；S3、根据虚拟DOM树数据调用渲染模块构建真实DOM树结构，完成渲染Web浏览器界面。本发明通过将大数据量转换为真实DOM树结构数据，并采用分页查询的形式，转换成小数据量模式，采用树形结构+面包屑路径的形式，将真实DOM树结构转化成平铺结构通过浏览器装置展现，分页小数据量渲染也能够减轻浏览器负荷，达到同样的树形层次结构展示。

Description

一种Web浏览器下的大数据量树形结构渲染系统及方法

技术领域

本发明属于大数据分析技术领域，具体涉及一种Web浏览器下的大数据量树形结构渲染系统及方法。

背景技术

树形结构数据在Web浏览器上展现目前局限于较小量数据（小于1000条数据），当数据量巨大情况下会出现浏览器渲染缓慢，无法正常展现数据，浏览器无响应等情况。因为大数据量下，由于浏览器会一次性加载大量数据并完成树形结构渲染，耗费大量内存空间和GPU。如果直接渲染到真实DOM上会引起整个DOM树重绘和重排，在修改或者删除某个节点时候必定造成回流，引起整个DOM树结构多次回流和重绘，很多未修改节点也被重新渲染，造成页面加载缓慢。

目前树形结构列表展现存在一些问题：

1.目前常规树形结构展现，仅仅局限于小数据量形式展现在界面上，当同胞兄弟节点大于1000条以后，便会出现渲染缓慢，甚至渲染不出来，浏览器无响应情况，无法正常展现数据；

2.没有利用浏览器缓存，虚拟DOM对比，造成多次点击查询按钮下发请求获取相同数据，多次重复渲染情况；

3.通过循环递归对节点进行依次对比，算法复杂度达到 O(n^3) ，n是树的节点数，如果要展示1000个节点，得执行上亿次比较。即便是CPU快能执行30亿条命令，也很难在一秒内计算出差异。

发明内容

针对现有技术中的上述不足，本发明提供的一种Web浏览器下的大数据量树形结构渲染系统及方法解决了当数据量巨大情况下树形结构数据在Web浏览器上渲染缓慢的问题。

为了达到上述发明目的，本发明采用的技术方案为：一种Web浏览器下的大数据量树形结构渲染系统，包括相互连接的客户端和服务端；

所述客户端包括渲染模块、数据模块、缓存模块和中央处理模块，所述中央处理模块分别与所述渲染模块、数据模块和缓存模块连接；所述服务端设置有服务端系统；所述服务端系统与所述数据模块连接；

所述数据模块用于发送http请求，还用于将获取服务端的数据处理成所需数据格式的数据；所述缓存模块用于生成缓存数据；所述中央处理模块用于集中处理获取的数据模块的真实数据和缓存模块的缓存数据，还用于构建虚拟DOM树数据；所述渲染模块用于接收虚拟DOM树数据，构建真实DOM树结构；所述服务端系统用于传输客户端所需数据。

进一步地：所述渲染模块包括相互连接的面包屑组件和分页表格组件；所述面包屑组件用于构建真实DOM树结构，所述分页表格组件用于进行分页查询虚拟DOM树数据生成分页表格。

上述进一步方案的有益效果为：渲染模块为一种处理面包屑组件和分页表格组件实现界面更新的渲染工具。根据传入的虚拟DOM树数据，通过渲染模块的分页表格组件的创建方法构建成真实DOM树结构，然后更新界面。

一种Web浏览器下的大数据量树形结构渲染方法，包括以下步骤：

S1、通过数据模块调用服务端系统接口获取服务端系统数据，得到真实数据；

S2、通过中央处理模块获取真实数据和缓存模块的缓存数据，调用比对算法获取比对结果构建虚拟DOM树数据；

S3、根据虚拟DOM树数据调用渲染模块构建真实DOM树结构，完成渲染Web浏览器界面。

进一步地：所述步骤S2中，缓存模块生成缓存数据的方法具体为：

当数据模块发送真实数据时，控制缓存模块通过indexedDB数据库获取所述真实数据，并根据所述真实数据更新当前的缓存数据，生成新的缓存数据；

所述步骤S2包括以下分步骤：

S21、通过中央处理模块调用缓存模块获取缓存数据，再调用数据模块获取真实数据；

S22、基于缓存数据和真实数据，通过比较方法得到比较一致结果或差异化数据；

S23、当比较方法得到差异化数据时，根据差异化数据构建虚拟DOM树数据。

进一步地：所述步骤S22具体为：

将缓存数据和真实数据通过Unicode编码生成字符串数组格式的缓存数据和字符串数组格式的真实数据，并建立字符串数组格式的差异化数据；所述比较方法具体为：

查询字符串数组格式的真实数据中的每条字符串数据是否存在字符串数组格式的缓存数据中；若否，则将所述字符串数据保存至差异化数据，并其保存上一条字符串数据的主键ID；若是，则得到所述字符串数据的比较一致结果。

进一步地：所述步骤S23具体为：

当比较方法得到差异化数据时，将其上一条主键ID插入所述缓存数据中的指定数据后，得到更新的缓存数据，根据更新的缓存数据构建虚拟DOM树数据。

进一步地：所述步骤S3包括以下分步骤：

S31、基于输入渲染模块的虚拟DOM树数据，通过分页表格组件进行分页查询得到分页表格；

S32、根据分页表格构建真实DOM树结构，并渲染Web浏览器界面。

上述进一步方案的有益效果为：分页查询为一种操作系统里存储器管理的一种技术，可以使电脑的主存可以使用存储在辅助存储器中的数据。

进一步地：所述步骤S32具体为：

将分页表格的行数据推送至面包屑组件，进而新增面包屑组件中的节点路径，根据面包屑组件中的节点路径构建真实DOM树结构，并渲染Web浏览器界面；

其中，新增面包屑组件中的节点路径的方法具体为：

根据分页表格组件的行数据查询面包屑组件中的父节点ID下的子节点ID，判断是否存在对应的子节点ID；

若是，则根据所述分页表格组件的行数据更新所述子节点ID数据；若否，则新增面包屑组件中的节点路径。

本发明的有益效果为：

（1）本发明通过将大数据量转换为真实DOM树结构数据，并采用分页查询的形式，转换成小数据量模式，采用树形结构+面包屑路径的形式，将真实DOM树结构转化成平铺结构通过浏览器装置展现，分页小数据量渲染也能够减轻浏览器负荷，达到同样的树形层次结构展示，支持数据范围内的多条件查询，减轻接口/前端脚本的树形结构组装拼接工作。

（2）本发明缓存模块缓存当前查询的当前节点数据，当再次点击查询调用接口后，采用真实DOM树结构形式，通过比对算法比对新数据与旧数据，比对后确定是否需要重新渲染界面，有效减少浏览器渲染次数及范围。

附图说明

图1为本发明的系统结构示意图。

图2为本发明的流程图。

具体实施方式

下面对本发明的具体实施方式进行描述，以便于本技术领域的技术人员理解本发明，但应该清楚，本发明不限于具体实施方式的范围，对本技术领域的普通技术人员来讲，只要各种变化在所附的权利要求限定和确定的本发明的精神和范围内，这些变化是显而易见的，一切利用本发明构思的发明创造均在保护之列。

实施例1：

如图1所示，在本发明的一个实施例中，一种Web浏览器下的大数据量树形结构渲染系统，包括相互连接的客户端和服务端；

所述客户端包括渲染模块、数据模块、缓存模块和中央处理模块，所述中央处理模块分别与所述渲染模块、数据模块和缓存模块连接；所述服务端设置有服务端系统；所述服务端系统与所述数据模块连接；

所述数据模块用于发送http请求，还用于将获取服务端的数据处理成所需数据格式的数据；所述缓存模块用于生成缓存数据；所述中央处理模块用于集中处理获取的数据模块的真实数据和缓存模块的缓存数据，还用于构建虚拟DOM树数据；所述渲染模块用于接收虚拟DOM树数据，构建真实DOM树结构；所述服务端系统用于传输客户端所需数据。

在本实施例中，数据模块封装常用http请求，并且支持可配置url、请求参数，并对数据进行加工处理操作（例如：服务端返回的数据精简化处理，将20个参数通过字典转换、字段映射、多值拼接方式处理成界面所需的10个参数）。主要通过Web浏览器装置发送http请求，并将获取的数据结果处理成所需的数据格式数据。与常规的获取数据方式比较，简化了获取数据流程，实现了前后端数据转换。

缓存模块采用一种Web浏览器装置下的indexedDB本地数据库的公共方法。将数据库中获取的真实数据使用缓存模块的公共方法将数据通过浏览器保存到indexedDB下，为中央处理模块比较方法最近2次请求数据提供数据支撑，最终决定是否重新渲染界面。常用缓存机制cookie，storage受浏览器限制，cookie支持4k数据量，storage支持5M数据量。indexedDB与常规的浏览器缓存机制cookie、storage比较具有高效可靠、数据量大的优势，支持事务。

中央处理模块采用一种集中处理获取数据模块真实数据以及缓存模块缓存数据，并通过比较数据模块和缓存模块的数据对象，并返回比较一致结果或差异化数据。其中，调用数据模块和缓存模块的顺序有严格限制，必须先获取缓存数据，再获取数据库的真实数据，因为获取数据库真实数据后会使用缓存模块方法更新缓存数据，如果调用方式错误会导致获取的缓存数据更新，比较方法的结果始终是一致的。

渲染模块为一种处理面包屑组件和分页表格组件实现界面更新的渲染工具。根据传入的虚拟DOM树数据，通过渲染模块的分页表格组件的创建方法构建成真实DOM树结构，然后更新界面。同时提供列表数据点击处理方法，当点击表格组件数据，主动推送点击数据到面包屑组件中，通过面包屑创建方法新增该节点路径中。面包屑数据来源于点击分页表格组件下的某行数据。在点击分页表格行数据后，调用面包屑组件创建方法，传输当前行数据到面包屑组件中，实现更新面包屑路径。面包屑路径展示点击后节点路径。

所述渲染模块包括相互连接的面包屑组件和分页表格组件；所述面包屑组件用于构建真实DOM树结构，所述分页表格组件用于进行分页查询虚拟DOM树数据生成分页表格。

本发明提出一种全新树形结构展现形式，结合面包屑组件和分页表格组件，生成真实DOM树结构，将DOM树结构的新旧节点对比，实现局部渲染，差别更新。采用大数据量树形结构分批动态延迟加载的形式，将大数据量树形结构拆分成小数据量，增加分页动态加载同层同胞节点形式，转换成小数据量渲染。

实施例2：

本实施例针对一种Web浏览器下的大数据量树形结构渲染系统的具体工作流程。

如图2所示，一种Web浏览器下的大数据量树形结构渲染方法，包括以下步骤：

S1、通过数据模块调用服务端系统接口获取服务端系统数据，得到真实数据；

S2、通过中央处理模块获取真实数据和缓存模块的缓存数据，调用比对算法获取比对结果构建虚拟DOM树数据；

S3、根据虚拟DOM树数据调用渲染模块构建真实DOM树结构，完成渲染Web浏览器界面。

所述步骤S2中，缓存模块生成缓存数据的方法具体为：

当数据模块发送真实数据时，控制缓存模块通过indexedDB数据库获取所述真实数据，并根据所述真实数据更新当前的缓存数据，生成新的缓存数据；

所述步骤S2包括以下分步骤：

S21、通过中央处理模块调用缓存模块获取缓存数据，再调用数据模块获取真实数据；

S22、基于缓存数据和真实数据，通过比较方法得到比较一致结果或差异化数据；

S23、当比较方法得到差异化数据时，根据差异化数据构建虚拟DOM树数据。

所述步骤S22具体为：

将缓存数据和真实数据通过Unicode编码生成字符串数组格式的缓存数据和字符串数组格式的真实数据，并建立字符串数组格式的差异化数据；所述比较方法具体为：

查询字符串数组格式的真实数据中的每条字符串数据是否存在字符串数组格式的缓存数据中；若否，则将所述字符串数据保存至差异化数据，并其保存上一条字符串数据的主键ID；若是，则得到所述字符串数据的比较一致结果。

当得到比较一致结果时，则不需要重新渲染界面。

所述步骤S23具体为：

当比较方法得到差异化数据时，将其上一条主键ID插入所述缓存数据中的指定数据后，得到更新的缓存数据，根据更新的缓存数据构建虚拟DOM树数据。

所述步骤S3包括以下分步骤：

S31、基于输入渲染模块的虚拟DOM树数据，通过分页表格组件进行分页查询得到分页表格；

在本实施例中，分页查询为一种操作系统里存储器管理的一种技术，可以使电脑的主存可以使用存储在辅助存储器中的数据。主要解决当数据量过大时，可能会导致各种各样的问题发生，例如：服务器资源被耗尽，因数据传输量过大而使处理超时等。最终都会导致查询无法完成。解决这个问题的一个策略就是“分页查询”，每次只查询一页的数据。这样分批次地进行处理，可以呈现出很好的用户体验，对服务器资源的消耗也不大。通过接口传参形式，传入需要查询页码，每一页数据量，使用分页数据查询形式，将大数据量转换成较小的数据量，分批次查询、渲染。

S32、根据分页表格构建真实DOM树结构，并渲染Web浏览器界面；

在本实施例中，真实DOM树结构的节点关系包括父节点、子节点和同胞节点；如果一个节点存在下一级节点，那么该节点称之为父节点，如果一个节点存在上一级节点，那么该节点称之为子节点，如果一个节点存在同级的其他节点，那么该节点与同级其他节点互称为同胞节点。

所述步骤S32具体为：

将分页表格的行数据推送至面包屑组件，进而新增面包屑组件中的节点路径，根据面包屑组件中的节点路径构建真实DOM树结构，并渲染Web浏览器界面；

其中，新增面包屑组件中的节点路径的方法具体为：

根据分页表格组件的行数据查询面包屑组件中的父节点ID下的子节点ID，判断是否存在对应的子节点ID；

若是，则根据所述分页表格组件的行数据更新所述子节点ID数据；若否，则新增面包屑组件中的节点路径。

实施例3：

本实施例针对构建和使用真实DOM树结构的方法。

中央处理模块通过数据模块调用服务端接口获取同胞节点数据，中央处理模块获取数据模块的真实数据和缓存模块的缓存数据，调用比对算法获取比对结果，根据比对结果的差异化数据构建虚拟DOM树数据，中央处理模块根据虚拟DOM树数据调用渲染模块的渲染界面。界面包括：面包屑组件和分页表格组件，在分页表格顶部添加面包屑组件，每次点击分页表格列表某一项数据节点后，触发面包屑组件推送事件，将当前点击的列表项数据推送至面包屑组件中展示，面包屑组件中展示每一次点击后列表数据的同胞节点的父节点，同时也可以通过点击面包屑组件路径下的节点逐级返回当前节点下的子节点。

真实DOM树点击面包屑路径及节点后查询数据的方法具体为：

数据模块通过简单接口配置，完成第一次获取数据工作，数据模块自动获取数据并缓存数据，用户点击树节点，通过数据模块，根据父节点ID查询子节点数据，并添加父节点面包屑路径，并缓存数据；用户点击面包屑，通过数据模块，根据父节点ID查询子节点数据，并更新面包屑路径，并缓存数据；用户输入查询条件，通过数据模块，根据父节点ID及查询条件查询子节点数据，并更新面包屑路径，并缓存数据。

本发明的有益效果为：本发明通过将大数据量转换为真实DOM树结构数据，并采用分页查询的形式，转换成小数据量模式，采用树形结构+面包屑路径的形式，将真实DOM树结构转化成平铺结构通过浏览器装置展现，分页小数据量渲染也能够减轻浏览器负荷，达到同样的树形层次结构展示，支持数据范围内的多条件查询，减轻接口/前端脚本的树形结构组装拼接工作。

本发明缓存当前查询的当前节点数据，当再次点击查询调用接口后，采用真实DOM树结构形式，通过比对算法比对新数据与旧数据，比对后确定是否需要重新渲染界面，有效减少浏览器渲染次数及范围。

在本发明的描述中，需要理解的是，术语“中心”、“厚度”、“上”、“下”、“水平”、“顶”、“底”、“内”、“外”、“径向”等指示的方位或位置关系为基于附图所示的方位或位置关系，仅是为了便于描述本发明和简化描述，而不是指示或暗示所指的设备或元件必须具有特定的方位、以特定的方位构造和操作，因此不能理解为对本发明的限制。此外，术语“第一”、“第二”、“第三”仅用于描述目的，而不能理解为指示或暗示相对重要性或隐含指明的技术特征的数量。因此，限定由“第一”、“第二”、“第三”的特征可以明示或隐含地包括一个或者更多个该特征。

Claims (4)

1.一种Web浏览器下的大数据量树形结构渲染方法，其特征在于，该方法基于一种Web浏览器下的大数据量树形结构渲染系统，系统包括相互连接的客户端和服务端；

所述客户端包括渲染模块、数据模块、缓存模块和中央处理模块，所述中央处理模块分别与所述渲染模块、数据模块和缓存模块连接；所述服务端设置有服务端系统；所述服务端系统与所述数据模块连接；

所述数据模块用于发送http请求，还用于将获取服务端的数据处理成所需数据格式的数据；所述缓存模块用于生成缓存数据；所述中央处理模块用于获取数据模块的真实数据和缓存模块的缓存数据，调用比对算法获取比对结果，根据比对结果的差异化数据构建虚拟DOM树数据；所述渲染模块用于接收虚拟DOM树数据，构建真实DOM树结构；所述服务端系统用于传输客户端所需数据；

所述渲染模块包括相互连接的面包屑组件和分页表格组件；所述面包屑组件用于构建真实DOM树结构，所述分页表格组件用于进行分页查询虚拟DOM树数据生成分页表格；

方法包括以下步骤：

S1、通过数据模块调用服务端系统接口获取服务端系统数据，得到真实数据；

S2、通过中央处理模块获取真实数据和缓存模块的缓存数据，调用比对算法获取比对结果构建虚拟DOM树数据；

S3、根据虚拟DOM树数据调用渲染模块构建真实DOM树结构，完成渲染Web浏览器界面；

所述步骤S2中，缓存模块生成缓存数据的方法具体为：

当数据模块发送真实数据时，控制缓存模块通过indexedDB数据库获取所述真实数据，并根据所述真实数据更新当前的缓存数据，生成新的缓存数据；

所述步骤S2包括以下分步骤：

S21、通过中央处理模块调用缓存模块获取缓存数据，再调用数据模块获取真实数据；

S22、基于缓存数据和真实数据，通过比较方法得到比较一致结果或差异化数据；

S23、当比较方法得到差异化数据时，根据差异化数据构建虚拟DOM树数据；

所述步骤S22具体为：

将缓存数据和真实数据通过Unicode编码生成字符串数组格式的缓存数据和字符串数组格式的真实数据，并建立字符串数组格式的差异化数据；所述比较方法具体为：

查询字符串数组格式的真实数据中的每条字符串数据是否存在字符串数组格式的缓存数据中；若否，则将所述字符串数据保存至差异化数据，并其保存上一条字符串数据的主键ID；若是，则得到所述字符串数据的比较一致结果。

2.根据权利要求1所述的Web浏览器下的大数据量树形结构渲染方法，其特征在于，所述步骤S23具体为：

当比较方法得到差异化数据时，将其上一条主键ID插入所述缓存数据中的指定数据后，得到更新的缓存数据，根据更新的缓存数据构建虚拟DOM树数据。

3.根据权利要求2所述的Web浏览器下的大数据量树形结构渲染方法，其特征在于，所述步骤S3包括以下分步骤：

S31、基于输入渲染模块的虚拟DOM树数据，通过分页表格组件进行分页查询得到分页表格；

S32、根据分页表格构建真实DOM树结构，并渲染Web浏览器界面。

4.根据权利要求3所述的Web浏览器下的大数据量树形结构渲染方法，其特征在于，所述步骤S32具体为：

将分页表格的行数据推送至面包屑组件，进而新增面包屑组件中的节点路径，根据面包屑组件中的节点路径构建真实DOM树结构，并渲染Web浏览器界面；

其中，新增面包屑组件中的节点路径的方法具体为：

根据分页表格组件的行数据查询面包屑组件中的父节点ID下的子节点ID，判断是否存在对应的子节点ID；

若是，则根据所述分页表格组件的行数据更新所述子节点ID数据；若否，则新增面包屑组件中的节点路径。

Images