CN114398576A - 页面渲染方法、装置、电子设备及存储介质 - Google Patents

Abstract

本公开关于一种页面渲染方法、装置、电子设备及存储介质，该方法包括：获取目标页面对应的待渲染数据，待渲染数据包括多个子数据，多个子数据由多个初始单元格对待渲染数据进行划分得到；将多个初始单元格中，与目标页面中的预设可视区域具有重叠部分的初始单元格，作为当前待渲染单元格；根据当前待渲染单元格的尺寸信息、预设可视区域的尺寸信息和预设可视区域内的预设画布，在预设可视区域渲染当前待渲染单元格以及位于当前待渲染单元格中的子数据。本公开实施例能够精准展示该待渲染数据中的部分数据，降低了短时间内对系统资源和性能的消耗。

Description

页面渲染方法、装置、电子设备及存储介质

技术领域

本公开涉及计算机技术领域，尤其涉及一种页面渲染方法、装置、电子设备及存储介质。

背景技术

在大数据可视化分析场景下，当面对几万、几十万甚至百万级别的数据时，需要将全量的数据在前端做展示。

相关技术中，通常在页面一次性渲染全量数据，即在页面初始化时，将所要渲染的全量数据一次性渲染到页面中。

然而，一次性渲染全量数据的方式会在短时间内消耗系统大量的资源和性能，导致页面延期响应用户的操作，严重情况下可能会导致页面崩溃。

发明内容

本公开提供一种页面渲染方法、装置及系统，以至少解决相关技术中的一次性渲染全量数据的方式所带来的系统资源和性能消耗较大、页面延期响应用户的操作等问题。本公开的技术方案如下：

根据本公开实施例的第一方面，提供一种页面渲染方法，包括；

获取目标页面对应的待渲染数据，所述待渲染数据包括多个子数据，所述多个子数据由多个初始单元格对所述待渲染数据进行划分得到；

将所述多个初始单元格中，与所述目标页面中的预设可视区域具有重叠部分的初始单元格，作为当前待渲染单元格；

根据所述当前待渲染单元格的尺寸信息、所述预设可视区域的尺寸信息和所述预设可视区域内的预设画布，在所述预设可视区域渲染所述当前待渲染单元格以及位于所述当前待渲染单元格中的子数据。

在一个示例性的实施方式中，所述将所述多个初始单元格中，与所述目标页面中的预设可视区域具有重叠部分的初始单元格，作为当前待渲染单元格，包括：

比较所述多个初始单元格各自对应的第一起止位置与所述预设可视区域的第二起止位置；

基于比较结果，确定与所述预设可视区域具有重叠部分的初始单元格，得到所述当前待渲染单元格。

在一个示例性的实施方式中，所述第一起止位置包括第一起点位置和第一终点位置，所述第二起止位置包括第二起点位置和第二终点位置，

所述基于比较结果，确定与所述预设可视区域具有重叠部分的初始单元格，得到所述当前待渲染单元格，包括：

将第一终点位置位于所述第二起点位置的右下角区域，且第一起点位置位于所述第二终点位置的左上角区域的初始单元格，作为所述当前待渲染单元格。

在一个示例性的实施方式中，所述预设可视区域包括预设位置控制信息，所述预设位置控制信息用于调整所述待渲染数据相对于所述目标页面的位置信息，在所述预设可视区域渲染所述当前待渲染单元格以及位于所述当前待渲染单元格中的子数据之后，所述方法还包括：

响应于基于所述预设位置控制信息触发的操作指令，调整所述待渲染数据的位置信息；

将调整后的初始单元格中，与所述预设可视区域具有重叠部分的初始单元格，重新作为所述当前待渲染单元格；并重新执行所述根据所述当前待渲染单元格的尺寸信息、所述预设可视区域的尺寸信息和所述预设可视区域内的预设画布，在所述预设可视区域渲染所述当前待渲染单元格以及位于所述当前待渲染单元格中的子数据。

在一个示例性的实施方式中，所述调整后的初始单元格的确定过程，包括：

根据调整后的待渲染数据的第一偏移量和目标事件的第二偏移量，确定所述调整后的待渲染数据的目标偏移量；所述目标事件表征沿预设方向调整所述待渲染数据所产生的事件；

根据所述目标偏移量和所述第一起止位置，确定所述调整后的待渲染数据中的多个初始单元格各自对应的调整后的初始单元格。

在一个示例性的实施方式中，所述预设位置控制信息包括横向控制信息，所述第一偏移量包括第一横向偏移量，所述第二偏移量包括第二横向偏移量，所述目标偏移量包括目标横向偏移量，所述根据调整后的待渲染数据的第一偏移量和目标事件的第二偏移量，确定所述调整后的待渲染数据的目标偏移量，包括：

比较所述第一横向偏移量与所述第二横向偏移量；

在所述第一横向偏移量小于或等于所述第二横向偏移量的情况下，将所述第一横向偏移量与所述第二横向偏移量的差值作为所述目标横向偏移量。

在一个示例性的实施方式中，所述预设位置控制信息包括纵向控制信息，所述第一偏移量包括第一纵向偏移量，所述第二偏移量包括第二纵向偏移量，所述目标偏移量包括目标纵向偏移量，所述根据调整后的待渲染数据的第一偏移量和目标事件的第二偏移量，确定所述调整后的待渲染数据的目标偏移量，包括：

比较所述第一纵向偏移量与所述第二纵向偏移量；

在所述第一纵向偏移量小于或等于所述第二纵向偏移量的情况下，将所述第一纵向偏移量与所述第二纵向偏移量的差值作为所述目标纵向偏移量。

在一个示例性的实施方式中，所述方法还包括：

根据初始表格的行列数以及所述初始表格的行列的尺寸信息，确定所述待渲染数据所在的数据区域的尺寸信息，所述初始表格基于所述多个初始单元格生成；

根据所述预设可视区域的尺寸信息和所述待渲染数据所在的数据区域的尺寸信息，确定所述预设位置控制信息的尺寸信息；

基于所述预设位置控制信息的尺寸信息，在所述预设可视区域显示所述预设位置控制信息。

在一个示例性的实施方式中，所述当前待渲染单元格的数量为多个，所述根据所述当前待渲染单元格的尺寸信息、所述预设可视区域的尺寸信息和和所述预设可视区域内的预设画布，在所述预设可视区域渲染所述当前待渲染单元格以及位于所述当前待渲染单元格中的子数据，包括：

将多个当前待渲染单元格各自在所述初始表格中的表格行，作为当前表格行；

根据每一当前表格行中的当前待渲染单元格，在所述初始表格中的初始尺寸信息以及所述预设可视区域的尺寸信息，确定所述每一当前表格行中的当前待渲染单元格，在所述预设可视区域中的目标尺寸信息和目标位置；

