一种数据渲染的方法、装置、计算机设备以及存储介质制造方法及图纸

技术编号:32518903 阅读:27 留言:0更新日期:2022-03-02 11:18
本申请实施例公开了一种数据渲染的方法、装置、计算机设备以及存储介质,用于提升客户端对网页的数据渲染性能。本申请实施例中,根据网页展示窗口的尺寸以及宽高配置参数确定网页展示窗口的可视化区域的目标值,创建多个DOM对象,并根据待渲染数据对该多个DOM对象进行渲染并在可视化区域中展示渲染后的数据,当监听到数据变化更新的指令时,客户端无需重新创建新的DOM对象,只需复用之前已创建的DOM对象进行数据更新渲染,并将更新渲染后的数据展示在可视化区域,因此,本实施例中DOM对象可以复用,不再重复地创建和销毁,大大节省了客户端的处理资源,进而提升客户端的网页渲染性能。能。能。

【技术实现步骤摘要】
一种数据渲染的方法、装置、计算机设备以及存储介质


[0001]本申请实施例涉及数据处理领域,具体涉及一种数据渲染的方法、装置、计算机设备以及存储介质。

技术介绍

[0002]随着网页技术的发展,网页已经成为低成本实现数据多功能展示的最佳选择。传统的网页渲染技术基于列表形式将数据渲染至网页中,进行数据渲染时,客户端计算当前需要创建的DOM对象(document object model,文档对象模型)的数量,根据DOM对象的数量从需要渲染的原始数据中获取待渲染数据,并将待渲染数据渲染至DOM对象对应的显示区域中。例如,客户端计算当前需要创建100个DOM对象,则从需要渲染的原始数据中获取100条待渲染数据,并分别将每条待渲染数据一一渲染至1个DOM对象对应的显示区域中,每个DOM对象分别对应1条数据。
[0003]在完成对当前一批数据的渲染之后,若客户端需要对下一批待渲染数据进行渲染,则客户端需要销毁当前一批数据对应的DOM对象,才能针对下一批待渲染数据创建新的DOM对象。可见,客户端在对网页进行数据渲染时需要不断地创建DOM对象以及销毁本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种数据渲染的方法,应用于具有至少一个网页展示窗口的客户端上,其特征在于,所述方法包括:根据所述网页展示窗口的尺寸以及所述网页展示窗口的可视化区域的宽高配置参数以确定所述网页展示窗口的可视化区域的目标值;对获取到的待渲染的数据源进行解析,得到多条待渲染数据,所述待渲染数据包括第一待渲染数据和第二待渲染数据;创建与所述目标值相同的多个DOM对象,每个所述可视化区域分别对应一个所述DOM对象;根据所述第一待渲染数据渲染所述DOM对象,将所述DOM对象渲染后的数据展示在所述DOM对象对应的可视化区域中;当监听到数据切换指令时,根据所述第二待渲染数据更新渲染目标DOM对象,将所述目标DOM对象渲染后的数据展示在所述目标DOM对象对应的可视化区域中,所述目标DOM对象为所述多个DOM对象中的一个。2.根据权利要求1所述的方法,其特征在于,每条所述待渲染数据对应唯一的一个虚拟ID,每一个所述虚拟ID关联于1个DOM对象;所述根据所述第一待渲染数据渲染所述DOM对象,包括:根据所述第一待渲染数据渲染与所述第一待渲染数据的虚拟ID关联的DOM对象;所述根据所述第二待渲染数据更新渲染目标DOM对象,包括:确定与所述第二待渲染数据的虚拟ID关联的所述目标DOM对象,根据所述第二待渲染数据更新渲染所述目标DOM对象。3.根据权利要求1所述的方法,其特征在于,所述网页展示窗口的每一行包括N个所述可视化区域,N条所述待渲染数据为一组,每组所述待渲染数据唯一地对应一个虚拟分组ID,每一个所述虚拟分组ID关联于N个DOM对象;其中N为大于1的正整数;所述根据所述第一待渲染数据渲染所述DOM对象,包括:根据N条第一待渲染数据渲染与所述N条第一待渲染数据的虚拟分组ID关联的N个DOM对象;所述根据所述第二待渲染数据更新渲染目标DOM对象,包括:确定与N条第二待渲染数据的虚拟分组ID关联的N个目标DOM对象,根据所述N条第二待渲染数据更新渲染所述N个目标DOM对象。4.根据权利要求2所述的方法,其特征在于,所述宽高配置参数包括所述可视化区域的行高配置参数;所述方法还包括:将所述网页展示窗口中滚动条的顶部至所述网页展示窗口的顶部的距离除以所述行高配置参数得到的商并取整,以及将得到的数值作为起始位置数值;将所述网页展示窗口的高度值除以所述行高配置参数得到的商作为结束位置数值;所述根据所述第一待渲染数据渲染所述DOM对象,包括:在所述多条待渲染数据中确定对应于所述起始位置数值的虚拟ID以及对应于所述结束位置数值的虚拟ID,将对应于所述起始位置数值的虚拟ID至对应于所述结束位置数值的虚拟ID之间的多个虚拟ID对应的多条待渲染数据确定为所述第一待渲染数据,分别根据每
条所述第一待渲染数据渲染所述DOM对象。5.根据权利要求4...

【专利技术属性】
技术研发人员:张清森陈俊灵郑锦宏
申请(专利权)人:深圳市绿联科技股份有限公司
类型:发明
国别省市:

网友询问留言 已有0条评论
  • 还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。

1