CN110909276A - 数据渲染方法、装置、计算机设备和存储介质 - Google Patents

Abstract

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

Description

数据渲染方法、装置、计算机设备和存储介质

技术领域

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

背景技术

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

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

发明内容

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

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

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

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

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

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

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

获取输入指令；

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

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

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

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

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

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

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

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

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

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

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

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

第一渲染模块，用于对第一页面数据进行全量渲染；

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

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

一种计算机设备，包括存储器和处理器，所述存储器存储有计算机程序，所述处理器执行所述计算机程序时实现以下步骤：

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

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

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

一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现以下步骤：

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

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

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

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

附图说明

图1为本发明一实施例中数据渲染方法的流程示意图；

图2为本发明一实施例中数据渲染装置的结构框图；

图3为一个实施例中计算机设备的内部结构图。

具体实施方式

为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请进行进一步详细说明。应当理解，此处描述的具体实施例仅仅用以解释本申请，并不用于限定本申请。

请参阅图1，图1为本发明一实施例的数据渲染方法的示意图。

在本实施例中，数据渲染方法包括：

步骤100，对第一页面数据进行全量渲染。

可以理解的，需要展示的全部数据较多，无法一次性展示在展示页面中，因此第一页面仅展示部分展示数据，可以为初始部分的数据，通过滚轮滚动、拖拽页面的方式，可以展示其它部分的数据。具体地，步骤100仅对第一页面的数据进行全部渲染，不渲染其它部分的数据。

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

可以理解的，通过滚轮滚动、拖拽页面调整展示数据时，第一页面的数据并未全部消失在展示页面中，因此第一页面数据与第二页面数据有部分重复，基于输入指令，即滚轮滚动圈数、拖拽距离即可计算得到展示数据的位移距离，基于展示页面的长宽与展示数据的位移距离可以计算得到第一页面数据与第二页面数据的重复部分面积，继而得到重复区域。

步骤120，基于重复区域对第二页面数据进行部分渲染。

示例性地，得到重复区域后，仅需对第二页面中除重复区域的数据外的其它部分数据进行渲染即可。

上述数据渲染方法，通过对第一页面数据进行全量渲染；基于展示页面的长宽与展示数据的位移距离获取第一页面数据与第二页面数据的重复区域；基于重复区域对第二页面数据进行部分渲染的方法，在画布滚动后，对与上一帧重复的渲染结果进行复用，仅对不重复的部分进行渲染，减少了耗费性能的渲染操作，避免页面卡顿，展示效果较好，效率较高。

示例性地，对第一页面数据进行全量渲染之前还包括获取并记录展示页面的长宽。可以理解的，除获取并记录展示页面的长宽之外，还需计算所有展示数据全部渲染之后的真实长宽。在本实施例中，展示页面为Canvas元素，展示数据以表格的形式进行展示。

Canvas元素是专门用来绘制图形的，它是一块无色透明的区域。相当于在页面中放置一块“画布”，可以在其中绘制图形，但是不是通过鼠标作画，而是需要利用javascript编写在其中进行绘画的脚本。

具体地，根据传入的数据源及Canvas元素的大小，计算所有数据都渲染出来后以表格形式展示时表格的长宽，以及画布的长宽(即Canvas元素的长宽，通常小于表格的真实长宽)。示例性地，通过计算表格每一列和每一行的宽度和高度，去和Canvas元素的长宽进行比较，得出第一页面数据的起始列序号startColIndex1、结束列序号endColIndex1、起始行序号startRowIndex1、结束行序号endRowIndex1，将这些序号信息记录到第一页面Viewport1对象上，表示当前视口内可见的单元格范围。同时我们还需要记录视口Viewport的横向偏移距离offsetX和纵向偏移距离offsetY，代表这个视口相对于真实视口的偏移量(即startColIndex和startRowIndex代表的那一个单元格相对于真实画布左上角的偏移量)，这两个值在一开始都为0，表示展示页面的左上角与第一页面的起始单元格重合。

可以理解的，计算并记录完成后，对第一页面数据进行全量渲染。

在其它实施例中，基于展示页面的长宽与展示数据的位移距离获取第一页面数据与第二页面数据的重复区域之前还包括获取输入指令；基于输入指令得到展示数据的位移距离。示例性地，通过接收输入指令，输入指令包括滚轮滚动、手指拖拉等，将相应的操作转换为页面在水平和垂直方向上的位移的距离deltaX和deltaY，生成出一个新的包含startColIndex2、endColIndex2、startRowIndex2、endRowIndex2的第二页面Viewport2，代表滚动或拖动后的页面。同时，建立待渲染页面Viewport3，代表与第一页面与第一页面不重合的页面范围。