根据所述目标尺寸信息和所述预设画布，在所述目标位置渲染所述每一当前表格行中的当前待渲染单元格，以及所述每一当前表格行中的当前待渲染单元格中的子数据。

在一个示例性的实施方式中，所述方法还包括：

将所述预设可视区域的尺寸信息，作为所述预设画布的尺寸信息；

将所述第二起止位置作为所述预设画布的起止位置；

基于预设画布组件、所述预设画布组件的尺寸信息和所述预设画布的起止位置，在所述预设可视区域中创建所述预设画布。

根据本公开实施例的第二方面，提供一种页面渲染装置，包括；

待渲染数据获取装置，被配置为执行获取目标页面对应的待渲染数据，所述待渲染数据包括多个子数据，所述多个子数据由多个初始单元格对所述待渲染数据进行划分得到；

当前待渲染单元格确定模块，被配置为执行将所述多个初始单元格中，与所述目标页面中的预设可视区域具有重叠部分的初始单元格，作为当前待渲染单元格；

渲染模块，被配置为执行根据所述当前待渲染单元格的尺寸信息、所述预设可视区域的尺寸信息和所述预设可视区域内的预设画布，在所述预设可视区域渲染所述当前待渲染单元格以及位于所述当前待渲染单元格中的子数据。

在一个示例性的实施方式中，所述当前待渲染单元格确定模块，包括：

比较单元，被配置为执行比较所述多个初始单元格各自对应的第一起止位置与所述预设可视区域的第二起止位置；

当前待渲染单元格确定单元，被配置为执行基于比较结果，确定与所述预设可视区域具有重叠部分的初始单元格，得到所述当前待渲染单元格。

在一个示例性的实施方式中，所述第一起止位置包括第一起点位置和第一终点位置，所述第二起止位置包括第二起点位置和第二终点位置，所述当前待渲染单元格确定单元，被配置为执行将第一终点位置位于所述第二起点位置的右下角区域，且第一起点位置位于所述第二终点位置的左上角区域的初始单元格，作为所述当前待渲染单元格。

在一个示例性的实施方式中，所述预设可视区域包括预设位置控制信息，所述预设位置控制信息用于调整所述待渲染数据相对于所述目标页面的位置信息，所述装置还包括：

调整模块，被配置为执行响应于基于所述预设位置控制信息触发的操作指令，调整所述待渲染数据的位置信息；

重新确定模块，被配置为执行将调整后的初始单元格中，与所述预设可视区域具有重叠部分的初始单元格，重新作为所述当前待渲染单元格；并重新执行所述根据所述当前待渲染单元格的尺寸信息、所述预设可视区域的尺寸信息和所述预设可视区域内的预设画布，在所述预设可视区域渲染所述当前待渲染单元格以及位于所述当前待渲染单元格中的子数据。

在一个示例性的实施方式中，所述装置还包括：

目标偏移量确定模块，被配置为执行根据调整后的待渲染数据的第一偏移量和目标事件的第二偏移量，确定所述调整后的待渲染数据的目标偏移量；所述目标事件表征沿预设方向调整所述待渲染数据所产生的事件；

初始单元格确定模块，被配置为根据所述目标偏移量和所述第一起止位置，确定所述调整后的待渲染数据中的多个初始单元格各自对应的调整后的初始单元格。

在一个示例性的实施方式中，所述预设位置控制信息包括横向控制信息，所述第一偏移量包括第一横向偏移量，所述第二偏移量包括第二横向偏移量，所述目标偏移量包括目标横向偏移量，所述目标偏移量确定模块，包括：

横向比较单元，被配置为执行比较所述第一横向偏移量与所述第二横向偏移量；

目标横向偏移量确定单元，被配置为执行在所述第一横向偏移量小于或等于所述第二横向偏移量的情况下，将所述第一横向偏移量与所述第二横向偏移量的差值作为所述目标横向偏移量。

在一个示例性的实施方式中，所述预设位置控制信息包括纵向控制信息，所述第一偏移量包括第一纵向偏移量，所述第二偏移量包括第二纵向偏移量，所述目标偏移量包括目标纵向偏移量，所述目标偏移量确定模块，包括：

纵向比较子单元，被配置为执行比较所述第一纵向偏移量与所述第二纵向偏移量；

目标纵向偏移量确定子单元，被配置为执行在所述第一纵向偏移量小于或等于所述第二纵向偏移量的情况下，将所述第一纵向偏移量与所述第二纵向偏移量的差值作为所述目标纵向偏移量。

在一个示例性的实施方式中，所述装置还包括：

第一尺寸信息确定模块，被配置为执行根据初始表格的行列数以及所述初始表格的行列的尺寸信息，确定所述待渲染数据所在的数据区域的尺寸信息，所述初始表格基于所述多个初始单元格生成；

第二尺寸信息确定模块，被配置为执行根据所述预设可视区域的尺寸信息和所述待渲染数据所在的数据区域的尺寸信息，确定所述预设位置控制信息的尺寸信息；

显示模块，被配置为执行基于所述预设位置控制信息的尺寸信息，在所述预设可视区域显示所述预设位置控制信息。

在一个示例性的实施方式中，所述当前待渲染单元格的数量为多个，所述渲染模块，包括：

当前表格行确定单元，被配置为执行将多个当前待渲染单元格各自在所述初始表格中的表格行，作为当前表格行；

尺寸位置确定单元，被配置为执行根据每一当前表格行中的当前待渲染单元格，在所述初始表格中的初始尺寸信息以及所述预设可视区域的尺寸信息，确定所述每一当前表格行中的当前待渲染单元格，在所述预设可视区域中的目标尺寸信息和目标位置；

表格页面渲染单元，被配置为执行根据所述目标尺寸信息和所述预设画布，在所述目标位置渲染所述每一当前表格行中的当前待渲染单元格，以及所述每一当前表格行中的当前待渲染单元格中的子数据。

在一个示例性的实施方式中，所述装置还包括创建所述预设可视区域的创建模块，所述创建模块，包括：

画布尺寸信息确定单元，被配置为执行将所述预设可视区域的尺寸信息，作为所述预设画布的尺寸信息；

画布起止位置确定单元，被配置为执行将所述第二起止位置作为所述预设画布的起止位置；

创建单元，被配置为执行基于所述预设画布组件、所述预设画布组件的尺寸信息和所述预设画布的起止位置，在所述预设可视区域中创建所述预设画布。

根据本公开实施例的第三方面，提供一种电子设备，包括：

处理器；

用于存储所述处理器可执行指令的存储器；

其中，所述处理器被配置为执行所述指令，以实现如上述任一实施方式所述的页面渲染方法。

根据本公开实施例的第四方面，提供一种计算机可读存储介质，当所述计算机可读存储介质中的指令由电子设备的处理器执行时，使得电子设备执行如上述任一实施方式所述的页面渲染方法。

