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

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

【技术实现步骤摘要】
一种Web浏览器下的大数据量树形结构渲染系统及方法


[0001]本专利技术属于大数据分析
，具体涉及一种Web浏览器下的大数据量树形结构渲染系统及方法。

技术介绍

[0002]树形结构数据在Web浏览器上展现目前局限于较小量数据（小于1000条数据），当数据量巨大情况下会出现浏览器渲染缓慢，无法正常展现数据，浏览器无响应等情况。因为大数据量下，由于浏览器会一次性加载大量数据并完成树形结构渲染，耗费大量内存空间和GPU。如果直接渲染到真实DOM上会引起整个DOM树重绘和重排，在修改或者删除某个节点时候必定造成回流，引起整个DOM树结构多次回流和重绘，很多未修改节点也被重新渲染，造成页面加载缓慢。
[0003]目前树形结构列表展现存在一些问题：1.目前常规树形结构展现，仅仅局限于小数据量形式展现在界面上，当同胞兄弟节点大于1000条以后，便会出现渲染缓慢，甚至渲染不出来，浏览器无响应情况，无法正常展现数据；2.没有利用浏览器缓存，虚拟DOM对比，造成多次点击查询按钮下发请求获取相同数据，多次重复渲染情况；3.通过循环递归对节点进行依次本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种Web浏览器下的大数据量树形结构渲染系统，其特征在于，包括相互连接的客户端和服务端；所述客户端包括渲染模块、数据模块、缓存模块和中央处理模块，所述中央处理模块分别与所述渲染模块、数据模块和缓存模块连接；所述服务端设置有服务端系统；所述服务端系统与所述数据模块连接；所述数据模块用于发送http请求，还用于将获取服务端的数据处理成所需数据格式的数据；所述缓存模块用于生成缓存数据；所述中央处理模块用于集中处理获取的数据模块的真实数据和缓存模块的缓存数据，还用于构建虚拟DOM树数据；所述渲染模块用于接收虚拟DOM树数据，构建真实DOM树结构；所述服务端系统用于传输客户端所需数据。2.根据权利要求1所述的Web浏览器下的大数据量树形结构渲染系统，其特征在于，所述渲染模块包括相互连接的面包屑组件和分页表格组件；所述面包屑组件用于构建真实DOM树结构，所述分页表格组件用于进行分页查询虚拟DOM树数据生成分页表格。3.一种基于权利要求1
‑
2任一所述权利要求的Web浏览器下的大数据量树形结构渲染系统的Web浏览器下的大数据量树形结构渲染方法，其特征在于，包括以下步骤：S1、通过数据模块调用服务端系统接口获取服务端系统数据，得到真实数据；S2、通过中央处理模块获取真实数据和缓存模块的缓存数据，调用比对算法获取比对结果构建虚拟DOM树数据；S3、根据虚拟DOM树数据调用渲染模块构建真实DOM树结构，完成渲染Web浏览器界面。4.根据权利要求3所述的Web浏览器下的大数据量树形结构渲染方法，其特征在于，所述步骤S2中，缓存模块生成缓存数据的方法具体为：当数据模块发送真实数据时，控制缓存模块通过indexedDB数据库获取所述真实数据，并根据所述真实数据更新当前的缓存数据，生成新的缓存数据。5.根据权利要求4所述的Web浏览器下的大数据量树形结构渲染方法，其特征在于，所述步骤S2包括以下分步骤：S21、通过中央处理模块...

【专利技术属性】
技术研发人员：欧阳建龙，张晓宇，石丹杰，
申请(专利权)人：成都瑞华康源科技有限公司，
类型：发明
国别省市：