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

Abstract

本说明书公开了一种页面渲染方法、装置、存储介质及电子设备，本说明书实施例在将获取到的部分页面数据渲染在终端设备的界面中后，根据监测到的针对页面的滑动操作，预测出能够展示其他页面数据的页面位置以及需要预加载的页面数据，在页面滑动该页面位置时，对预加载的页面数据进行渲染，并释放已滑过的页面数据。此方法中，浏览器将完整的矩形树图进行分界面展示，一个界面中只展示所有页面数据中的部分页面数据，而不是将所有页面数据渲染于一个界面中，这样可以降低浏览器内存溢出的概率。

Description

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

技术领域

本说明书涉及页面渲染技术领域，尤其涉及一种页面渲染方法、装置、存储介质及电子设备。

背景技术

在一些展示数据的场景中，为了表示单个数据在总体中的占比以及各数据间占比大小的比较，可以通过矩形树图展示各数据。矩形树图中一个矩形大小可以是由一个数据占总体中的占比大小决定。

在展示矩形树图时，可以先确定出界面展示各数据时所需调用的组件，其中，组件具有交互功能。然后，根据每个数据在总体数据中的占比大小以及组件，以矩形图像的形式，对每个数据进行渲染，以在页面中展示出不同大小的矩形图像，从而展示矩形树图。

目前，在展示矩形树图时，可以将所有数据以矩形树图的展示方式渲染于一个界面中，但是，这样容易导致浏览器的内存溢出，从而无法正常展示矩形树图。

发明内容

本说明书实施例提供一种页面渲染方法、装置、存储介质及电子设备，以部分解决上述现有技术存在的问题。

本说明书实施例采用下述技术方案：

本说明书提供的一种页面渲染方法，包括：

获取页面数据；

将所述页面数据以矩形树图的展示方式进行渲染，以在终端设备的界面中展示所述页面数据；

根据监测到的用户针对展示所述页面数据的页面所执行的滑动操作，在所述页面中预测出能够向所述用户展示除所述页面数据以外的其他页面数据的页面位置；

根据所述页面位置，从所述其他页面数据中确定需要预加载的页面数据，作为目标数据；

对所述目标数据进行预加载，并监测到滑动至所述页面位置时，将预加载的所述目标数据进行渲染，以及对从所述页面中已滑过的已展示的页面数据进行释放。

可选地，获取页面数据，具体包括：

根据用户的查询需求，向服务器发送查询请求，以使所述服务器根据所述查询请求中携带的查询条件，确定出满足所述查询条件的所有页面数据，并将所有页面数据返回给终端设备；

接收所有页面数据，从所有页面数据中确定出部分页面数据，作为在所述终端设备的界面中展示的页面数据。

可选地，获取页面数据，具体包括：

根据用户的查询需求，向服务器发送查询请求，以使所述服务器根据所述查询请求中携带的查询条件，确定出满足所述查询条件的部分页面数据，并所述部分页面数据返回给终端设备；

接收所述部分页面数据，并将所述部分页面数据作为在所述终端设备的界面中展示的页面数据；

根据所述页面位置，从所述其他页面数据中确定需要预加载的页面数据，具体包括：

根据所述页面位置，确定出需要预加载的页面数据的数据起始位置；

基于所述数据起始位置，向服务器发送预加载请求，以使所述服务器基于所述预加载请求中携带的所述数据起始位置，从所有页面数据中除所述部分页面数据之外的其他页面数据中确定出需要预加载的页面数据，并将需要预加载的页面数据发送给所述终端设备。

可选地，根据监测到的用户针对展示所述页面数据的页面所执行的滑动操作，在所述页面中预测出能够向所述用户展示除所述页面数据以外的其他页面数据的页面位置，具体包括：

根据监测到的用户针对展示所述页面数据的页面所执行的滑动操作，确定所述页面中滑动条实时移动的距离；

根据所述滑动条实时移动的距离，确定出所述滑动条实时移动的移动速度和移动加速度；

根据所述移动速度、所述移动加速度以及所述距离，在所述页面中预测出能够向所述用户展示除所述页面数据以外的其他页面数据的页面位置。

可选地，根据所述移动速度、所述移动加速度以及所述距离，在所述页面中预测出能够向所述用户展示除所述页面数据以外的其他页面数据的页面位置，具体包括：

根据所述移动速度以及所述移动加速度，预测出从所述移动速度减速到预设移动速度时所述滑动条移动的距离，作为预测距离；所述预设移动速度用于表示人眼能够捕捉到图像的最大界面变换速度；

根据所述距离以及所述预测距离，确定出综合距离；

根据所述综合距离，确定出所述页面中能够向所述用户展示除所述页面数据以外的其他页面数据的页面位置。

可选地，根据所述页面位置，从所述其他页面数据中确定需要预加载的页面数据，具体包括：

根据所述页面数据以及界面面积，确定出所有页面数据以矩形树图的展示方式进行渲染时的完整矩形树图的总面积；

根据所述页面位置、所述页面中滑动条的总长度、界面面积以及所述总面积，从所述其他页面数据中确定需要预加载的页面数据。

可选地，根据所述页面位置、所述页面中滑动条的总长度、界面面积以及所述总面积，从所述其他页面数据中确定需要预加载的页面数据，具体包括：

确定每个页面数据在所有页面数据中的位置标识；

根据所述页面位置、所述页面中滑动条的总长度、界面面积以及所述总面积，从所述其他页面数据中确定需要预加载的页面数据对应的起始位置标识，并将所述起始位置标识对应的页面数据以及所述起始位置标识之后的页面数据作为需要预加载的页面数据。

本说明书提供的一种页面渲染装置，包括：