根据本公开实施例的第五方面，提供一种计算机程序产品，包括计算机程序，所述计算机程序被处理器执行时实现上述任一实施方式所述的页面渲染方法。

本公开的实施例提供的技术方案至少带来以下有益效果：

本公开实施例将满足预设条件的当前待渲染单元格对应的当前待渲染单元格以及该当前待渲染单元格中的子数据，渲染在预设可视区域中，实现了在预设可视区域内，精准展示该待渲染数据中的部分数据，降低了短时间内对系统资源和性能的消耗；此外，使用基于预设画布组件(Canvas)创建的预设画布对当前待渲染单元格以及该当前待渲染单元格中的数据进行渲染，由于Canvas能够直接操作绘图上下文，不需要经过解析、构建渲染树、布局等一系列操作，从而提高页面渲染的效率。

应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本公开。

附图说明

此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本公开的实施例，并与说明书一起用于解释本公开的原理，并不构成对本公开的不当限定。

图1是根据一示例性实施例示出的一种页面渲染方法的应用环境图。

图2是根据一示例性实施例示出的一种页面渲染方法的流程图。

图3是根据一示例性实施例示出的一种预设可视区域的示意图。

图4是根据一示例性实施例示出的一种预设位置控制信息示意图。

图5是根据一示例性实施例示出的一种确定当前待渲染单元格的流程图。

图6是根据一示例性实施例示出的一种确定当前待渲染单元格的示意图。

图7是根据一示例性实施例示出的一种渲染当前待渲染单元格和当前待渲染单元格中的子数据的流程图。

图8是根据一示例性实施例示出的另一种页面渲染方法的流程图。

图9是根据一示例性实施例示出的一种页面渲染装置框图。

图10是根据一示例性实施例示出的一种用于页面渲染的电子设备的框图。

具体实施方式

为了使本领域普通人员更好地理解本公开的技术方案，下面将结合附图，对本公开实施例中的技术方案进行清楚、完整地描述。

需要说明的是，本公开的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本公开的实施例能够以除了在这里图示或描述的那些以外的顺序实施。以下示例性实施例中所描述的实施方式并不代表与本公开相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本公开的一些方面相一致的装置和方法的例子。

请参阅图1，图1是根据一示例性实施例示出的一种页面渲染方法的应用环境图，该应用环境可以包括客户端01和服务器02。其中，客户端01可以用于获取目标页面对应的待渲染数据(上述待渲染数据包括多个子数据，上述多个子数据由多个初始单元格对上述待渲染数据进行划分得到)；以及用于将上述多个初始单元格中，与上述目标页面中的预设可视区域具有重叠部分的初始单元格，作为当前待渲染单元格；以及用于根据上述当前待渲染单元格的尺寸信息、上述预设可视区域的尺寸信息和上述预设可视区域内的预设画布，在上述预设可视区域渲染上述当前待渲染单元格以及位于上述当前待渲染单元格中的子数据。可选地，该客户端01可以包括智能手机、台式电脑、平板电脑、笔记本电脑、数字助理、增强现实(augmented reality，AR)/虚拟现实(virtual reality，VR)设备、智能可穿戴设备等终端设备。

其中，服务器02可以用于为客户端01提供后台服务。可选地，该服务器02可以是包括独立的物理服务器，也可以是多个物理服务器构成的服务器集群或者分布式系统，还可以是提供云服务、云数据库、云计算、云函数、云存储、网络服务、云通信、中间件服务、域名服务、安全服务、内容分发网络(Content Delivery Network，CDN)、以及大数据和人工智能平台等基础云计算服务的云服务器。

需要说明的是，上述应用环境仅仅是一种示例，本公开实施例还可以包括其他应用环境。

图2是根据一示例性实施例示出的一种页面渲染方法的流程图，如图2所示，该方法可以包括以下步骤。

在步骤S11中，获取目标页面对应的待渲染数据，上述待渲染数据包括多个子数据，上述多个子数据由多个初始单元格对上述待渲染数据进行划分得到。

在步骤S13中，将上述多个初始单元格中，与上述目标页面中的预设可视区域具有重叠部分的初始单元格，作为当前待渲染单元格。

具体地，目标页面为渲染待渲染数据的页面。

具体地，上述待渲染数据为表格数据，即上述待渲染数据包括由多个初始单元格进行划分所得到的子数据。其中，多个初始单元格生成一个初始表格。

图3是根据一示例性实施例示出的一种预设可视区域的示意图。如图3所示，上述预设可视区域可以理解为用于承载该初始表格的表格容器。该预设可视区域中包括预设画布、预设位置控制信息。其中，预设画布用于展示该初始表格中的表格内容，以及用于渲染表头、内容及单元格/表格边框等。预设位置控制信息，用于控制待渲染数据横/纵向滚动，从而达到将对应内容展示在预设可视区域的效果。

可选地，该预设位置控制信息可以为纵向控制信和横向控制信息。

图4是根据一示例性实施例示出的一种预设位置控制信息示意图。如图4所示，该横向控制信息可以为横向滚动条，该纵控制信息可以为纵向滚动条，该横向控制信息中包括横向滚动块，在纵向控制信息中包括纵向滚动块。在初始化过程中，可以将待处理数据的横./纵向偏移量均设为0，即横向滚动块距离纵向滚动条的顶部距离为0，纵向滚动块距离纵向滚动块的左边的距离为0。

可选地，可以利用div嵌套实现滚动条，外层div看作滚动轨道，内层作为滚动块。其中，div是层叠样式表中的定位技术，DIV元素用于为超文本标记语言(Hyper TextMarkup Language，HTML)文档内大块的内容提供结构和背景的元素。

在一个可选的实施例中，上述方法还可以包括：

根据初始表格的行列数以及上述初始表格的行列的尺寸信息，确定上述待渲染数据所在的数据区域的尺寸信息，上述初始表格基于上述多个初始单元格生成。

根据上述预设可视区域的尺寸信息和上述待渲染数据所在的数据区域的尺寸信息，确定上述预设位置控制信息的尺寸信息。

基于上述预设位置控制信息的尺寸信息，在上述预设可视区域显示上述预设位置控制信息。

可选地，上述初始表格的行列的尺寸信息可以包括初始表格的行高度信息和初始表格的列宽度信息，上述数据区域的尺寸信息可以包括上述数据区域的第一宽度信息和数据区域的第一高度信息，上述预设位置控制信息的尺寸信息包括纵向控制信息的高度信息和横向控制信息的宽度信息。则可以根据初始表格的行数以及上述初始表格的行高度信息，确定上述待渲染数据所在的数据区域的第一高度信息，上述初始表格基于上述多个初始单元格生成。基于上述初始表格的列数和以及上述初始表格的列宽度信息，确定上述数据区域的第一宽度信息。根据上述预设可视区域的高度信息和上述第一高度信息，确定上述纵向控制信息的高度信息。根据上述预设可视区域的宽度信息和上述第一宽度信息，确定上述横向控制信息的宽度信息。