可以理解的，基于第一页面Viewport1的起始列序号startColIndex1、结束列序号endColIndex1、起始行序号startRowIndex1、结束行序号endRowIndex1、横移距离scrollX和纵移距离scrollY计算待渲染页面Viewport3的起始列序号startColIndex3、结束列序号endColIndex3、起始行序号startRowIndex3、结束行序号endRowIndex3。

具体地，如果是向上滚动，则将第一页面Viewport1的起始行序号startRowIndex1作为待渲染页面Viewport3的结束行序号endRowIndex3，此时第二页面上重复部分为由endRowIndex3开始到第二页面底部的部分，第二页面上待渲染部分则为由第二页面顶部开始到endRowIndex3的部分；

如果是向下滚动，则将第一页面Viewport1的结束行序号endRowIndex1作为待渲染页面Viewport3的起始行序号startRowIndex3，此时第二页面上重复部分为由第二页面顶部开始到startRowIndex3的部分，第二页面上待渲染部分为由startRowIndex3开始到第二页面底部的部分；

如果是向左滚动，则将第一页面Viewport1的起始列序号startColIndex1作为待渲染页面Viewport3的结束列序号endColIndex3，此时第二页面上重复部分为由endColIndex3开始到第二页面右侧的部分，第二页面上待渲染部分则为由第二页面左侧开始到endColIndex3的部分；

如果是向右滚动，则将第一页面Viewport1的结束列序号endColIndex1作为待渲染页面Viewport3的起始列序号startColIndex3，此时第二页面上重复部分为由第二页面左侧开始到startColIndex3的部分，第二页面上待渲染部分为由startColIndex3开始到第二页面右侧的部分。

在其它实施例中，基于重复区域对第二页面数据进行部分渲染包括对第二页面数据中除重复区域的数据外的数据进行渲染，即对待渲染部分的数据进行渲染。可以理解的，对第二页面数据中除重复区域的数据外的数据进行渲染之后还包括将第一页面数据中的重复区域的数据与第二页面数据中经部分渲染后的数据进行组合，得到第二页面数据。比如如果是向下滚动，则截取第二页面上由第二页面顶部开始到startRowIndex3部分的画面并将这部分画面粘贴到最上方，相当于完成了重复部分数据的渲染，再对其它数据即待渲染部分的数据进行渲染，即完成了第二页面数据的渲染。

应该理解的是，虽然图1的流程图中的各个步骤按照箭头的指示依次显示，但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明，这些步骤的执行并没有严格的顺序限制，这些步骤可以以其它的顺序执行。而且，图1中的至少一部分步骤可以包括多个子步骤或者多个阶段，这些子步骤或者阶段并不必然是在同一时刻执行完成，而是可以在不同的时刻执行，这些子步骤或者阶段的执行顺序也不必然是依次进行，而是可以与其它步骤或者其它步骤的子步骤或者阶段的至少一部分轮流或者交替地执行。

在一个实施例中，如图2所示，提供了一种数据渲染装置，包括：第一渲染模块200、计算模块210和第二渲染模块220，其中：

第一渲染模块200，用于对第一页面数据进行全量渲染。

计算模块210，用于基于展示页面的长宽与展示数据的位移距离获取第一页面数据与第二页面数据的重复区域，第二页面数据包括执行输入指令后展示在展示页面中的数据。

计算模块210，还用于：

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

获取输入指令；

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

计算模块210，还用于：

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

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

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

第二渲染模块220，用于基于重复区域对第二页面数据进行部分渲染。

第二渲染模块220，还用于对第二页面数据中除重复区域的数据外的数据进行渲染。

第二渲染模块220，还用于将第一页面数据中的重复区域的数据与第二页面数据中经部分渲染后的数据进行组合，得到第二页面数据。

关于数据渲染装置的具体限定可以参见上文中对于数据渲染方法的限定，在此不再赘述。上述数据渲染装置中的各个模块可全部或部分通过软件、硬件及其组合来实现。上述各模块可以硬件形式内嵌于或独立于计算机设备中的处理器中，也可以以软件形式存储于计算机设备中的存储器中，以便于处理器调用执行以上各个模块对应的操作。