获取模块，用于获取页面数据；

渲染模块，用于将所述页面数据以矩形树图的展示方式进行渲染，以在终端设备的界面中展示所述页面数据；

预测模块，用于根据监测到的用户针对展示所述页面数据的页面所执行的滑动操作，在所述页面中预测出能够向所述用户展示除所述页面数据以外的其他页面数据的页面位置；

确定模块，用于根据所述页面位置，从所述其他页面数据中确定需要预加载的页面数据，作为目标数据；

预加载模块，用于对所述目标数据进行预加载，并监测到滑动至所述页面位置时，将预加载的所述目标数据进行渲染，以及对从所述页面中已滑过的已展示的页面数据进行释放。

可选地，所述获取模块，具体用于根据用户的查询需求，向服务器发送查询请求，以使所述服务器根据所述查询请求中携带的查询条件，确定出满足所述查询条件的所有页面数据，并将所有页面数据返回给终端设备；接收所有页面数据，从所有页面数据中确定出部分页面数据，作为在所述终端设备的界面中展示的页面数据。

可选地，所述获取模块，具体用于根据用户的查询需求，向服务器发送查询请求，以使所述服务器根据所述查询请求中携带的查询条件，确定出满足所述查询条件的部分页面数据，并所述部分页面数据返回给终端设备；接收所述部分页面数据，并将所述部分页面数据作为在所述终端设备的界面中展示的页面数据。

可选地，所述预测模块，具体用于根据监测到的用户针对展示所述页面数据的页面所执行的滑动操作，确定所述页面中滑动条实时移动的距离；根据所述滑动条实时移动的距离，确定出所述滑动条实时移动的移动速度和移动加速度；根据所述移动速度、所述移动加速度以及所述距离，在所述页面中预测出能够向所述用户展示除所述页面数据以外的其他页面数据的页面位置。

可选地，所述预测模块，具体用于根据所述移动速度以及所述移动加速度，预测出从所述移动速度减速到预设移动速度时所述滑动条移动的距离，作为预测距离；所述预设移动速度用于表示人眼能够捕捉到图像的最大界面变换速度；根据所述距离以及所述预测距离，确定出综合距离；根据所述综合距离，确定出所述页面中能够向所述用户展示除所述页面数据以外的其他页面数据的页面位置。

可选地，所述确定模块，具体用于根据所述页面数据以及界面面积，确定出所有页面数据以矩形树图的展示方式进行渲染时的完整矩形树图的总面积；根据所述页面位置、所述页面中滑动条的总长度、界面面积以及所述总面积，从所述其他页面数据中确定需要预加载的页面数据。

可选地，所述确定模块，具体用于确定每个页面数据在所有页面数据中的位置标识；根据所述页面位置、所述页面中滑动条的总长度、界面面积以及所述总面积，从所述其他页面数据中确定需要预加载的页面数据对应的起始位置标识，并将所述起始位置标识对应的页面数据以及所述起始位置标识之后的页面数据作为需要预加载的页面数据。

本说明书提供的一种计算机可读存储介质，所述存储介质存储有计算机程序，所述计算机程序被处理器执行时实现上述的页面渲染方法。

本说明书提供的一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现上述的页面渲染方法。

本说明书实施例采用的上述至少一个技术方案能够达到以下有益效果：

本说明书实施例中在将获取到的部分页面数据渲染在终端设备的界面中后，根据监测到的针对页面的滑动操作，预测出能够展示其他页面数据的页面位置以及需要预加载的页面数据，在页面滑动该页面位置时，对预加载的页面数据进行渲染，并释放已滑过的页面数据。在此方法中，浏览器将完整的矩形树图进行分界面展示，一个界面中只展示所有页面数据中的部分页面数据，而不是将所有页面数据渲染于一个界面中，这样可以降低浏览器内存溢出的概率。

附图说明

此处所说明的附图用来提供对本说明书的进一步理解，构成本说明书的一部分，本说明书的示意性实施例及其说明用于解释本说明书，并不构成对本说明书的不当限定。在附图中：

图1为现有技术提供的展示矩形树图的页面示意图；

图2为本说明书实施例提供的展示矩形树图的页面示意图；

图3为本说明书实施例提供的页面渲染方法的流程示意图；

图4为本说明书实施例提供的页面渲染装置结构示意图；

图5为本说明书实施例提供的电子设备的结构示意图。

具体实施方式

在渲染矩形树图的过程中，现有的方法是将用于表示矩形树图的所有数据渲染于一个界面中，界面中每个数据以矩形图像的形式进行展示。如图1所示。用户可以通过点击矩形，以查看某个矩形所展示的更加详细的数据。

若表示矩形树图的所有数据量比较大，在一个界面中以矩形图像渲染各数据，容易导致浏览器的内存溢出。甚至，在用户频繁点击各矩形来查看更加详细的数据的情况下，更加容易导致浏览器的内存溢出。

本说明书提供的页面渲染方法旨在将表示矩形树图的所有数据以分界面的方式，渲染于各界面中，这样每个界面只渲染所有数据中的部分数据。另外，对已经滑过的界面中已展示的数据进行内存释放，这样，可以提高每个界面渲染数据的速度以及流畅度。

在本说明书中，一个页面可以是由多个界面组成，可以通过页面中的滑动条滑动页面，以切换界面。如图2所示。在图2中，以横向页面滑动为例，页面下端设置有滑动条，以通过移动滑动条中的滑块来切换界面。

为使本说明书的目的、技术方案和优点更加清楚，下面将结合本说明书具体实施例及相应的附图对本说明书技术方案进行清楚、完整地描述。显然，所描述的实施例仅是本说明书一部分实施例，而不是全部的实施例。基于本说明书中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本说明书保护的范围。