可选地，初始表格的行高度信息可以为单行高度，该单行高度可以为固定值(即每行的高度均相同)，也可以设置每行的高度不同。

可选地，在单行高度均为固定值的情况下，可以将行数与单行高度的乘积，作为该数据区域的第一高度信息。在单行高度不为固定值的情况下，可以将每个行的高度的和，作为该数据区域的第一高度信息。

可选地，初始表格的列宽度信息可以为单列宽度，该单列宽度可以为固定值(即每列的宽度均相同)，也可以设置每列的宽度不同。

可选地，在单行宽度均为固定值的情况下，可以将列数与单行宽度的乘积，作为该数据区域的第一高度信息。在单行高度不为固定值的情况下，可以将每个行的高度的和，作为该数据区域的第一宽度信息。

具体地，可以将预设可视区域的高度信息与第一高度信息的商，作为纵向控制信息的纵向缩放比例，然后再将纵向缩放比例与预设可视区域的高度信息的乘积，作为纵向控制信息的高度信息。

具体地，可以将预设可视区域的宽度信息和上述第一宽度信息的商，作为横向控制信息的横向缩放比例，然后再将横向缩放比例与预设可视区域的宽度信息的乘积，作为横向控制信息的宽度信息。

本公开实施例中，根据上述待渲染数据所在的数据区域的尺寸信息以及预设可视区域的尺寸信息，确定预设位置控制信息的尺寸信息，并基于该预设位置控制信息的尺寸信息，在该预设可视区域显示该预设位置控制信息，使得预设位置控制信息的创建与待渲染数据以及预设可视区域紧密相关，从而使得通过该预设位置控制信息能够控制待渲染数据在预设可视区域中的精准展示，进一步提高了页面渲染的精度。

在一个可选的实施例中，上述方法还包括创建上述预设可视区域，上述创建上述预设可视区域可以包括：

将上述预设可视区域的尺寸信息，作为上述预设画布的尺寸信息。

将上述第二起止位置作为上述预设画布的起止位置。

基于上述预设画布组件、上述预设画布组件的尺寸信息和上述预设画布的起止位置，在上述预设可视区域中创建上述预设画布。

具体地，预设画布可以通过预设画布组件(canvas组件)创建，其中，Canvas是一个矩形区域的画布组件，可以用脚本JavaScript控制每一个像素在上面绘画。Canvas使用JavaScript在网页上绘制图像，本身不具备绘图功能。Canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。其中，JavaScript是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。

具体地，上述尺寸信息可以包括起止位置、宽度、高度等。

具体地，上述预设画布的起止位置包括预设画布的绘制起点和绘制终点，该绘制起点为预设画布的左上角位置，该绘制终点为预设画布的右下角位置。

在创建预设画布的过程中，可以获取预设可视区域(即表格容器)的尺寸信息，设置预设画布与预设可视区域同宽高，并设置预设画布的绘制起点(即绘制画布的起点位置)为预设可视区域的左上角位置，设置预设画布的绘制终点(即绘制画布的终点位置)为预设可视区域的右下角位置。最后根据Canvas组件，在该预设可视区域中创建与上述预设画布组件的尺寸信息和上述预设画布的起止位置相对应的预设画布。

本公开实施例中，通过Canvas组件创建，用于在预设可视区域中渲染上述多个子数据中的部分数据的预设画布，便于在渲染过程中，利用预设画布能够直接操作绘图上下文，避免经过HTML、层叠样式表(Cascading Style Sheets，CSS)解析、构建渲染树、布局等一系列操作所带来的页面重排的问题，降低页面渲染过程对系统资源和性能的消耗，提高页面渲染效率。

在一个可选的实施例中，图5是根据一示例性实施例示出的一种确定当前待渲染单元格的流程图。如图5所示，在上述步骤S13中，上述将上述多个初始单元格中，与上述目标页面中的预设可视区域具有重叠部分的初始单元格，作为当前待渲染单元格，可以包括：

在步骤S1301中，比较上述多个初始单元格各自对应的第一起止位置与上述预设可视区域的第二起止位置。

在步骤S1303中，基于比较结果，确定与上述预设可视区域具有重叠部分的初始单元格，得到上述当前待渲染单元格。

在一个可选的实施例中，上述第一起止位置包括第一起点位置和第一终点位置，上述第二起止位置包括第二起点位置和第二终点位置，则在上述步骤S1301中，可以遍历每一初始单元格的第一起止位置，并在遍历每一初始单元格的第一起止位置时，执行以下步骤：比较每一初始单元格的第一起点位置与上述第二终点位置，以及比较每一初始单元格的第一终点位置与上述第二起点位置。

需要说明的是，上述第一起止位置表征上述初始单元格的左上角位置和右下角位置该第一起点位置可以为左上角位置，该第一终点位置可以为右下角位置。上述第二起止位置表征上述预设可视区域的左上角位置和右下角位置，该第二起点位置可以为左上角位置，该第二终点位置可以为右下角位置。

本公开实施例中，通过比较多个初始单元格各自对应的第一起止位置与上述预设可视区域的第二起止位置，能够准确确定出与上述预设可视区域具有重叠部分的当前待渲染单元格，提高当前待渲染单元格确定的效率和精度，以便精准将当前待渲染单元格对应的数据渲染到预设可视区域内，提高页面渲染的精度和效率。

在一个可选的实施例中，在上述步骤S1303中，上述基于比较结果，确定与上述预设可视区域具有重叠部分的初始单元格，得到上述当前待渲染单元格，可以包括：

将第一终点位置位于上述第二起点位置的右下角区域，且第一起点位置位于上述第二终点位置的左上角区域的初始单元格，作为上述当前待渲染单元格。

在另一个可选的实施例中，在上述步骤S1303中，还可以将第一终点位置和第一起点位置中的任意一个位于该预设可视区域中的初始单元格，作为该当前待渲染单元格。

具体地，可以将当前待渲染单元格的当前待渲染单元格存入单元格配置中，并将该当前待渲染单元格的当前待渲染单元格存入待绘制数据集合中。

图6是根据一示例性实施例示出的一种确定当前待渲染单元格的示意图。如图6所示，假设初始表格包括初始单元格1、初始单元格2、初始单元格3、初始单元格4、初始单元格5、初始单元格6、初始单元格7、初始单元格8和初始单元格9。

则按照步骤S1301-上述步骤S1303的方式依次遍历这9个单元格，发现初始单元格4、初始单元格5、初始单元格6、初始单元格7、初始单元格8和初始单元格9满足第一终点位置位于上述第二起点位置的右下角区域，且第一起点位置位于上述第二终点位置的左上角区域，则将初始单元格4、初始单元格5、初始单元格6、初始单元格7、初始单元格8和初始单元格9作为当前待渲染单元格，并将该当前待渲染单元格的当前待渲染单元格存入待绘制数据集合中。

