(19)国家知识产权局 (12)发明 专利 (10)授权公告 号 (45)授权公告日 (21)申请 号 202210440881.3 (22)申请日 2022.04.26 (65)同一申请的已公布的文献号 申请公布号 CN 114547525 A (43)申请公布日 2022.05.27 (73)专利权人 成都瑞华康源科技有限公司 地址 610000 四川省成 都市中国(四川)自 由贸易试验区成都高新区天府大道中 段530号1栋6楼601、 611、 612、 613号 (72)发明人 欧阳建龙 　张晓宇　石丹杰　 (74)专利代理 机构 成都正德明志知识产权代理 有限公司 513 60 专利代理师 杨木梅 (51)Int.Cl. G06F 16/958(2019.01)G06F 16/2455(2019.01) G06F 16/25(2019.01) (56)对比文件 CN 111913705 A,2020.1 1.10 CN 111913705 A,2020.1 1.10 CN 110309444 A,2019.10.08 CN 10938 8766 A,2019.02.26 CN 106126645 A,2016.1 1.16 CN 103514179 A,2014.01.15 US 2019238690 A1,2019.08.01 阳林等.一种可视化代码生成器的研究及应 用. 《科研信息化 技术与应用》 .2016,(第02期), 第68-72页. 审查员 李佳玲 (54)发明名称 一种Web浏览器下的大数据量树形结构渲染 系统及方法 (57)摘要 本发明公开了一种Web 浏览器下的大数据量 树形结构渲染系统及方法， 方法包括以下步骤： S1、 通过数据模块调用服务端系统接口获取服务 端系统数据， 得到真实数据； S2、 通过中央处理模 块获取真实数据和缓存模块的缓存 数据， 调用比 对算法获取比对结果构建虚拟DOM树数据； S3、 根 据虚拟DOM树数据调用渲染模块构建真实DOM树 结构， 完成渲染Web浏览器界面。 本发明通过将大 数据量转换为真实DOM树结构数据， 并采用分页 查询的形式， 转换成小数据量模式， 采用树形结 构+面包屑路径的形式， 将真实DOM树结构转化成 平铺结构通过浏览器装置展现， 分页小数据量渲 染也能够减 轻浏览器负荷， 达到同样的树形层次 结构展示。 权利要求书2页 说明书6页 附图2页 CN 114547525 B 2022.08.05 CN 114547525 B 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浏览器界面。权　利　要　求　书 1/2 页 2 CN 114547525 B 24.根据权利要求3所述的Web浏览器下的大数据量树形结构渲染方法， 其特征在于， 所 述步骤S32具体为： 将分页表格的行数据推送至面包屑组件， 进而新增面包屑组件中的节点路径， 根据面 包屑组件中的节点路径构建 真实DOM树结构， 并渲染Web浏览器界面； 其中， 新增面包屑组件中的节点路径的方法具体为： 根据分页表格组件的行数据查询面包屑组件中的父节点ID下的子节点ID， 判断是否存 在对应的子节点 ID； 若是， 则根据 所述分页表格组件的行数据更新所述子节点ID数据； 若否， 则新增面包屑 组件中的节点路径。权　利　要　求　书 2/2 页 3 CN 114547525 B 3