以下结合附图，详细说明本说明书各实施例提供的技术方案。

图3为本说明书实施例提供的页面渲染方法的流程示意图，该页面渲染方法可以适用于用户使用的终端设备，终端设备可以是浏览器，包括：

S300：获取页面数据。

本说明书主要涉及对页面中待展示的数据进行预加载，在预加载时，浏览器可以先从服务器获取所有需要渲染的数据，再对获取到的所有数据进行分界面渲染。浏览器还可以一直与服务器进行通信，响应于用户针对页面的滑动操作，每次从服务器获取部分数据，并将每次获取的部分数据分别渲染于不同的界面中。

具体的，终端设备可以根据用户的查询需求，向服务器发送查询请求。服务器可以根据查询请求中携带的查询条件，确定出满足查询条件的页面数据，并将页面数据返回给终端设备。其中，查询条件中可以包括有：查询范围、用于指示获取查询范围内所有页面数据的第一指示信息或用于指示获取查询范围内所有页面数据中的部分页面数据的第二指示信息。第二指示信息可以表示部分页面数据的数据起始位置和部分页面数据的数据结束位置，数据起始位置对应着部分页面数据的起始位置标识，数据结束位置对应着部分页面数据的结束位置标识。

基于上述的两种预加载的方式，浏览器在获取页面数据时也可以通过两种方法获取数据。其中，页面数据可以是指用于渲染页面的数据。

第一种方式：先直接获取所有页面数据，再从所有页面数据中确定出部分数据渲染于一个界面中。

终端设备可以根据用户的查询需求，向服务器发送查询请求。服务器可以根据查询请求中携带的查询条件，确定出满足查询条件的所有页面数据，并将所有页面数据返回给终端设备。其中，查询条件包括有用于指示获取查询范围内所有页面数据的第一指示信息。终端设备可以接收服务器返回的所有页面数据，并保存。然后，终端设备从所有页面数据中确定出部分页面数据，作为在终端设备的界面中展示的页面数据。其中，所有页面数据可以渲染出完整的矩形树图，所有页面数据中的一个页面数据对应一个矩形图像。

以查询每种病的患病人数为例，查询条件中的查询范围为每种病，每种病的患病人数为所有页面数据，一种病的患病人数为所有页面数据中的一个页面数据。

第二种方式：从服务器获取所有页面数据中的部分页面数据。

终端设备可以根据用户的查询需求，向服务器发送查询请求。服务器可以根据查询请求中携带的查询条件，确定出满足查询条件的部分页面数据，并将部分页面数据返回给终端设备。终端设备接收部分页面数据，并将接收到的部分页面数据作为在终端设备的界面中展示的页面数据。其中，查询条件包含有用于指示获取查询范围内所有页面数据中的部分页面数据的第二指示信息。

在第一种方式和第二种方式中，从所有页面数据中确定出部分页面数据的方法可以包括：

若在终端设备的首个界面中展示部分页面数据，终端设备或服务器可以先对所有页面数据进行排序，并确定每个页面数据的位置标识。其中，可以将所有页面数据按照从大到小的顺序进行排序。然后，终端设备或服务器可以从所有页面数据中依次选择出预设数量的页面数据，并将选择出的页面数据作为在终端设备的首个界面中展示的页面数据。

若在终端设备的后续界面中展示部分页面数据，终端设备在确定出所有页面数据中每个页面数据的位置标识之后，可以根据上一时刻所展示的页面数据的起始位置标识以及页面中滑动条滑动的距离，确定出下一时刻所需展示的页面数据的起始位置标识。之后，可以根据页面中首个界面所展示的页面数据以及确定出的起始位置标识，确定出下一时刻所需展示的页面数据的结束位置标识。

当终端设备中保存有所有页面数据的情况下，终端设备可以从所有页面数据中确定出起始位置标识与结束位置标识之间的页面数据，作为在终端设备的下一时刻的界面中所需展示的页面数据。

当终端设备中未保存有所有页面数据的情况下，终端设备可以向服务器发送数据获取请求，服务器根据数据获取请求中携带的起始位置标识和结束位置标识，从所有页面数据中确定出起始位置标识与结束位置标识之间的页面数据，并将起始位置标识与结束位置标识之间的页面数据发送给终端设备。终端设备将接收到的页面数据作为在终端设备的下一时刻的界面中所需展示的页面数据。

在确定起始位置标识和结束位置标识之间的页面数据时，可以基于起始位置标识和结束位置标识，改变头尾指针，以确定出起始位置标识和结束位置标识之间的页面数据。其中，头指针用于指向在同一界面中需要渲染的页面数据的起始位置标识，尾指针用于指向在同一界面页面中需要渲染的页面数据的结束位置标识。当页面进行滑动时，头指针和尾指针也发生相应的变化。

或者，直接从所有页面数据中查找出起始位置标识和结束位置标识之间的页面数据。

以查询每种病的患病人数为例，一种病的患病人数为一个页面数据，一个页面数据表示一个数值，即，人数。若页面中首个界面所展示的各页面数据的总和为100，则后续每个界面中所展示的各页面数据的总和也为100。针对下一时刻所需展示的页面数据的结束位置标识，在确定出起始位置标识之后，可以将起始位置标识之后的每个页面数据进行累加，直到累加和与首个界面所展示的各页面数据的总和相同为止，以确定出下一时刻所需展示的页面数据的结束位置标识。

S302：将所述页面数据以矩形树图的展示方式进行渲染，以在终端设备的界面中展示所述页面数据。

在本说明书实施例中，在获取到所有页面数据中的部分页面数据之后，可以将获取到的部分页面数据以矩形树图的展示方式进行渲染，以在终端设备的界面中展示页面数据。