本公开实施例中，通过判断初始单元格的第一起点位置是否位于第二终点位置的左上角区域，以及初始单元格的第一终点位置是否位于第二起点位置的右下角区域，并将第一终点位置位于第二起点位置的右下角区域，且第一起点位置位于第二终点位置的左上角区域的初始单元格，作为当前待渲染单元格，进一步提高了当前待渲染单元格确定的效率和精度，以便精准将当前待渲染单元格对应的数据渲染到预设可视区域内，提高页面渲染的精度和效率。

在步骤S15中，根据上述当前待渲染单元格的尺寸信息、上述预设可视区域的尺寸信息和上述预设可视区域内的预设画布，在上述预设可视区域渲染所述当前待渲染单元格以及位于上述当前待渲染单元格中的子数据。

具体地，可以利用预设画布，根据预设可视区域的尺寸信息(包括起止位置和宽高)循环绘制当前待渲染单元格，并将该当前待渲染单元格中的子数据绘制在该当前待渲染单元格的中心位置。

在一个可选的实施例中，在当前待渲染单元格的数量为一个时，可以获取该当前待渲染单元格在初始表格中的初始尺寸信息，并根据该初始尺寸信息和上述预设可视区域的尺寸信息，确定该当前待渲染单元格在预设可视区域中的目标位置，接着根据预设画布在该目标位置渲染该当前待渲染单元格，以及该当前待渲染单元格中的子数据。

在一个可选的实施例中，图7是根据一示例性实施例示出的一种渲染当前待渲染单元格和当前待渲染单元格中的子数据的流程图。如图7所示，上述当前待渲染单元格的数量为多个，在上述步骤S15中，上述根据上述当前待渲染单元格的尺寸信息、上述预设可视区域的尺寸信息和上述预设画布，在上述预设可视区域渲染与上述当前待渲染单元格以及位于上述当前待渲染单元格中的子数据，可以包括：

在步骤S1501中，将多个当前待渲染单元格各自在上述初始表格中的表格行，作为当前表格行。

在步骤S1503中，根据每一当前表格行中的当前待渲染单元格，在上述初始表格中的初始尺寸信息以及上述预设可视区域的尺寸信息，确定上述每一当前表格行中的当前待渲染单元格，在上述预设可视区域中的目标尺寸信息和目标位置。

在步骤S1505中，根据上述目标尺寸信息和上述预设画布，在上述目标位置渲染上述每一当前表格行中的当前待渲染单元格，以及上述每一当前表格行中的当前待渲染单元格中的子数据。

可选地，上述步骤S1503-步骤S1505，可以并行进行，也可以串行进行。

可选地，在上述步骤S1503中，由于预设可视区域的尺寸信息是固定的，因此可以根据预设可视区域的尺寸信息以及当前待渲染单元格的初始尺寸信息，调整(例如，缩小、增大等)当前待渲染单元格在预设可视区域中的目标尺寸信息，使当前待渲染单元格能够展示在预设可视区域中，同时，还可以根据预设可视区域的尺寸信息，确定当前待渲染单元格在预设可视区域中的位置信息，以便每个单元格均能够在预设可视区域中的合适位置进行展示。

可选地，在确定目标尺寸信息和目标位置之后，可以利用预设画布，在目标位置渲染目标尺寸信息的当前待渲染单元格和该当前待渲染单元格中的子数据。

以下，以上述步骤S1503-步骤S1505串行进为例，对上述步骤S1501-步骤S1505进行说明：

继续如图6所示，初始单元格4、初始单元格5、初始单元格6、初始单元格7、初始单元格8和初始单元格9满足上述预设条件，则将初始单元格4、单元格5、初始单元格6、初始单元格7、初始单元格8和初始单元格9为当前待渲染单元格。

初始单元格4、初始单元格5和初始单元格6位于初始表格中的第2行，即初始单元格4、初始单元格5和初始单元格6在初始表格中的当前表格行为第2行。

初始单元格7、初始单元格8和初始单元格9位于初始表格中的第3行，即初始单元格7、初始单元格8和初始单元格9在初始表格中的当前表格行为第3行。

在遍历的时候，首选遍历初始表格中的第2行，并在遍历第2行时，执行以下步骤：

根据初始单元格4、初始单元格5和初始单元格6，在初始表格中的初始尺寸信息(包括起止位置、宽高)以及上述预设可视区域的尺寸信息，确定初始单元格4、初始单元格5和初始单元格6在上述预设可视区域中的目标尺寸信息和目标位置。

接着根据初始单元格4、初始单元格5和初始单元格6在预设可视区域中的目标尺寸信息和上述预设画布，在上述目标位置渲染初始单元格4、初始单元格5和初始单元格6，以及初始单元格4、初始单元格5和初始单元格6各自对应的子数据。

需要说明的是，可以按照当前待渲染单元格在初始表格中的表格列，依次渲染各个当前待渲染单元格。比如，初始单元格4、初始单元格5和初始单元格6，在上述初始表格中的表格列分别为第1列、第2列和第3列，则可以首选渲染初始单元格4、接着渲染初始单元格5，最后渲染初始单元格6。

接着遍历初始表格中的第3行，并在遍历第3行时，执行以下步骤：

根据初始单元格7、初始单元格8和初始单元格9，在初始表格中的初始尺寸信息(包括起止位置、宽高)以及上述预设可视区域的尺寸信息，确定初始单元格7、初始单元格8和初始单元格9在上述预设可视区域中的目标尺寸信息和目标位置。

接着根据初始单元格7、初始单元格8和初始单元格9在预设可视区域中的目标尺寸信息和上述预设画布，在上述目标位置渲染初始单元格7、初始单元格8和初始单元格9，以及初始单元格7、初始单元格8和初始单元格9各自对应的子数据。

需要说明的是，可以按照当前待渲染单元格在初始表格中的表格列，依次渲染各个当前待渲染单元格。比如，初始单元格7、初始单元格8和初始单元格9在上述初始表格中的表格列，分别为第1列、第2列和第3列，则可以首选渲染初始单元格7、接着渲染初始单元格8，最后渲染初始单元格9。

需要说明的是，继续如图6所示，虽然初始单元格4、初始单元格5、初始单元格6、初始单元格7、初始单元格8和初始单元格9中的部分区域位于预设可视区域外，但在渲染的时候，会渲染初始单元格4、初始单元格5、初始单元格6、初始单元格7、初始单元格8和初始单元格9中的全部数据(即位于预设可视区域外的数据也会渲染)，因此，需要根据初始单元格的初始尺寸信息以及上述预设可视区域的尺寸信息，确定初始单元格在上述预设可视区域中的目标尺寸信息和目标位置，以便各个当前待渲染单元格均能够美观且完整地展示在预设可视区域中。

