[发明专利]一种Web浏览器下的大数据量树形结构渲染系统及方法

说明书

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

技术领域

本发明属于大数据分析技术领域，具体涉及一种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树数据；