在终端设备的界面中渲染页面数据时，针对任意一个界面，可以根据每个页面数据占需要渲染于该界面的各页面数据的比例以及界面面积，确定出每个页面数据渲染于该界面时所展示的矩形图像的面积。然后，可以根据每个页面数据渲染于该界面时所展示的矩形图像的面积，在该界面中进行渲染，以在终端设备的该界面中展示页面数据。其中，针对每个页面数据，该页面数据占各页面数据的比例等于该页面数据对应的矩形图像的面积占界面面积的比例。针对每个界面，每个界面的界面面积相同。

S304：根据监测到的用户针对展示所述页面数据的页面所执行的滑动操作，在所述页面中预测出能够向所述用户展示除所述页面数据以外的其他页面数据的页面位置。

在本说明书实施例中，在将部分页面数据渲染于终端设备的界面之后，终端设备可以实时监测页面中的滑动条是否发生移动。若滑动条发生移动且滑动速度较快，可以对页面滑动后的界面中能够向用户展示的页面数据进行预加载。其中，预加载可以用于提前预测出未来需要在页面中渲染的页面数据。

具体的，终端设备可以监测用户针对展示有部分页面数据的页面所执行的滑动操作，其中，用户可以移动页面中的滑动条来滑动页面。然后，可以根据监测到的用户针对展示部分页面数据的页面所执行的滑动操作，在页面中预测出能够向用户展示除部分页面数据以外的其他页面数据的页面位置。其中，能够向用户展示除部分页面数据以外的其他页面数据的页面位置可以指人眼能够捕捉到图像的页面位置或滑动条停止移动时的页面位置。另外，预测出的页面位置可以是指需要预加载页面数据的页面位置。

在终端设备监测到滑动条发生移动的情况下，可以根据监测到的用户针对展示部分页面数据的页面所执行的滑动操作，确定出页面中滑动条实时移动的距离。然后，可以根据滑动条实时移动的距离，确定出滑动条实时移动的移动速度和移动加速度。其中，滑动条实时移动的移动速度和移动加速度可以表示页面滑动的速度和加速度。最后，可以基于滑动条实时移动的移动速度和移动加速度，判断是否对页面数据进行预加载。

若移动速度不大于预设移动速度，说明人眼能够捕捉到页面中的图像内容。若移动速度大于预设移动速度，说明人眼无法捕捉到页面中的图像内容。其中，预设移动速度用于表示人眼能够捕捉到图像的最大界面变换速度。因此，在移动速度不大于预设移动速度的情况下，可以对滑动的页面进行动态渲染，无需预加载。在移动速度大于预设移动速度的情况下，无需此期间的页面进行渲染，但是需要对当移动速度减速到预设移动速度时的界面所展示的页面数据进行预加载，以使用户能够看到处于预设移动速度时的页面中的图像内容。也就是，当滑动条实时移动的移动速度大于预设移动速度且滑动条实时移动的移动加速度小于零时，需要对一些页面数据进行预加载。

若终端设备确定出的滑动条实时移动的移动速度大于预设移动速度且滑动条实时移动的移动加速度小于零（即，在需要对一些页面数据进行预加载的情况下），终端设备可以根据滑动条实时移动的移动速度、滑动条实时移动的移动加速度以及滑动条实时移动的距离，在页面中预测出能够向用户展示除部分页面数据以外的其他页面数据的页面位置。其中，滑动条实时移动的移动速度可以是移动加速度首次小于零时的速度，滑动条实时移动的移动加速度可以是首次小于零时的加速度。

具体的，可以根据滑动条实时移动的移动速度以及滑动条实时移动的移动加速度，预测出从该移动速度减速到预设移动速度时滑动条移动的距离，作为预测距离。然后，可以根据滑动条实时移动的距离以及预测距离，确定出综合距离。综合距离表示页面的滑动速度处于预设移动速度之前，滑动条所移动的距离。最后，可以根据综合距离，确定出页面中能够向用户展示除部分页面数据以外的其他页面数据的页面位置，即，综合距离可以表示页面位置。其中，随着时间的延长，滑动条实时移动的移动加速度递减或不变。另外，能够向用户展示除部分页面数据以外的其他页面数据的页面位置可以指人眼刚刚能够捕捉到图像的页面位置。

其中，计算预测距离的公式为：

。/>

表示预测距离，/>

表示预设移动速度，/>

表示滑动条实时移动的速度，/>

表示滑动条实时移动的移动加速度，

小于零。

其中，可以将滑动条实时移动的距离与预测距离进行求和，得到综合距离。即，公式为：

。/>

表示滑动条实时移动的距离。

此外，除了在滑动条实时移动的移动速度刚刚减速到预设移动速度的情况下，预测出能够向用户展示除部分页面数据以外的其他页面数据的页面位置之外，还可以在滑动条实时移动的移动速度减速到零的情况下，预测出能够向用户展示除部分页面数据以外的其他页面数据的页面位置。也就是，预测在滑动条停止移动时能够向用户展示除部分页面数据以外的其他页面数据的页面位置。

在预测页面位置时，可以根据滑动条实时移动的移动速度以及滑动条实时移动的移动加速度，预测出从该移动速度减速到零时滑动条移动的距离，作为估计距离。然后，可以根据滑动条实时移动的距离以及估计距离，确定出总距离。最后，可以根据总距离，确定出页面中能够向用户展示除部分页面数据以外的其他页面数据的页面位置。其中，能够向用户展示除部分页面数据以外的其他页面数据的页面位置可以指滑动条停止时的页面位置。