本公开实施例中，利用预设画布，根据预设可视区域的尺寸信息循环绘制当前待渲染单元格(即先绘制每一当前表格行中的各个当前待渲染单元格，然后再绘制另一当前表格行中的各个当前待渲染单元格)，并将该当前待渲染单元格中的子数据绘制在该当前待渲染单元格中，能够精准将当前当初始单元格以及该当前待渲染单元格中的子数据渲染到预设可视区域中，实现了在预设可视区域中精准渲染该待渲染数据中的部分数据，降低了短时间被对系统资源和性能的消耗；此外，利用预设画布循环渲染当前待渲染单元格以及该当前待渲染单元格中的数据，由于Canvas能够直接操作绘图上下文，不需要经过解析、构建渲染树、布局等一系列操作所带来的页面重排的问题，降低页面渲染过程对系统资源和性能的消耗，提高页面渲染效率。

在一个可选的实施例中，图8是根据一示例性实施例示出的另一种页面渲染方法的流程图。如图8所示，上述预设可视区域包括预设位置控制信息，上述预设位置控制信息用于调整上述待渲染数据相对于上述目标页面的位置信息，在上述步骤S15之后，上述方法还可以包括：

在步骤S17中，响应于基于上述预设位置控制信息触发的操作指令，调整上述待渲染数据的位置信息。

在步骤S19中，将调整后的初始单元格中，与上述预设可视区域具有重叠部分的初始单元格，重新作为上述当前待渲染单元格；并重新执行上述根据上述当前待渲染单元格的尺寸信息、上述预设可视区域的尺寸信息和上述预设可视区域内的预设画布，在上述预设可视区域渲染上述当前待渲染单元格以及位于上述当前待渲染单元格中的子数据。

可选地，上述操作指令可以为点击、拖拽、滑动等指令。

具体地，待渲染数据包括的多个子数据，由多个初始单元格对该待渲染数据进行划分得到，在对待渲染数据的位置信息进行调整的时候，该多个初始单元格的位置也相应调整了。由于预设可视区域的位置是固定的，当多个初始单元格的位置发生变化的时候，与该预设可视区域具有重叠部分的当前待渲染单元格也相应地发生了改变，因此，需要根据调整后的初始单元格中，与上述预设可视区域具有重叠部分的初始单元格，重新作为上述当前待渲染单元格。并重新执行上述渲染过程。

本公开实施例在响应于基于上述预设位置控制信息触发的操作指令时，可以将调整后的初始单元格中，与预设可视区域具有重叠部分的初始单元格，重新作为当前待渲染单元格，并重复上述渲染的步骤，从而实现了在预设可视区域中，精准渲染该待渲染数据中的部分数据，降低了短时间被对系统资源和性能的消耗；同时，利用预设画布循环渲染当前待渲染单元格对应的当前待渲染单元格以及该当前待渲染单元格中的数据，由于Canvas能够直接操作绘图上下文，不需要经过解析、构建渲染树、布局等一系列操作所带来的页面重排的问题，降低页面渲染过程对系统资源和性能的消耗，从而提高页面渲染的效率。

在一个可选的实施例中，上述调整后的初始单元格的确定过程可以包括：

根据调整后的待渲染数据的第一偏移量和目标事件的第二偏移量，确定上述调整后的待渲染数据的目标偏移量；上述目标事件表征沿预设方向调整上述待渲染数据所产生的事件。

根据上述目标偏移量和上述第一起止位置，确定上述调整后的待渲染数据中的多个初始单元格各自对应的调整后的初始单元格。

具体地，上述第一偏移量可以为上述待渲染数据相对于目标页面的偏移量。

具体地，目标事件表征沿预设方向调整上述待渲染数据所产生的事件。比如，纵向滚动上述待渲染数据所产生的事件以及横向滚动上述待渲染数据所产生的事件。

具体地，纵向滚动上述待渲染数据所产生的事件所对应的第二偏移量为deltaY，横向滚动上述待渲染数据所产生的事件所对应的第二偏移量为deltaX。

其中，deltaX，返回用户是向左还是向右滚动：deltaX向右滚动时，该属性返回正值；向左滚动时，该属性返回负值，否则为0。deltaX，返回用户是向左还是向右滚动，在向下滚动时返回正值，向上滚动时返回负值，否则为0。

本公开实施例，目标偏移量的确定是调整后的待渲染数据的第一偏移量和目标事件的第二偏移量共同作用的结果，目标偏移量确定的精度较高，使得目标偏移量的确定不仅考虑了待渲染数据自身的偏移量，还考虑了目标事件所带来的偏移量，提高了调整后的初始单元格的确定精度，从而精准确定出需要渲染在预设可视区域中的数据，提高了页面渲染的精度。

在一个可选的实施例中，在上述步骤S19中，上述根据上述目标偏移量和上述第一起止位置，确定上述调整后的待渲染数据中的多个初始单元格各自对应的调整后的初始单元格，可以包括：

在多个初始单元格各自对应的第一起止位置的基础上增加或减小目标偏移量，从而得到多个初始单元格各自对应的调整后的初始单元格。

在一个可选的实施例中，上述预设位置控制信息包括横向控制信息，上述第一偏移量包括第一横向偏移量，上述第二偏移量包括第二横向偏移量，上述根据调整后的待渲染数据的第一偏移量和目标事件的第二偏移量，确定所述调整后的待渲染数据的目标偏移量，可以包括：

比较上述第一横向偏移量与上述第二横向偏移量。

在上述第一横向偏移量小于或等于上述第二横向偏移量的情况下，将上述第一横向偏移量与上述第二横向偏移量的差值作为上述目标横向偏移量。

具体地，第一横向偏移量可以用offset.x表示，第二横向偏移量可以用deltaX表示，若offset.x小于或等于deltaX，则将offset.x与deltaX的差值作为该目标横向偏移量，若offset.x大于deltaX，则将目标横向偏移量设置为0。

本公开实施例，通过上述方式使得目标横向偏移量的确定不仅考虑了待渲染数据自身的偏移量，还考虑了目标事件所带来的偏移量，目标横向偏移量确定的精度较高，从而便于精准确定出需要渲染在预设可视区域中的数据，进一步提高了页面渲染的精度。

在一个可选的实施例中，上述预设位置控制信息包括纵向控制信息，上述第一偏移量包括第一纵向偏移量，上述第二偏移量包括第二纵向偏移量，上述目标偏移量包括目标纵向偏移量，上述根据调整后的待渲染数据的第一偏移量和目标事件的第二偏移量，确定所述调整后的待渲染数据的目标偏移量，可以包括：

比较上述第一纵向偏移量与上述第二纵向偏移量。

在上述第一纵向偏移量小于或等于上述第二纵向偏移量的情况下，将上述第一纵向偏移量与上述第二纵向偏移量的差值作为上述目标纵向偏移量。