在一个实施例中，提供了一种计算机设备，该计算机设备可以是终端，其内部结构图可以如图3所示。该计算机设备包括通过系统总线连接的处理器、存储器、网络接口、显示屏和输入装置。其中，该计算机设备的处理器用于提供计算和控制能力。该计算机设备的存储器包括非易失性存储介质、内存储器。该非易失性存储介质存储有操作系统和计算机程序。该内存储器为非易失性存储介质中的操作系统和计算机程序的运行提供环境。该计算机设备的网络接口用于与外部的终端通过网络连接通信。该计算机程序被处理器执行时以实现一种数据渲染方法。该计算机设备的显示屏可以是液晶显示屏或者电子墨水显示屏，该计算机设备的输入装置可以是显示屏上覆盖的触摸层，也可以是计算机设备外壳上设置的按键、轨迹球或触控板，还可以是外接的键盘、触控板或鼠标等。

本领域技术人员可以理解，图3中示出的结构，仅仅是与本申请方案相关的部分结构的框图，并不构成对本申请方案所应用于其上的计算机设备的限定，具体的计算机设备可以包括比图中所示更多或更少的部件，或者组合某些部件，或者具有不同的部件布置。

在一个实施例中，提供了一种计算机设备，包括存储器和处理器，存储器中存储有计算机程序，该处理器执行计算机程序时实现以下步骤：

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

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

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

在一个实施例中，处理器执行计算机程序时还实现以下步骤：

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

获取输入指令；

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

在一个实施例中，处理器执行计算机程序时还实现以下步骤：

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

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

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

在一个实施例中，处理器执行计算机程序时还实现以下步骤：

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

在一个实施例中，处理器执行计算机程序时还实现以下步骤：

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

在一个实施例中，提供了一种计算机可读存储介质，其上存储有计算机程序，计算机程序被处理器执行时实现以下步骤：

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

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

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

在一个实施例中，计算机程序被处理器执行时还实现以下步骤：

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

获取输入指令；

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

在一个实施例中，计算机程序被处理器执行时还实现以下步骤：

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

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

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

在一个实施例中，计算机程序被处理器执行时还实现以下步骤：

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

在一个实施例中，计算机程序被处理器执行时还实现以下步骤：

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

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

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，该计算机程序可存储于一非易失性计算机可读取存储介质中，该计算机程序在执行时，可包括如上述各方法的实施例的流程。其中，本申请所提供的各实施例中所使用的对存储器、存储、数据库或其它介质的任何引用，均可包括非易失性和/或易失性存储器。非易失性存储器可包括只读存储器(ROM)、可编程ROM(PROM)、电可编程ROM(EPROM)、电可擦除可编程ROM(EEPROM)或闪存。易失性存储器可包括随机存取存储器(RAM)或者外部高速缓冲存储器。作为说明而非局限，RAM以多种形式可得，诸如静态RAM(SRAM)、动态RAM(DRAM)、同步DRAM(SDRAM)、双数据率SDRAM(DDRSDRAM)、增强型SDRAM(ESDRAM)、同步链路(Synchlink)DRAM(SLDRAM)、存储器总线(Rambus)直接RAM(RDRAM)、直接存储器总线动态RAM(DRDRAM)、以及存储器总线动态RAM(RDRAM)等。

以上实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。

以上实施例仅表达了本申请的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本申请构思的前提下，还可以做出若干变形和改进，这些都属于本申请的保护范围。因此，本申请专利的保护范围应以所附权利要求为准。

Claims (10)

1.一种数据渲染方法，其特征在于，所述方法包括：

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

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

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

2.根据权利要求1所述的方法，其特征在于，所述基于展示页面的长宽与展示数据的位移距离获取所述第一页面数据与第二页面数据的重复区域包括：

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

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

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

3.根据权利要求1所述的方法，其特征在于，所述基于展示页面的长宽与展示数据的位移距离获取所述第一页面数据与第二页面数据的重复区域之前还包括：

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

获取输入指令；

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

4.根据权利要求1所述的方法，其特征在于，所述展示页面包括Canvas元素。

5.根据权利要求1所述的方法，其特征在于，所述输入指令包括滚轮滚动或拖拽。

6.根据权利要求1所述的方法，其特征在于，所述基于所述重复区域对所述第二页面数据进行部分渲染包括：

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

7.根据权利要求6所述的方法，其特征在于，所述基于所述重复区域对所述第二页面数据进行部分渲染之后还包括：

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

8.一种数据渲染装置，其特征在于，所述装置包括：

第一渲染模块，用于对第一页面数据进行全量渲染；

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

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

9.一种计算机设备，包括存储器和处理器，所述存储器存储有计算机程序，其特征在于，所述处理器执行所述计算机程序时实现权利要求1至7中任一项所述方法的步骤。

10.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现权利要求1至7中任一项所述的方法的步骤。

Images