[发明专利]数据渲染方法、装置、计算机设备和存储介质

说明书

本申请涉及一种数据渲染方法、装置、计算机设备和存储介质。所述方法包括：对第一页面数据进行全量渲染；基于展示页面的长宽与展示数据的位移距离获取所述第一页面数据与第二页面数据的重复区域；基于所述重复区域对所述第二页面数据进行部分渲染。上述数据渲染方法、装置、计算机设备和存储介质，通过对第一页面数据进行全量渲染；基于展示页面的长宽与展示数据的位移距离获取所述第一页面数据与第二页面数据的重复区域；基于所述重复区域对所述第二页面数据进行部分渲染的方法，在画布滚动后，对与上一帧重复的渲染结果进行复用，仅对不重复的部分进行渲染，减少了耗费性能的渲染操作，避免页面卡顿，展示效果较好，效率较高。

技术领域

本申请涉及数据处理技术领域，特别是涉及一种数据渲染方法、装置、计算机设备和存储介质。

背景技术

在互联网业务开发的场景下，会有各种各样的海量数据场景，相应的也会有许多将这些数据在浏览器中进行展示的需求。

将数据从后台展示到浏览器网页上需要对数据进行渲染，一般根据网页大小选择性的将数据内容渲染到Canvas元素上，并根据网页的滚动调整展示数据，但由于渲染操作依然十分耗费性能，在页面滚动时如果每一帧都进行全量渲染容易造成页面卡顿，展示效果较差，效率较低。

发明内容

基于此，有必要针对在页面滚动时如果每一帧都进行全量渲染容易造成页面卡顿，展示效果较差，效率较低的技术问题，提供一种数据渲染方法、装置、计算机设备和存储介质。

一种数据渲染方法，所述方法包括：

对第一页面数据进行全量渲染；

基于展示页面的长宽与展示数据的位移距离获取所述第一页面数据与第二页面数据的重复区域，所述第二页面数据包括执行输入指令后展示在展示页面中的数据；

基于所述重复区域对所述第二页面数据进行部分渲染。

在其中一个实施例中，所述基于展示页面的长宽与展示数据的位移距离获取所述第一页面数据与第二页面数据的重复区域之前还包括：

获取并记录展示页面的长宽；

获取输入指令；

基于所述输入指令得到展示数据的位移距离。

在其中一个实施例中，所述基于所述展示页面的长宽与位移距离获取所述第一页面数据与所述第二页面数据的重复区域包括：

基于所述展示页面的长宽得到所述第一页面数据的起始列序号、结束列序号、起始行序号以及结束行序号；

基于所述位移距离以及所述第一页面数据的起始列序号、结束列序号、起始行序号、结束行序号获取所述第二页面数据的起始列序号、结束列序号、起始行序号、结束行序号；

基于所述第一页面数据的起始列序号、结束列序号、起始行序号、结束行序号以及所述第二页面数据的起始列序号、结束列序号、起始行序号、结束行序号获取所述第一页面数据与所述第二页面数据的重复区域。

在其中一个实施例中，所述展示页面包括Canvas元素。

在其中一个实施例中，所述输入指令包括滚轮滚动或拖拽。

在其中一个实施例中，所述基于所述重复区域对所述第二页面数据进行部分渲染包括：

对所述第二页面数据中除所述重复区域的数据外的数据进行渲染。

在其中一个实施例中，所述基于所述重复区域对所述第二页面数据进行部分渲染之后还包括：

将所述第一页面数据中的重复区域的数据与第二页面数据中经部分渲染后的数据进行组合，得到第二页面数据。

一种数据渲染装置，所述装置包括：