具体地，第一纵向偏移量可以用offset.y表示，第二纵向偏移量可以用deltaY表示，若offset.y小于或等于deltaY，则将offset.y与deltaY的差值作为该目标纵向偏移量，若offset.y大于deltaY，则将目标纵向偏移量设置为0。

需要说明的是，在得到目标横向偏移量和目标纵向偏移量之后，可以将横向滚动块距离纵向滚动条的顶部距离设置为目标横向偏移量，将纵向滚动块距离纵向滚动块的左边的距离设置为目标纵向偏移量，并重复步骤S17-步骤S19。

本公开实施例，通过上述方式使得目标纵向偏移量的确定精度，不仅考虑了待渲染数据自身的偏移量，还考虑了目标事件所带来的偏移量，目标纵向偏移量确定的精度较高，从而便于精准确定出需要渲染在预设可视区域中的数据，进一步提高了页面渲染的精度。

图9是根据一示例性实施例示出的一种页面渲染装置框图。参照图9，该装置包括待渲染数据获取装置21，当前待渲染单元格确定模块23和渲染模块25。

待渲染数据获取装置21，被配置为执行获取目标页面对应的待渲染数据，上述待渲染数据包括多个子数据，上述多个子数据由多个初始单元格对上述待渲染数据进行划分得到。

当前待渲染单元格确定模块23，被配置为执行将上述多个初始单元格中，与上述目标页面中的预设可视区域具有重叠部分的初始单元格，作为当前待渲染单元格。

渲染模块25，被配置为执行根据上述当前待渲染单元格的尺寸信息、上述预设可视区域的尺寸信息和上述预设可视区域内的预设画布，在上述预设可视区域渲染上述当前待渲染单元格以及位于上述当前待渲染单元格中的子数据。

示例性地，上述当前待渲染单元格确定模块，包括：

比较单元，被配置为执行比较上述多个初始单元格各自对应的第一起止位置与上述预设可视区域的第二起止位置。

当前待渲染单元格确定单元，被配置为执行基于比较结果，确定与上述预设可视区域具有重叠部分的初始单元格，得到上述当前待渲染单元格。

示例性地，上述第一起止位置包括第一起点位置和第一终点位置，上述第二起止位置包括第二起点位置和第二终点位置，上述当前待渲染单元格确定单元，被配置为执行将第一终点位置位于上述第二起点位置的右下角区域，且第一起点位置位于上述第二终点位置的左上角区域的初始单元格，作为上述当前待渲染单元格。

示例性地，上述预设可视区域包括预设位置控制信息，上述预设位置控制信息用于调整上述待渲染数据相对于上述目标页面的位置信息，上述装置还包括：

调整模块，被配置为执行响应于基于上述预设位置控制信息触发的操作指令，调整上述待渲染数据的位置信息。

重新确定模块，被配置为执行将调整后的初始单元格中，与上述预设可视区域具有重叠部分的初始单元格，重新作为上述当前待渲染单元格；并重新执行上述根据上述当前待渲染单元格的尺寸信息、上述预设可视区域的尺寸信息和上述预设可视区域内的预设画布，在上述预设可视区域渲染上述当前待渲染单元格以及位于上述当前待渲染单元格中的子数据。

示例性地，上述装置还包括：

目标偏移量确定模块，被配置为执行根据调整后的待渲染数据的第一偏移量和目标事件的第二偏移量，确定上述调整后的待渲染数据的目标偏移量；上述目标事件表征沿预设方向调整上述待渲染数据所产生的事件。

初始单元格确定模块，被配置为根据上述目标偏移量和上述第一起止位置，确定上述调整后的待渲染数据中的多个初始单元格各自对应的调整后的初始单元格。

示例性地，上述预设位置控制信息包括横向控制信息，上述第一偏移量包括第一横向偏移量，上述第二偏移量包括第二横向偏移量，上述目标偏移量包括目标横向偏移量，上述目标偏移量确定模块，包括：

横向比较单元，被配置为执行比较上述第一横向偏移量与上述第二横向偏移量。

目标横向偏移量确定单元，被配置为执行在上述第一横向偏移量小于或等于上述第二横向偏移量的情况下，将上述第一横向偏移量与上述第二横向偏移量的差值作为上述目标横向偏移量。

示例性地，上述预设位置控制信息包括纵向控制信息，上述第一偏移量包括第一纵向偏移量，上述第二偏移量包括第二纵向偏移量，上述目标偏移量包括目标纵向偏移量，上述目标偏移量确定模块，包括：

纵向比较子单元，被配置为执行比较上述第一纵向偏移量与上述第二纵向偏移量。

目标纵向偏移量确定子单元，被配置为执行在上述第一纵向偏移量小于或等于上述第二纵向偏移量的情况下，将上述第一纵向偏移量与上述第二纵向偏移量的差值作为上述目标纵向偏移量。

示例性地，上述装置还包括：

第一尺寸信息确定模块，被配置为执行根据初始表格的行列数以及上述初始表格的行列的尺寸信息，确定上述待渲染数据所在的数据区域的尺寸信息，上述初始表格基于上述多个初始单元格生成。

第二尺寸信息确定模块，被配置为执行根据上述预设可视区域的尺寸信息和上述待渲染数据所在的数据区域的尺寸信息，确定上述预设位置控制信息的尺寸信息。

显示模块，被配置为执行基于上述预设位置控制信息的尺寸信息，在上述预设可视区域显示上述预设位置控制信息。

示例性地，上述当前待渲染单元格的数量为多个，上述渲染模块，包括：

当前表格行确定单元，被配置为执行将多个当前待渲染单元格各自在上述初始表格中的表格行，作为当前表格行。

尺寸位置确定单元，被配置为执行根据每一当前表格行中的当前待渲染单元格，在上述初始表格中的初始尺寸信息以及上述预设可视区域的尺寸信息，确定上述每一当前表格行中的当前待渲染单元格，在上述预设可视区域中的目标尺寸信息和目标位置。

表格页面渲染单元，被配置为执行根据上述目标尺寸信息和上述预设画布，在上述目标位置渲染上述每一当前表格行中的当前待渲染单元格，以及上述每一当前表格行中的当前待渲染单元格中的子数据。

示例性地，上述装置还包括创建上述预设可视区域的创建模块，上述创建模块，包括：画布尺寸信息确定单元，被配置为执行将上述预设可视区域的尺寸信息，作为上述预设画布的尺寸信息。

画布起止位置确定单元，被配置为执行将上述第二起止位置作为上述预设画布的起止位置。

创建单元，被配置为执行基于上述预设画布组件、上述预设画布组件的尺寸信息和上述预设画布的起止位置，在上述预设可视区域中创建上述预设画布。

关于上述实施例中的装置，其中各个模块执行操作的具体方式已经在有关该方法的实施例中进行了详细描述，此处将不做详细阐述说明

在示例性实施例中，还提供了一种电子设备，包括处理器；用于存储处理器可执行指令的存储器；其中，处理器被配置为执行存储器上所存放的指令时，实现上述实施例中任一页面渲染方法的步骤。