S306：根据所述页面位置，从所述其他页面数据中确定需要预加载的页面数据，作为目标数据。

在本说明书实施例中，在确定出页面中能够向用户展示除部分页面数据以外的其他页面数据的页面位置之后，可以在除部分页面数据之外的其他页面数据中确定出需要预加载的页面数据，作为目标数据。

在第一种方式下，终端设备可以先确定预先保存所有页面数据，然后，可以根据页面位置，从除部分页面数据之外的其他页面数据中确定出需要预加载的页面数据，作为目标数据。

在第二种方式下，终端设备可以根据页面位置，确定出需要预加载的页面数据对应的数据起始位置。然后，基于需要预加载的页面数据对应的数据起始位置，向服务器发送预加载请求。服务器基于预加载请求中携带的数据起始位置，从服务器保存的查询范围内所有页面数据中除部分页面数据之外的其他页面数据中确定出需要预加载的页面数据，并将需要预加载的页面数据发送给终端设备。

针对第一种方式，根据页面位置，从所有页面数据中除部分页面数据之外的其他页面数据中确定出需要预加载的页面数据的方法可以包括：

终端设备或服务器可以根据部分页面数据以及界面面积，确定出所有页面数据以矩形树图的展示方式进行渲染时的完整矩形树图的总面积。然后，可以根据页面位置、页面中滑动条的总长度、界面面积以及完整矩形树图的总面积，从其他页面数据中确定需要预加载的页面数据。

进一步，终端设备或服务器可以根据页面位置、页面中滑动条的总长度、界面面积以及完整矩形树图的总面积，从其他页面数据中确定需要预加载的页面数据对应的起始位置标识，并在预先保存的所有页面数据中将起始位置标识对应的页面数据以及起始位置标识之后的页面数据作为需要预加载的页面数据。其中，需要预加载的页面数据对应的起始位置标识可以表示需要预加载的页面数据对应的数据起始位置。

其中，计算需要预加载的页面数据对应的起始位置标识的公式为：

。/>

表示起始位置标识。/>

表示所有页面数据的数据量。/>

表示在减速到预设移动速度之前页面渲染的各页面数据对应的矩形图像的总面积。/>

表示所有页面数据对应的矩形图像的总面积，即，完整矩形树图的总矩形面积。/>

表示预测距离，/>

表示滑动条实时移动的距离，/>

表示综合距离，/>

表示滑动条的总长度，/>

表示界面面积。

针对第二种方式，根据页面位置，确定出需要预加载的页面数据对应的数据起始位置的方法可以包括：

终端设备可以根据部分页面数据以及界面面积，确定出所有页面数据以矩形树图的展示方式进行渲染时的完整矩形树图的总面积。然后，可以根据页面位置、页面中滑动条的总长度、界面面积以及完整矩形树图的总面积，从其他页面数据中确定需要预加载的页面数据对应的起始位置标识。

然后，基于起始位置标识，向服务器发送预加载请求。服务器基于预加载请求中携带的起始位置标识，从所有页面数据中除部分页面数据之外的其他页面数据中所有页面数据中将起始位置标识对应的页面数据以及起始位置标识之后的页面数据作为需要预加载的页面数据，并将需要预加载的页面数据发送给终端设备。

S308：对所述目标数据进行预加载，并监测到滑动至所述页面位置时，将预加载的所述目标数据进行渲染，以及对所述页面中已滑过的已展示的页面数据进行释放。

在本说明书实施例中，在确定出目标数据之后，终端设备可以对目标数据进行预加载，当监测到页面滑动至该页面位置时，可以将预加载的目标数据在终端设备的界面中进行渲染。

需要说明的是，在页面滑动过程中，可以将页面中已滑过的界面中已展示的页面数据进行释放或，以免已展示的页面数据占用内存。

需要说明的是，本申请中所有获取信号、信息或数据的动作都是在遵照所在地国家相应的数据保护法规政策的前提下，并获得由相应装置所有者给予授权的情况下进行的。

通过上述图3所示的方法可见，本说明书在将获取到的部分页面数据渲染在终端设备的界面中后，根据监测到的针对页面的滑动操作，预测出能够展示其他页面数据的页面位置以及需要预加载的页面数据，在页面滑动该页面位置时，对预加载的页面数据进行渲染，并释放已滑过的页面数据。在此方法中，浏览器将完整的矩形树图进行分界面展示，一个界面中只展示所有页面数据中的部分页面数据，而不是将所有页面数据渲染于一个界面中，这样可以降低浏览器内存溢出的概率。

在步骤S306中，对

的推导如下：

因为第一个界面中渲染的各页面数据的数值与所有页面数据的总数值、第一个界面的界面面积存在关联，所以，所有页面数据对应的矩形树图的总矩形面积与第一个界面的界面面积存在关联。

以横向滑动页面为例，在界面面积固定以及界面高度固定的情况下，矩形树图的总矩形面积只与矩形树图的总长度有关，而矩形树图的总长度与界面长度有关。因此：

。/>

表示矩形树图的总长度，/>

表示界面长度。

同样的，当界面高度固定时，

。/>

表示所有页面数据中位于x位置标识前的所有页面数据对应的矩形图像的面积总和在界面高度固定的情况下的长度。

在滑动页面时，是通过拖动滑动条来实现的，因此，滑动条的总长度与矩形树图的总长度之间是存在比例关系的，即，

。基于这个比例关系，可以得出x位置标识前矩形树图的长度满足以下关系：/>

。由于第一个界面中滑动条移动的距离为零，因此需要加上第一个界面的界面长度。而/>

是由两部分组成：

。/>

表示滑动条实时移动的距离，/>

表示预测出的在从滑动条实时移动的移动速度减速到预设移动速度过程中，滑动条移动的距离。其中，