该电子设备可以是终端、服务器或者类似的运算装置，以该电子设备是服务器为例，图10是根据一示例性实施例示出的一种用于页面渲染的电子设备的框图，该电子设备30可因配置或性能不同而产生比较大的差异，可以包括一个或一个以上中央处理器(Central Processing Units，CPU)31(中央处理器31可以包括但不限于微处理器MCU或可编程逻辑器件FPGA等的处理装置)、用于存储数据的存储器33，一个或一个以上存储应用程序323或数据322的存储介质32(例如一个或一个以上海量存储设备)。其中，存储器33和存储介质32可以是短暂存储或持久存储。存储在存储介质32的程序可以包括一个或一个以上模块，每个模块可以包括对电子设备中的一系列指令操作。更进一步地，中央处理器31可以设置为与存储介质32通信，在电子设备30上执行存储介质32中的一系列指令操作。电子设备30还可以包括一个或一个以上电源36，一个或一个以上有线或无线网络接口35，一个或一个以上输入输出接口34，和/或，一个或一个以上操作系统321，例如Windows ServerTM，Mac OS XTM，UnixTM,LinuxTM，FreeBSDTM等等。

输入输出接口34可以用于经由一个网络接收或者发送数据。上述的网络具体实例可包括电子设备30的通信供应商提供的无线网络。在一个实例中，输入输出接口34包括一个网络适配器(Network Interface Controller，NIC)，其可通过基站与其他网络设备相连从而可与互联网进行通讯。在一个示例性实施例中，输入输出接口34可以为射频(RadioFrequency，RF)模块，其用于通过无线方式与互联网进行通讯。

本领域普通技术人员可以理解，图10所示的结构仅为示意，其并不对上述电子设备的结构造成限定。例如，电子设备30还可包括比图10中所示更多或者更少的组件，或者具有与图10所示不同的配置。

在示例性实施例中，还提供了一种计算机可读存储介质，当计算机可读存储介质中的指令由电子设备的处理器执行时，使得电子设备能够执行上述实施例中任一页面渲染方法的步骤。

在示例性实施例中，还提供了一种计算机程序产品，包括计算机程序，该计算机程序被处理器执行时实现上述任一种实施方式中提供的页面渲染方法。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，该计算机程序可存储于一非易失性计算机可读取存储介质中，该计算机程序在执行时，可包括如上述各方法的实施例的流程。其中，本公开所提供的各实施例中所使用的对存储器、存储、数据库或其它介质的任何引用，均可包括非易失性和/或易失性存储器。非易失性存储器可包括只读存储器(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.根据权利要求2所述的页面渲染方法，其特征在于，所述第一起止位置包括第一起点位置和第一终点位置，所述第二起止位置包括第二起点位置和第二终点位置，

所述基于比较结果，确定与所述预设可视区域具有重叠部分的初始单元格，得到所述当前待渲染单元格，包括：

将第一终点位置位于所述第二起点位置的右下角区域，且第一起点位置位于所述第二终点位置的左上角区域的初始单元格，作为所述当前待渲染单元格。

4.根据权利要求2所述的页面渲染方法，其特征在于，所述预设可视区域包括预设位置控制信息，所述预设位置控制信息用于调整所述待渲染数据相对于所述目标页面的位置信息，在所述预设可视区域渲染所述当前待渲染单元格以及位于所述当前待渲染单元格中的子数据之后，所述方法还包括：

响应于基于所述预设位置控制信息触发的操作指令，调整所述待渲染数据的位置信息；

将调整后的初始单元格中，与所述预设可视区域具有重叠部分的初始单元格，重新作为所述当前待渲染单元格；并重新执行所述根据所述当前待渲染单元格的尺寸信息、所述预设可视区域的尺寸信息和所述预设可视区域内的预设画布，在所述预设可视区域渲染所述当前待渲染单元格以及位于所述当前待渲染单元格中的子数据。

5.根据权利要求4所述的页面渲染方法，其特征在于，所述调整后的初始单元格的确定过程，包括：

根据调整后的待渲染数据的第一偏移量和目标事件的第二偏移量，确定所述调整后的待渲染数据的目标偏移量；所述目标事件表征沿预设方向调整所述待渲染数据所产生的事件；

根据所述目标偏移量和所述第一起止位置，确定所述调整后的待渲染数据中的多个初始单元格各自对应的调整后的初始单元格。

6.根据权利要求5所述的页面渲染方法，其特征在于，所述预设位置控制信息包括横向控制信息，所述第一偏移量包括第一横向偏移量，所述第二偏移量包括第二横向偏移量，所述目标偏移量包括目标横向偏移量，所述根据调整后的待渲染数据的第一偏移量和目标事件的第二偏移量，确定所述调整后的待渲染数据的目标偏移量，包括：

比较所述第一横向偏移量与所述第二横向偏移量；

在所述第一横向偏移量小于或等于所述第二横向偏移量的情况下，将所述第一横向偏移量与所述第二横向偏移量的差值作为所述目标横向偏移量。

7.根据权利要求5所述的页面渲染方法，其特征在于，所述预设位置控制信息包括纵向控制信息，所述第一偏移量包括第一纵向偏移量，所述第二偏移量包括第二纵向偏移量，所述目标偏移量包括目标纵向偏移量，所述根据调整后的待渲染数据的第一偏移量和目标事件的第二偏移量，确定所述调整后的待渲染数据的目标偏移量，包括：

比较所述第一纵向偏移量与所述第二纵向偏移量；

在所述第一纵向偏移量小于或等于所述第二纵向偏移量的情况下，将所述第一纵向偏移量与所述第二纵向偏移量的差值作为所述目标纵向偏移量。

8.一种页面渲染装置，其特征在于，包括：

待渲染数据获取装置，被配置为执行获取目标页面对应的待渲染数据，所述待渲染数据包括多个子数据，所述多个子数据由多个初始单元格对所述待渲染数据进行划分得到；

当前待渲染单元格确定模块，被配置为执行将所述多个初始单元格中，与所述目标页面中的预设可视区域具有重叠部分的初始单元格，作为当前待渲染单元格；

渲染模块，被配置为执行根据所述当前待渲染单元格的尺寸信息、所述预设可视区域的尺寸信息和所述预设可视区域内的预设画布，在所述预设可视区域渲染所述当前待渲染单元格以及位于所述当前待渲染单元格中的子数据。

9.一种电子设备，其特征在于，包括：

处理器；

用于存储所述处理器可执行指令的存储器；其中，所述处理器被配置为执行所述指令，以实现如权利要求1至7中任一项所述的页面渲染方法。

10.一种计算机可读存储介质，当所述计算机可读存储介质中的指令由电子设备的处理器执行时，使得电子设备执行如权利要求1至7中任一项所述的页面渲染方法。

Images