。/>

可以小于零。

将上述的公式代入

，/>

。

以上为本说明书实施例提供的页面渲染方法，基于同样的思路，本说明书还提供了相应的装置、存储介质和电子设备。

图4为本说明书实施例提供的一种页面渲染装置的结构示意图，所述装置包括：

获取模块401，用于获取页面数据；

渲染模块402，用于将所述页面数据以矩形树图的展示方式进行渲染，以在终端设备的界面中展示所述页面数据；

预测模块403，用于根据监测到的用户针对展示所述页面数据的页面所执行的滑动操作，在所述页面中预测出能够向所述用户展示除所述页面数据以外的其他页面数据的页面位置；

确定模块404，用于根据所述页面位置，从所述其他页面数据中确定需要预加载的页面数据，作为目标数据；

预加载模块405，用于对所述目标数据进行预加载，并监测到滑动至所述页面位置时，将预加载的所述目标数据进行渲染，以及对从所述页面中已滑过的已展示的页面数据进行释放。

可选地，所述获取模块401具体用于，根据用户的查询需求，向服务器发送查询请求，以使所述服务器根据所述查询请求中携带的查询条件，确定出满足所述查询条件的所有页面数据，并将所有页面数据返回给终端设备；接收所有页面数据，从所有页面数据中确定出部分页面数据，作为在所述终端设备的界面中展示的页面数据。

可选地，所述获取模块401具体用于，根据用户的查询需求，向服务器发送查询请求，以使所述服务器根据所述查询请求中携带的查询条件，确定出满足所述查询条件的部分页面数据，并所述部分页面数据返回给终端设备；接收所述部分页面数据，并将所述部分页面数据作为在所述终端设备的界面中展示的页面数据。

可选地，所述预测模块403具体用于，根据监测到的用户针对展示所述页面数据的页面所执行的滑动操作，确定所述页面中滑动条实时移动的距离；根据所述滑动条实时移动的距离，确定出所述滑动条实时移动的移动速度和移动加速度；根据所述移动速度、所述移动加速度以及所述距离，在所述页面中预测出能够向所述用户展示除所述页面数据以外的其他页面数据的页面位置。

可选地，所述预测模块403具体用于，根据所述移动速度以及所述移动加速度，预测出从所述移动速度减速到所述预设移动速度时所述滑动条移动的距离，作为预测距离；所述预设移动速度用于表示人眼能够捕捉到图像的最大界面变换速度；根据所述距离以及所述预测距离，确定出综合距离；根据所述综合距离，确定出所述页面中能够向所述用户展示除所述页面数据以外的其他页面数据的页面位置。

可选地，所述确定模块404具体用于，根据所述页面数据以及界面面积，确定出所有页面数据以矩形树图的展示方式进行渲染时的完整矩形树图的总面积；根据所述页面位置、所述页面中滑动条的总长度、界面面积以及所述总面积，从所述其他页面数据中确定需要预加载的页面数据。

可选地，所述确定模块404具体用于，确定每个页面数据在所有页面数据中的位置标识；根据所述页面位置、所述页面中滑动条的总长度、界面面积以及所述总面积，从所述其他页面数据中确定需要预加载的页面数据对应的起始位置标识，并将所述起始位置标识对应的页面数据以及所述起始位置标识之后的页面数据作为需要预加载的页面数据。

可选地，所述确定模块404具体用于，根据所述页面位置，确定出需要预加载的页面数据的数据起始位置；基于所述数据起始位置，向服务器发送预加载请求，以使所述服务器基于所述预加载请求中携带的所述数据起始位置，从所有页面数据中除所述部分页面数据之外的其他页面数据中确定出需要预加载的页面数据，并将需要预加载的页面数据发送给所述终端设备。

本说明书还提供了一种计算机可读存储介质，所述存储介质存储有计算机程序，所述计算机程序被处理器执行时可用于执行上述图3提供的页面渲染方法。

基于图3所示的页面渲染方法，本说明书实施例还提供了图5所示的电子设备的结构示意图。如图5，在硬件层面，该电子设备包括处理器、内部总线、网络接口、内存以及非易失性存储器，当然还可能包括其他业务所需要的硬件。处理器从非易失性存储器中读取对应的计算机程序到内存中然后运行，以实现上述图3所述的页面渲染方法。

当然，除了软件实现方式之外，本说明书并不排除其他实现方式，比如逻辑器件抑或软硬件结合的方式等等，也就是说以下处理流程的执行主体并不限定于各个逻辑单元，也可以是硬件或逻辑器件。

在20世纪90年代，对于一个技术的改进可以很明显地区分是硬件上的改进（例如，对二极管、晶体管、开关等电路结构的改进）还是软件上的改进（对于方法流程的改进）。然而，随着技术的发展，当今的很多方法流程的改进已经可以视为硬件电路结构的直接改进。设计人员几乎都通过将改进的方法流程编程到硬件电路中来得到相应的硬件电路结构。因此，不能说一个方法流程的改进就不能用硬件实体模块来实现。例如，可编程逻辑器件（Programmable Logic Device, PLD）（例如现场可编程门阵列（Field Programmable GateArray，FPGA））就是这样一种集成电路，其逻辑功能由用户对器件编程来确定。由设计人员自行编程来把一个数字系统“集成”在一片PLD上，而不需要请芯片制造厂商来设计和制作专用的集成电路芯片。而且，如今，取代手工地制作集成电路芯片，这种编程也多半改用“逻辑编译器（logic compiler）”软件来实现，它与程序开发撰写时所用的软件编译器相类似，而要编译之前的原始代码也得用特定的编程语言来撰写，此称之为硬件描述语言（Hardware Description Language，HDL），而HDL也并非仅有一种，而是有许多种，如ABEL（Advanced Boolean Expression Language）、AHDL（Altera Hardware DescriptionLanguage）、Confluence、CUPL（Cornell University Programming Language）、HDCal、JHDL（Java Hardware Description Language）、Lava、Lola、MyHDL、PALASM、RHDL（RubyHardware Description Language）等，目前最普遍使用的是VHDL（Very-High-SpeedIntegrated Circuit Hardware Description Language）与Verilog。本领域技术人员也应该清楚，只需要将方法流程用上述几种硬件描述语言稍作逻辑编程并编程到集成电路中，就可以很容易得到实现该逻辑方法流程的硬件电路。

控制器可以按任何适当的方式实现，例如，控制器可以采取例如微处理器或处理器以及存储可由该（微）处理器执行的计算机可读程序代码（例如软件或固件）的计算机可读介质、逻辑门、开关、专用集成电路（Application Specific Integrated Circuit，ASIC）、可编程逻辑控制器和嵌入微控制器的形式，控制器的例子包括但不限于以下微控制器：ARC 625D、Atmel AT91SAM、Microchip PIC18F26K20 以及Silicone Labs C8051F320，存储器控制器还可以被实现为存储器的控制逻辑的一部分。本领域技术人员也知道，除了以纯计算机可读程序代码方式实现控制器以外，完全可以通过将方法步骤进行逻辑编程来使得控制器以逻辑门、开关、专用集成电路、可编程逻辑控制器和嵌入微控制器等的形式来实现相同功能。因此这种控制器可以被认为是一种硬件部件，而对其内包括的用于实现各种功能的装置也可以视为硬件部件内的结构。或者甚至，可以将用于实现各种功能的装置视为既可以是实现方法的软件模块又可以是硬件部件内的结构。

上述实施例阐明的系统、装置、模块或单元，具体可以由计算机芯片或实体实现，或者由具有某种功能的产品来实现。一种典型的实现设备为计算机。具体的，计算机例如可以为个人计算机、膝上型计算机、蜂窝电话、相机电话、智能电话、个人数字助理、媒体播放器、导航设备、电子邮件设备、游戏控制台、平板计算机、可穿戴设备或者这些设备中的任何设备的组合。

为了描述的方便，描述以上装置时以功能分为各种单元分别描述。当然，在实施本说明书时可以把各单元的功能在同一个或多个软件和/或硬件中实现。

本领域内的技术人员应明白，本说明书的实施例可提供为方法、系统、或计算机程序产品。因此，本说明书可采用完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本说明书可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质（包括但不限于磁盘存储器、CD-ROM、光学存储器等）上实施的计算机程序产品的形式。

本说明书是参照根据本说明书实施例的方法、设备（系统）、和计算机程序产品的流程图和／或方框图来描述的。应理解可由计算机程序指令实现流程图和／或方框图中的每一流程和／或方框、以及流程图和／或方框图中的流程和／或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和／或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和／或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和／或方框图一个方框或多个方框中指定的功能的步骤。

在一个典型的配置中，计算设备包括一个或多个处理器(CPU)、输入/输出接口、网络接口和内存。

内存可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)。内存是计算机可读介质的示例。

计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括暂存电脑可读媒体(transitory media)，如调制的数据信号和载波。

还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、商品或者设备中还存在另外的相同要素。

本领域技术人员应明白，本说明书的实施例可提供为方法、系统或计算机程序产品。因此，本说明书可采用完全软件实施例或结合软件和硬件方面的实施例的形式。而且，本说明书可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质（包括但不限于磁盘存储器、CD-ROM、光学存储器等）上实施的计算机程序产品的形式。

本说明书可以在由计算机执行的计算机可执行指令的一般上下文中描述，例如程序模块。一般地，程序模块包括执行特定任务或实现特定抽象数据类型的例程、程序、对象、组件、数据结构等等。也可以在分布式计算环境中实践本说明书，在这些分布式计算环境中，由通过通信网络而被连接的远程处理设备来执行任务。在分布式计算环境中，程序模块可以位于包括存储设备在内的本地和远程计算机存储介质中。

本说明书中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于系统实施例而言，由于其基本相似于方法实施例，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

以上所述仅为本说明书的实施例而已，并不用于限制本说明书。对于本领域技术人员来说，本说明书可以有各种更改和变化。凡在本说明书的精神和原理之内所作的任何修改、等同替换、改进等，均应包含在本说明书的权利要求范围之内。

Claims (14)

1.一种页面渲染方法，其特征在于，包括：

获取页面数据；

将所述页面数据以矩形树图的展示方式进行渲染，以在终端设备的界面中展示所述页面数据；

根据监测到的用户针对展示所述页面数据的页面所执行的滑动操作，确定所述页面中滑动条实时移动的距离；根据所述滑动条实时移动的距离，确定出所述滑动条实时移动的移动速度和移动加速度；根据所述移动速度、所述移动加速度以及所述距离，在所述页面中预测出能够向所述用户展示除所述页面数据以外的其他页面数据的页面位置；

根据所述页面位置，从所述其他页面数据中确定需要预加载的页面数据，作为目标数据；

对所述目标数据进行预加载，并监测到滑动至所述页面位置时，将预加载的所述目标数据进行渲染，以及对从所述页面中已滑过的已展示的页面数据进行释放。

2.如权利要求1所述的方法，其特征在于，获取页面数据，具体包括：

根据用户的查询需求，向服务器发送查询请求，以使所述服务器根据所述查询请求中携带的查询条件，确定出满足所述查询条件的所有页面数据，并将所有页面数据返回给终端设备；

接收所有页面数据，从所有页面数据中确定出部分页面数据，作为在所述终端设备的界面中展示的页面数据。

3.如权利要求1所述的方法，其特征在于，获取页面数据，具体包括：

根据用户的查询需求，向服务器发送查询请求，以使所述服务器根据所述查询请求中携带的查询条件，确定出满足所述查询条件的部分页面数据，并所述部分页面数据返回给终端设备；

接收所述部分页面数据，并将所述部分页面数据作为在所述终端设备的界面中展示的页面数据；

根据所述页面位置，从所述其他页面数据中确定需要预加载的页面数据，具体包括：

根据所述页面位置，确定出需要预加载的页面数据的数据起始位置；

基于所述数据起始位置，向服务器发送预加载请求，以使所述服务器基于所述预加载请求中携带的所述数据起始位置，从所有页面数据中除所述部分页面数据之外的其他页面数据中确定出需要预加载的页面数据，并将需要预加载的页面数据发送给所述终端设备。

4.如权利要求1所述的方法，其特征在于，根据所述移动速度、所述移动加速度以及所述距离，在所述页面中预测出能够向所述用户展示除所述页面数据以外的其他页面数据的页面位置，具体包括：

根据所述移动速度以及所述移动加速度，预测出从所述移动速度减速到预设移动速度时所述滑动条移动的距离，作为预测距离；所述预设移动速度用于表示人眼能够捕捉到图像的最大界面变换速度；

根据所述距离以及所述预测距离，确定出综合距离；

根据所述综合距离，确定出所述页面中能够向所述用户展示除所述页面数据以外的其他页面数据的页面位置。

5.如权利要求1所述的方法，其特征在于，根据所述页面位置，从所述其他页面数据中确定需要预加载的页面数据，具体包括：

根据所述页面数据以及界面面积，确定出所有页面数据以矩形树图的展示方式进行渲染时的完整矩形树图的总面积；

根据所述页面位置、所述页面中滑动条的总长度、界面面积以及所述总面积，从所述其他页面数据中确定需要预加载的页面数据。

6.如权利要求5所述的方法，其特征在于，根据所述页面位置、所述页面中滑动条的总长度、界面面积以及所述总面积，从所述其他页面数据中确定需要预加载的页面数据，具体包括：

确定每个页面数据在所有页面数据中的位置标识；

根据所述页面位置、所述页面中滑动条的总长度、界面面积以及所述总面积，从所述其他页面数据中确定需要预加载的页面数据对应的起始位置标识，并将所述起始位置标识对应的页面数据以及所述起始位置标识之后的页面数据作为需要预加载的页面数据。

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

获取模块，用于获取页面数据；

渲染模块，用于将所述页面数据以矩形树图的展示方式进行渲染，以在终端设备的界面中展示所述页面数据；

预测模块，用于根据监测到的用户针对展示所述页面数据的页面所执行的滑动操作，确定所述页面中滑动条实时移动的距离；根据所述滑动条实时移动的距离，确定出所述滑动条实时移动的移动速度和移动加速度；根据所述移动速度、所述移动加速度以及所述距离，在所述页面中预测出能够向所述用户展示除所述页面数据以外的其他页面数据的页面位置；

确定模块，用于根据所述页面位置，从所述其他页面数据中确定需要预加载的页面数据，作为目标数据；

预加载模块，用于对所述目标数据进行预加载，并监测到滑动至所述页面位置时，将预加载的所述目标数据进行渲染，以及对从所述页面中已滑过的已展示的页面数据进行释放。

8.如权利要求7所述的装置，其特征在于，所述获取模块，具体用于根据用户的查询需求，向服务器发送查询请求，以使所述服务器根据所述查询请求中携带的查询条件，确定出满足所述查询条件的所有页面数据，并将所有页面数据返回给终端设备；接收所有页面数据，从所有页面数据中确定出部分页面数据，作为在所述终端设备的界面中展示的页面数据。

9.如权利要求7所述的装置，其特征在于，所述获取模块，具体用于根据用户的查询需求，向服务器发送查询请求，以使所述服务器根据所述查询请求中携带的查询条件，确定出满足所述查询条件的部分页面数据，并所述部分页面数据返回给终端设备；接收所述部分页面数据，并将所述部分页面数据作为在所述终端设备的界面中展示的页面数据。

10.如权利要求7所述的装置，其特征在于，所述预测模块，具体用于根据所述移动速度以及所述移动加速度，预测出从所述移动速度减速到预设移动速度时所述滑动条移动的距离，作为预测距离；所述预设移动速度用于表示人眼能够捕捉到图像的最大界面变换速度；根据所述距离以及所述预测距离，确定出综合距离；根据所述综合距离，确定出所述页面中能够向所述用户展示除所述页面数据以外的其他页面数据的页面位置。

11.如权利要求7所述的装置，其特征在于，所述确定模块，具体用于根据所述页面数据以及界面面积，确定出所有页面数据以矩形树图的展示方式进行渲染时的完整矩形树图的总面积；根据所述页面位置、所述页面中滑动条的总长度、界面面积以及所述总面积，从所述其他页面数据中确定需要预加载的页面数据。

12.如权利要求11所述的装置，其特征在于，所述确定模块，具体用于确定每个页面数据在所有页面数据中的位置标识；根据所述页面位置、所述页面中滑动条的总长度、界面面积以及所述总面积，从所述其他页面数据中确定需要预加载的页面数据对应的起始位置标识，并将所述起始位置标识对应的页面数据以及所述起始位置标识之后的页面数据作为需要预加载的页面数据。

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

14.一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述程序时实现上述权利要求1-6任一项所述的方法。

Images