CN110221889A - 一种页面展示方法、装置、电子设备及存储介质 - Google Patents

Abstract

本公开实施例中提供的页面展示方法，属于计算机技术领域，有助于改善现有技术中在页面展示效率低下的问题。本公开实施例提供的页面展示方法包括：确定目标页面中包括的各控件在目标位图中的展示逻辑信息树；确定所述目标页面中的当前待展示区域；根据所述展示逻辑信息树中存储的控件的渲染信息和尺寸信息绘制所述当前待展示区域对应的位图；在屏幕中，根据所述展示逻辑信息树中存储的所述控件的位置信息和层级信息展示所述当前待展示区域对应的位图。本公开实施例提供的页面展示方法仅绘制屏幕显示区域内的页面区域对应的视图，而不是绘制整个目标页面的视图，减少了更新屏幕展示内容时视图生成的运算量，提升了页面的展示性能。

Description

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

技术领域

本公开涉及计算机技术领域，特别是涉及一种页面展示方法、装置、电子设备及存储介质。

背景技术

前端界面的展示方案效率不仅影响用户的体验，更影响软件产品的运行效率。现有技术中，通常通过操作系统的视图系统(View System)实现前端界面的布局和渲染。前端界面展示的传统技术方案为：通过调用操作系统提供的提供的UI(User Interface)控件绘制/布局线程，采用控件添加、拼接等形式进行排列组合，构建前端界面的视图树，然后，由操作系统的主线程根据视图树中的渲染信息绘制前端界面，并进行展示。

现有技术中，在构建前端界面的视图树时，会将某一前端界面中包含的全部控件进行布局和渲染，即对于包括多屏显示内容的前端界面，在展示该前端界面的某一屏显示内容时，已经完成了多屏显示内容对应的界面的布局和渲染。由此可见，现有技术中，至少存在一下缺陷：第一，由于构建前端界面的视图树时处理了多屏显示内容的布局和渲染，会导致该前端界面加载时间延长；第二，在主线程构建视图树时，大量的UI控件操作导致硬件负担过重，在构建复杂前端界面的视图上存在效率和性能瓶颈。

可见，现有技术中的页面展示方法至少存在展示性能低下的缺陷。

发明内容

本公开实施例提供一种页面展示方法，有助于提升页面展示性能，本公开实施例提供了一种页面展示方法，包括：

确定目标页面中包括的各控件在目标位图中的展示逻辑信息树，其中，所述目标位图为展示所述目标页面的位图，所述展示逻辑信息树按照所述目标页面中包括的控件的展示逻辑，采用树形结构存储相应控件的控件信息，所述控件信息包括所述相应控件的渲染信息、位置信息、尺寸信息和层级信息；

确定所述目标页面中的当前待展示区域；

根据所述展示逻辑信息树中存储的控件的渲染信息和尺寸信息绘制所述当前待展示区域对应的位图；

在屏幕中，根据所述展示逻辑信息树中存储的所述控件的位置信息和层级信息展示所述当前待展示区域对应的位图。

第二方面，本公开实施例提供了一种页面展示装置，包括：

展示逻辑信息树确定模块，用于确定目标页面中包括的各控件在目标位图中的展示逻辑信息树，其中，所述目标位图为展示所述目标页面的位图，所述展示逻辑信息树按照所述目标页面中包括的控件的展示逻辑，采用树形结构存储相应控件的控件信息，所述控件信息包括所述相应控件的渲染信息、位置信息、尺寸信息和层级信息；

当前待展示区域确定模块，用于确定所述目标页面中的当前待展示区域；

当前待展示区域位图绘制模块，用于根据所述展示逻辑信息树中存储的控件的渲染信息和尺寸信息绘制所述当前待展示区域对应的位图；

位图展示模块，用于在屏幕中，根据所述展示逻辑信息树中存储的所述控件的位置信息和层级信息展示所述当前待展示区域对应的位图。

第三方面，本公开实施例还提供了一种电子设备，包括存储器、处理器及存储在所述存储器上并可在处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现本公开实施例所述的页面展示方法。

第四方面，本公开实施例提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时本公开实施例中所述的页面展示方法的步骤。

本公开实施例提供了一种页面展示方法，通过确定目标页面中包括的各控件在目标位图中的展示逻辑信息树，其中，所述目标位图为展示所述目标页面的位图，所述展示逻辑信息树按照所述目标页面中包括的控件的展示逻辑，采用树形结构存储相应控件的控件信息，所述控件信息包括所述相应控件的渲染信息、位置信息、尺寸信息和层级信息；确定所述目标页面中的当前待展示区域；根据所述展示逻辑信息树中存储的控件的渲染信息和尺寸信息绘制所述当前待展示区域对应的位图；在屏幕中，根据所述展示逻辑信息树中存储的所述控件的位置信息和层级信息展示所述当前待展示区域对应的位图，有助于提升页面展示性能。

附图说明

为了更清楚地说明本公开实施例的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本公开的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。

图1是本公开实施例一的页面展示方法流程图；

图2是本公开实施例一的目标页面展示示意图之一；

图3是本公开实施例一的目标页面展示示意图之二；

图4是本公开实施例二的页面展示装置的结构示意图之一；

图5是本公开实施例二的页面展示装置的结构示意图之二。

具体实施方式

下面将结合本公开实施例中的附图，对本公开实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本公开一部分实施例，而不是全部的实施例。基于本公开中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本公开保护的范围。

实施例一

本公开实施例提供的一种页面展示方法，如图1所示，该方法包括：步骤100至步骤130。

步骤100，确定目标页面中包括的各控件在目标位图中的展示逻辑信息树。

其中，所述目标位图为展示所述目标页面的位图，所述展示逻辑信息树按照所述目标页面中包括的控件的展示逻辑，采用树形结构存储相应控件的控件信息，所述控件信息包括所述相应控件的渲染信息、位置信息、尺寸信息和层级信息。

本公开的实施例中，在进行页面展示之前，首先需要确定目标页面的排版信息，以绘制目标页面各区域的位图。本公开的实施例中，目标页面的排版信息以展示逻辑信息树的形式存储。所述确定目标页面中包括的各控件在目标位图中的展示逻辑信息树的步骤，包括：获取所述目标页面的业务模型数据；对所述业务模型数据进行解析，确定所述目标页面中包括的控件和各所述控件的至少部分控件信息；按照所述至少部分控件信息和所述目标页面的预设布局信息，对所述目标页面中包括的各所述控件进行布局处理，确定各所述控件的控件信息，其中，所述控件信息包括：在所述目标页面中位置信息、尺寸信息、层级信息、渲染信息；按照各所述控件在展示所述目标页面的目标位图中的展示逻辑，采用树形结构存储各所述控件的控件信息，生成所述目标页面的展示逻辑信息树。

以移动终端的用户界面展示为例，当用户打开某个应用时，移动终端需要刷新展示用户界面，在此过程中，首先需要获取待展示的目标页面中包括的各业务模型的数据。本公开实施例中所述的业务模型的数据指待展示的目标页面各区域对应的业务模型的数据。其中，业务模型可以对应功能模块、不同应用软件等。

在本公开的一些实施例中，移动终端的客户端在检测到需要刷新展示用户界面后，通过主线程构建每个业务模型的请求参数，并创建与每个业务模型对应的数据请求任务，然后，由网络线程执行所述数据请求任务，向服务器获取用户界面中包括的各业务模型的数据。其中，数据请求任务携带相应业务模型的请求参数，例如：业务模型的数据访问地址。然后，由网络线程执行所述数据请求任务。

在本公开的一些实施例中，所述网络线程可以为主线程。在本公开的另一些实施例中，所述网络线程为主线程的异步线程，网络线程可以通过网络线程队列获取数据请求任务，并依次执行各数据请求任务。在本公开的又一些实施例中，还可以通过共享内存或其他线程间通信的方式，实现主线程和异步线程之间的数据通信，获取数据请求任务。

在本公开的一些实施例中，所述数据请求任务根据携带的相应业务模型的请求参数，访问后台服务器，以获取该业务模型的数据。

之后，对所述业务模型数据进行解析，确定所述目标页面中包括的控件和各所述控件的至少部分控件信息。

通常，业务模型中与页面展示相关的页面信息是以结构化语言描述的。本公开的一些实施例中，可以通过异步的预排版线程对包括结构化语言描述的页面信息，调用预设的布局引擎进行界面布局，将结构化语言描述的的页面信息解析成可被渲染引擎直接处理的，包含布局信息、层级信息、渲染信息、事件响应方法等控件信息的数据结构。在本公开的一些实施例中，可以通过从结构化语言描述的页面信息中从前向后遍历各关键字，通过预设的关键字字典确定从结构化语言描述的页面信息中包括的控件，并进一步解析通过预设关键字标识的相应控件的控件信息(如：图标文件名称、列宽度、事件响应方法等)。

进一步的，根据该目标页面的预设布局信息(如页面尺寸、列表项高度等)，结合通过结构化语言描述的页面信息获取的控件信息，确定该目标页面中包括的每个控件的具体控件信息，如控件的布局信息(包括位置信息、尺寸信息、层级信息等)、渲染信息(如背景色、展示的字体字号、透明度、边框等控件视觉属性)、事件响应方法(如控件如何响应对应的控件事件，如点击事件等)。

然后，按照各所述控件在所述目标页面中的位置从上至下，由左到右的顺序，依序记录各所述控件的控件信息，生成描述所述目标态页面中各控件的展示逻辑的信息树。具体实施时，可以采用结构化语言描述展示逻辑信息树；也可以采用预设的数据结构存储各控件信息。

现有技术中，逻辑视图树为渲染、布局视图所需的必要数据结构，即为渲染引擎的输入。渲染引擎可根据逻辑视图树，了解各控件的布局、层级及渲染信息，确定如何绘制各控件。由于现有技术中使用系统的ViewSystem绘制视图，逻辑视图树与渲染视图树完全一致，视图树即为构成视图的所有子视图物理控件集合，为系统ViewSystem的上层操作接口封装，按照控件的层级隶属关系存储，系统ViewSystem可直接渲染视图树。而本公开实施例中，由于目标页面的展示区域完全采用调用系统绘制接口实现位图绘制，因此并不存在渲染视图树这一物理结构，本公开实施例中的展示逻辑信息树为虚拟的“视图树”，本质上是内存中的控件信息的树形结构，包含了位置、尺寸、层级、渲染信息、事件响应方法等信息，并不包含任何控件。异步渲染引擎可根据展示逻辑信息树绘制出视图(即一张位图)。如果绘制一个展示目标页面的位图，则所述展示逻辑信息树中的信息为该位图中展示的各控件的在该位图中的位置、尺寸、层级、渲染信息、事件响应方法等信息。基于此，本公开具体实施时，可以对目标页面进行局部绘制。

排版完成后，排版线程发送排版完成信息至主线程，主线程可以开始展示目标页面。

步骤110，确定所述目标页面中的当前待展示区域。

本公开实施例中所述的当前待展示区域指所述目标页面中接下来要在屏幕中展示的页面区域。所述当前待展示区域的尺寸与用于展示所述目标页面的屏幕区域尺寸匹配。

在本公开的一些实施例中，所述目标页面通常包括多屏显示内容。当所述目标页面显示在设备的屏幕中之后，用户可以通过滑动操作，切换当前屏显示的内容，以浏览所述目标页面的不同区域。为了便于读者理解本方案，本公开的实施例中，以图2所示的目标页面举例，详细说明本公开提供的页面展示方法的具体技术方案。在本公开的其他实施例中，所述目标页面还可以包括纵向分布的多屏显示内容，或者，既包括纵向分布的多屏显示内容，又包括横向分布的多屏显示内容。

切换应用程序、切换应用程序的页面、移动屏幕中展示的页面都会导致屏幕内的展示内容发生变化，本公开的实施例中，将发生变化后展示在屏幕中的内容对应的页面区域作为所述目标页面的当前待展示区域。通常，屏幕内目标页面的当前待展示区域，由具体应用或操作系统根据用户操作或默认设置确定。例如，对于一个应用的目标页面，可以设置首次加载的屏幕内容为所述目标页面的固定区域的内容；也可以设置首次加载的屏幕内容为所述应用所缓存的所述目标页面的内容(如上一次浏览该目标页面时最后展示的所述目标页面的区域)。在用户通过在屏幕上执行滑动手势或者通过触发翻页按键等操作移动屏幕中展示的目标页面时，根据用户操作确定所述目标页面的当前待展示区域。例如，根据用户的滑动操作的方向和速度，以及所述目标页面的尺寸，确定所述目标页面的当前待展示区域；或者，根据用户触发的按键、对该按键的触发次数，以及所述目标页面对应屏幕展示区域的内容分屏设置信息，确定所述目标页面的当前待展示区域。

在本公开的其他实施例中，还可以采用其他方法，确定屏幕内目标页面的当前待展示区域。本公开的实施例对确定屏幕内目标页面的当前待展示区域具体技术手段不作限定。本公开的实施例对确定当前待展示区域的尺寸信息和位置信息的具体技术手段不作限定。

本公开实施例中，所述目标页面的当前待展示区域(如图2中的区域210)的尺寸大于等于所述屏幕中用于展示所述目标页面的屏幕区域的尺寸。本公开实施例中所述的位置为所述当前待展示区域相对于所述目标页面的位置。以图2所示的目标页面举例，当前待展示区域210的位置可以通过相对位置坐标表示，例如，表示为(0，0)。

步骤120，根据所述展示逻辑信息树中存储的控件的渲染信息和尺寸信息绘制所述当前待展示区域对应的位图。

在确定了所述当前待展示区域的尺寸信息和位置信息之后，接下来需要绘制所述待展示区域对应的位图。本公开实施例中，根据所述展示逻辑信息树中存储的控件的渲染信息和尺寸信息绘制所述当前待展示区域对应的位图的步骤包括：根据所述当前待展示区域的尺寸信息和位置信息、所述展示逻辑信息树中的控件信息和所述目标页面的已经绘制完成的区域对应的位图，绘制所述当前待展示区域对应的位图。以首次加载并展示目标页面举例，此时没有缓存已经绘制完成的所述目标页面的任何区域，因此，只能根据所述当前待展示区域的尺寸信息和位置信息和所述展示逻辑信息树中的控件信息，绘制所述当前待展示区域对应的位图。而当目标页面不是首次被展示，即目标页面的部分区域已经被展示过的情况下，优选的，根据所述当前待展示区域的尺寸信息和位置信息、所述展示逻辑信息树中的控件信息，以及缓存的位图信息，绘制所述当前待展示区域对应的位图。采用分区域增量绘制的方式绘制所述待展示区域对应的位图，以提升页面展示效率。具体而言，对于已经完成绘制的目标页面的区域将缓存该区域对应的位图，在后续执行绘制任务的过程中，如果需要重复绘制已经完成绘制的区域，则直接从缓存的位图中读取相应区域的位图数据，节省重复绘制带来的资源浪费，并提升绘制效率。

本公开的一些实施例中，所述根据所述当前待展示区域的尺寸信息和位置信息、所述展示逻辑信息树中的控件信息和所述目标页面的已经绘制完成的区域对应的位图，绘制所述当前待展示区域对应的位图，包括：根据所述当前待展示区域的尺寸信息和位置信息，确定所述当前待展示区域中的目标区域，所述目标区域为包含在所述目标页面的已经绘制完成的区域中的区域；若所述当前待展示区域中包括所述目标区域，则根据所述展示逻辑信息树中的控件信息绘制所述当前待展示区域中所述目标区域之外的区域对应的位图；根据缓存的所述目标区域对应的位图、绘制的所述目标区域之外的区域对应的位图，生成所述当前待展示区域对应的位图。

在终端执行本方法进行页面展示的过程中，首先需要根据所述当前待展示区域的尺寸信息和位置信息，确定所述当前待展示区域中的目标区域，所述目标区域为包含在所述目标页面的已经绘制完成的区域中的区域。例如，对于绘制任务已经绘制完成的区域，可以通过该区域对应的位置信息和尺寸信息对该区域进行标识，当需要确定所述当前待展示区域中是否包括所述目标页面的所述目标页面的已经绘制完成的部分或全部区域时，可以通过比较由所述位置信息和尺寸信息确定的举行区域的重合关系确定目标区域。

当所述根据所述当前待展示区域的尺寸信息和位置信息、所述展示逻辑信息树中的控件信息和所述目标页面的已经绘制完成的区域对应的位图，绘制所述当前待展示区域对应的位图的步骤，包括：若所述当前待展示区域中不包括所述目标区域，则根据所述展示逻辑信息树中的控件信息绘制所述当前待展示区域对应的位图。

举例而言,在首次加载所述目标页面的时候，所述目标页面的任何区域都没有完成绘制，因此，没有缓存的所述目标页面的任何区域对应的位图，需要基于所述目标页面的展示逻辑信息树中的控件信息(即所述展示逻辑信息树中存储的控件的渲染信息和尺寸信息等排版信息)绘制所述待展示区域对应的位图。

本公开的一些实施例中，根据所述展示逻辑信息树中的控件信息绘制所述当前待展示区域对应的位图的步骤，包括：根据所述展示逻辑信息树中的控件信息确定所述待展示区域中包括的业务模型及所述业务模型的界面绘制信息；根据所述界面绘制信息绘制所述当前待展示区域的位图。

所述绘制任务根据当前待展示区域的位置信息和尺寸信息和所述展示逻辑信息树中的控件信息(即所述目标页面的排版信息)，确定当前待展示区域中包括的业务模型及所述业务模型的界面绘制信息，并根据所述界面绘制信息调用系统提供的绘制接口，将所述当前待展示区域绘制成一张位图。

例如，主线程在确定所述目标页面的当前待展示区域之后，将所述当前待展示区域的位置信息和尺寸信息生成绘制任务，并将生成的绘制任务发送至异步绘制线程对应的绘制任务队列。异步绘制线程执行所述绘制任务队列中的绘制任务，将所述当前待展示区域绘制成一张位图。并将所述当前待展示区域对应的位图发送给主线程，以通知主线程所述当前待展示区域绘制完成。

在本公开的一些实施例中，业务模型的绘制过程是有多个控件的绘制过程组成的，控件必须整体进行绘制。在本公开的一些实施例中，所述当前待展示区域中可能包括某个控件的一部分，在这种情况下，需要首先绘制完整的控件，然后再对绘制得到的位图进行裁剪。相应的，根据所述展示逻辑信息树中的控件信息绘制所述当前待展示区域对应的位图的步骤，包括：根据所述展示逻辑信息树中的控件信息确定所述待展示区域中包括的业务模型；根据所述业务模型中包括的控件的控件信息绘制所述当前待展示区域对应的第一扩展位图；根据所述当前待展示区域的位置信息和尺寸信息对所述第一扩展位图进行裁剪，得到所述当前待展示区域对应的位图。根据所述业务模型的排版信息绘制所述待展示区域对应的第一扩展位图是通过调用系统的绘制接口实现的。根据所述当前待展示区域的位置信息和尺寸信息对所述第一扩展位图进行裁剪，得到所述当前待展示区域对应的位的具体实施方式可以采用现有技术，本公开实施例中不再赘述。

本公开实施例中，在根据所述展示逻辑信息树中的控件信息绘制所述当前待展示区域对应的位图之后，所述方法还包括：缓存绘制的所述位图，即缓存根据所述展示逻辑信息树中的控件信息绘制所述当前待展示区域对应的位图。例如，所述异步绘制线程将绘制完成的位图数据缓存到设备的磁盘中，并通过所述当前待展示区域的位置信息和尺寸信息标识所述位图。

所述当前待展示区域的位置信息和尺寸信息与该当前待展示区域对应的位图所展示的所述目标页面的区域位置和尺寸是对应的，因此，可以通过位置信息和尺寸信息标识缓存的位图。如图2中的210，可以通过位置信息和尺寸信息(0,0,480，640)来标识。在本公开的其他实施例中，还可以采用其他方式标识缓存的位图，本公开对此不作限定，本公开实施中也不再一一例举。

在本公开的一些实施例中，缓存的位图，可以以位图集合的形式存储在中磁盘中，也可以将各位图按照其对应的位置信息和尺寸信息拼接成一张位图后存储。

当用户通过滑动手势或触发按键移动屏幕中展示的目标页面时，如用户通过在屏幕上执行向左的滑动手势向左移动目标页面时，屏幕中当前展示的目标页面的内容(如图2中的区域210)将向左移动并逐渐移到屏幕之外，而屏幕外的区域(如图2中的区域220)将向左移动并逐渐移到屏幕以内。终端需要根据用户滑动手势的速度和距离确定屏幕中所述目标页面的当前待展示区域，并更新屏幕中展示的目标页面区域。

通常，终端按照预设频率更新屏幕中展示的页面内容，使得人眼看到的屏幕中展示的页面内容是平滑移动的。下面以终端更新展示如图3中所示的目标页面内容为例，说明绘制所述当前待展示区域对应的位图的具体技术方案。有图3可见，当前待展示区域310中包括一部分已经绘制完成的页面内容(如区域3101中的页面内容)，和一部分尚未绘制过的页面内容(如区域3102中的页面内容)。

相应的，在本公开的一些优选实施例中，在计算设备执行本方法进行页面展示的过程中，将会根据所述当前待展示区域的尺寸信息和位置信息确定所述当前待展示区域中的目标区域，进一步的，终端将根据所述展示逻辑信息树中的控件信息绘制所述当前待展示区域中所述目标区域之外的区域对应的位图，并根据缓存的所述目标区域对应的位图、绘制的所述目标区域之外的区域对应的位图，生成所述当前待展示区域对应的位图。

当终端在确定了屏幕中所述目标页面的当前待展示区域之后，根据所述当前待展示区域的位置信息和尺寸信息生成绘制任务，所述绘制任务中携带待绘制区域(即当前待展示区域)的位置信息和尺寸信息，并发送至绘制任务队列。异步绘制线程在获取到绘制任务之后，根据需要绘制的当前待展示区域的位置信息和尺寸信息，以及，磁盘中缓存的所述目标页面的已经绘制完成的区域的位图，确定所述待绘制区域中在执行其他绘制任务时已经绘制完成的区域作为目标区域，如图3中的3101。

在本公开的一些实施例中，通过将待展示区域的位置信息和尺寸信息确定的矩形区域与标识终端缓存的各位图的位置信息和尺寸信息确定的矩形区域进行比较，可以确定所述当前待显示区域中已经绘制完成的区域。例如，图3中的当前待展示区域的位置为(240，0)，尺寸为480*640，而已经绘制完成的所述目标页面的区域的位置为(0，0),尺寸为480*640,即磁盘上缓存了(0，0,480,640)标识的位图，经过比对可以确定图3中的当前待展示区域中位置(240，0),尺寸为240*640的区域已经绘制完成，则确定位置(240，0),尺寸为240*640的区域为目标区域。

在本公开的一些实施例中，根据所述展示逻辑信息树中的控件信息绘制所述当前待展示区域中所述目标区域之外的区域对应的位图的步骤，包括：根据所述展示逻辑信息树中的控件信息确定所述当前待展示区域中所述目标区域之外的当前待展示区域包括的业务模型及所述业务模型的界面绘制信息；根据所述界面绘制信息绘制所述目标区域之外的当前待展示区域对应的位图。

对于当前待展示区域中除所述目标区域(如图3中的3101)之外的当前待展示区域(如图3中的区域3102)，绘制任务将根据该区域(如图3中的区域3102)的尺寸、位置，和展示逻辑信息树中的控件信息，确定所述目标区域之外的待展示区域(如图3中的3102)包括的业务模型及业务模型的界面绘制信息，并根据所述界面绘制信息调用系统提供的绘制接口，将所述该区域绘制成一张位图。具体到图3所示的当前待展示区域，绘制任务将绘制图3中的区域3102对应的位图。绘制目标区域之外的当前待展示区域的具体技术方案参见前述绘制当前待展示区域的技术方案，此处不再赘述。

业务模型的绘制过程是有多个控件的绘制过程组成的，控件必须整体进行绘制。在本公开的一些实施例中，所述目标区域之外的当前待展示区域中可能包括某个控件的一部分，在这种情况下，需要首先绘制完整的控件，然后再对绘制得到的图片进行裁剪。相应的，根据所述展示逻辑信息树中的控件信息绘制所述当前待展示区域中所述目标区域之外的区域对应的位图的步骤，包括：根据所述展示逻辑信息树中的控件信息确定所述当前待展示区域中所述目标区域之外的区域包括的业务模型及所述业务模型的界面绘制信息；根据所述界面绘制信息绘制所述目标区域之外的所述区域对应的第二扩展位图；根据所述目标区域之外的所述区域的位置信息和尺寸信息对所述第二扩展位图进行裁剪，得到所述目标区域之外的所述区域对应的位图。根据所述业务模型的界面绘制信息绘制所述当前待展示区域对应的第二扩展位图是通过调用系统的绘制接口实现的。对所述第二扩展位图进行裁剪的具体实施方式可以采用现有技术，本公开实施例中不再赘述。

在绘制完成当前待展示区域中除所述目标区域之外的区域(如图3中的3102)对应的位图之后，终端会缓存绘制完成的所述待展示区域中除所述目标区域之外的区域(如图3中的3102)对应的位图，并以该区域(如图3中的3102)的位置信息和尺寸信息标识所述位图。

进一步的，在绘制完成当前待展示区域中除所述目标区域之外的区域(如图3中的3102)对应的位图之后，所述异步绘制线程将绘制完成的当前待展示区域中除所述目标区域之外的区域(如图3中的3102)对应的位图和所述目标区域(如图3中的3101)对应的位图进行拼接，就可以得到当前待展示区域310对应的位图。

其中，目标区域(如图3中的3101)对应的位图可以从终端缓存的位图集合中获取。具体到本实施例而言，在首次加载目标页面时，已经绘制了图2中的区域210对应的位图，并缓存在终端的磁盘中，以(0，0，480，640)标识。而图2中的区域210对应图3中的3103和3101，图3中的3101的位置为(240，0)，尺寸为(240，320)，通过对位置信息结合尺寸信息进行比对，可以确定图3中的区域3101对应的区域210的部分位图。

本公开实施例中，在根据所述展示逻辑信息树中的控件信息绘制所述当前待展示区域中所述目标区域之外的区域对应的位图之后，所述方法还包括：缓存绘制的所述位图，即缓存根据所述展示逻辑信息树中的控件信息绘制的所述当前待展示区域中所述目标区域之外的区域对应的位图。例如，所述异步绘制线程将绘制完成的位图数据(如前述区域3102对应的位图)缓存到设备的磁盘中，并通过所述当前待展示区域的位置和尺寸标识所述位图。通常，当异步绘制线程完成一个绘制任务之后会主动释放其占用的绘制资源。

本公开实施例在绘制当前待展示区域对应的位图时，通过增量绘制的方式，可以有效的节省终端的资源，提升页面的展示效率。具体而言，仅绘制所述当前待展示区域中未绘制完成的区域(即磁盘中没有缓存该区域的位图数据)，而对于所述当前待展示区域中已经绘制完成的部分区域(即磁盘中已经缓存有位图数据的区域)，不再重新绘制，直接获取缓存的该部分区域的位图数据，最后，由缓存的位图数据和绘制的位图数据共同拼接成当前待展示区对应的位图。

本公开的一些实施例中，所述缓存绘制的所述位图的步骤，还包括：对绘制的所述位图和当前已经缓存的位图进行拼接处理，根据拼接处理结果更新当前已经缓存的位图。其中，绘制的所述位图包括：根据所述展示逻辑信息树中的控件信息绘制的所述当前待展示区域中所述目标区域之外的区域对应的位图，或，根据所述展示逻辑信息树中的控件信息绘制的所述当前待展示区域对应的位图。

本公开的一些实施例中，缓存的位图可以以位图集合的形式存储，每个位图通过该位图对应的所述目标页面中的区域的位置信息和尺寸信息进行标识。然而，随着所述目标页面中绘制完成的区域逐渐增多，位图集合将越来越大，占用的存储资源会越来越多。因此，本公开的一些优选实施例中，异步绘制线程在完成当前待展示区域中需要绘制的部分的位图绘制工作之后，会进一步根据绘制的位图对应的所述目标页面中的区域,将绘制得到的位图数据和终端当前已经缓存的位图数据进行合并，将相邻区域对应的位图数据合并，得到一个较大的位图。若绘制的所述当前待展示区域与现有缓存的位图对应的区域不连续，无法进行位图数据合并，则将绘制的所述当前待展示区域的位图插入至缓存的位图集合。

通过把相邻的小位图合并成更大的位图，从而缩减位图集合中位图元素的数量，可以减少对终端存储空间的占用。由于确定当前待展示区域中的目标区域时，需要将当前待展示区域和缓存的位图数据逐一进行比对，因此，通过对缓存的位图进行合并，还可以进一步减少比对次数，提升确定目标区域的效率。

步骤130，在屏幕中，根据所述展示逻辑信息树中存储的所述控件的位置信息和层级信息展示所述当前待展示区域对应的位图。

在绘制完所述当前待展示区域对应的位图之后，在所述屏幕区域内展示所述当前待展示区域对应的位图。

在本公开的一些实施例中，当当前待展示区域对应的位图绘制完成之后，主线程会接收到异步绘制线程发送的绘制完成消息和所述当前待展示区域对应的位图。由所述主线程负责将所述当前待展示区域对应的位图渲染到终端的屏幕中。在本公开的一些实施例中，所述当前待展示区域可能为部分屏幕区域，也可能为全部屏幕区域；所述当前待展示区域显示的位图可能为显示在顶层的弹窗图片，也可能为背景图片。因此，在展示绘制的所述位图时，需要根据所述展示逻辑信息树中存储的所述控件的位置信息(即所述位图中包括的控件的位置信息)确定所述位图在屏幕中的展示位置，然后，进一步根据所述控件的层级信息在相应图层上的前述展示位置展示所述当前待展示区域对应的位图。

另一方面，所述主线程将所述当前待展示区域对应的位图渲染到终端的屏幕中时，需要占用系统的内存、CPU(中央处理器，Central Processing Unit)和GPU(图形处理器，Graphics Processing Unit)的等展示资源。因此，对于已经移出屏幕之外的目标页面所占用的展示资源需要及时回收，以提升终端的资源利用效率。在本公开的一些实施例中，所述方法还包括：确定移出所述屏幕的所述目标页面的已展示区域为待回收区域；回收所述待回收区域占用的展示资源。例如，主线程可以创建一个视图回收队列，并在根据用户执行的移动目标页面的操作确定所述目标页面的当前待展示区域时，同时确定移出所述屏幕的所述目标页面的已展示区域为待回收区域。所述主线程将确定的待回收区域发送至视图回收队列，通过视图回收线程对所述视图回收队列中的待回收区域占用的资源进行回收。

在本公开的一些实施例中，在确定所述目标页面中的当前待展示区域之后，还包括：确定移出所述屏幕之外的页面区域；回收所述页面区域对应的绘制资源。例如，主线程可以创建一个视图回收队列，并在根据用户执行的移动目标页面的操作确定所述目标页面的当前待展示区域时，同时确定移出所述屏幕的所述目标页面的页面区域(所述页面区域可能已经展示、也可能未被展示)。所述主线程将确定的移出屏幕之外的页面区域发送至视图回收队列，通过视图回收线程对所述视图回收队列中的页面区域占用的绘制资源进行回收。例如，若所述页面区域未启动绘制，则视图回收线程直接删除所述页面区域对应的绘制任务，回收绘制资源。

本公开实施例提供的页面展示方法，通过确定目标页面中包括的各控件在目标位图中的展示逻辑信息树，其中，所述目标位图为展示所述目标页面的位图，所述展示逻辑信息树按照所述目标页面中包括的控件的展示逻辑，采用树形结构存储相应控件的控件信息，所述控件信息包括所述相应控件的渲染信息、位置信息、尺寸信息和层级信息；确定所述目标页面中的当前待展示区域；根据所述展示逻辑信息树中存储的控件的渲染信息和尺寸信息绘制所述当前待展示区域对应的位图；在屏幕中，根据所述展示逻辑信息树中存储的所述控件的位置信息和层级信息展示所述当前待展示区域对应的位图，有助于提升页面展示性能。本公开实施例提供的页面展示方法仅绘制屏幕显示区域内的页面区域对应的视图，而不是绘制整个目标页面的视图，减少了更新屏幕展示内容时视图生成的运算量，提升了页面的展示性能。

另一方面，本公开实施例提供的页面展示方法通过将当前待展示区域绘制成一幅位图进行展示，在绘制位图的过程中仅需要调用少量通用的系统图形处理接口，使得本公开实施例提供的页面展示方法在由不同的硬件平台执行时，通用性更强。

在一方面，由于本公开实施例提供的页面展示方法通过将当前待展示区域绘制成一幅位图进行展示，而绘制操作可以在异步线程中执行而不在主线程中执行，使得主线程可以在启动异步线程执行绘制操作的同时，继续执行其他界面展示相关的操作，从而充分利用终端资源，并且可以缩短界面展示时间，进一步改善了用户体验。

实施例二

本公开实施例提供了一种页面展示装置，如图4所示，所述装置包括：

展示逻辑信息树确定模块400，用于确定目标页面中包括的各控件在目标位图中的展示逻辑信息树，其中，所述目标位图为展示所述目标页面的位图，所述展示逻辑信息树按照所述目标页面中包括的控件的展示逻辑，采用树形结构存储相应控件的控件信息，所述控件信息包括所述相应控件的渲染信息、位置信息、尺寸信息和层级信息；

当前待展示区域确定模块410，用于确定所述目标页面中的当前待展示区域；

当前待展示区域位图绘制模块420，用于根据所述展示逻辑信息树中存储的控件的渲染信息和尺寸信息绘制所述当前待展示区域对应的位图；

位图展示模块430，用于在屏幕中，根据所述展示逻辑信息树中存储的所述控件的位置信息和层级信息展示所述当前待展示区域对应的位图。

本公开的一些实施例，所述当前待展示区域位图绘制模块420进一步用于：根据所述当前待展示区域的尺寸信息和位置信息、所述展示逻辑信息树中的控件信息和所述目标页面的已经绘制完成的区域对应的位图，绘制所述当前待展示区域对应的位图。

进一步的，本公开的一些实施例，所述根据所述当前待展示区域的尺寸信息和位置信息、所述展示逻辑信息树中的控件信息和所述目标页面的已经绘制完成的区域对应的位图，绘制所述当前待展示区域对应的位图，包括：

根据所述当前待展示区域的尺寸信息和位置信息，确定所述当前待展示区域中的目标区域，所述目标区域为包含在所述目标页面的已经绘制完成的区域中的区域；

若所述当前待展示区域中包括所述目标区域，则根据所述展示逻辑信息树中的控件信息绘制所述当前待展示区域中所述目标区域之外的区域对应的位图；

根据缓存的所述目标区域对应的位图、绘制的所述目标区域之外的区域对应的位图，生成所述当前待展示区域对应的位图。

进一步的，本公开的另一些实施例，所述根据所述当前待展示区域的尺寸信息和位置信息、所述展示逻辑信息树中的控件信息和所述目标页面的已经绘制完成的区域对应的位图，绘制所述当前待展示区域对应的位图的步骤，还包括：

若所述当前待展示区域中不包括所述目标区域，则根据所述展示逻辑信息树中的控件信息绘制所述当前待展示区域对应的位图。

在本公开的一些实施例中，如图5所示，所述装置还包括：位图缓存模块440，用于缓存绘制的所述位图。

在本公开的一些实施例中，缓存绘制的所述位图，即缓存根据所述展示逻辑信息树中的控件信息绘制所述当前待展示区域对应的位图，或者，缓存根据所述展示逻辑信息树中的控件信息绘制的所述当前待展示区域中所述目标区域之外的区域对应的位图。

在本公开的一些实施例中，所述位图缓存模块440进一步用于：

对绘制的所述位图和当前已经缓存的位图进行拼接处理，根据拼接处理结果更新当前已经缓存的位图。

在本公开的一些实施例中，如图5所示，所述装置还包括：

资源回收模块450，用于确定移出所述屏幕的所述目标页面的已展示区域为待回收区域；以及，回收所述待回收区域占用的展示资源。

本公开的一些实施例中，所述资源回收模块450还用于：确定移出所述屏幕之外的页面区域；回收所述页面区域对应的绘制资源。

在本公开的一些实施例中，所述展示逻辑信息树确定模块400进一步用于：

获取所述目标页面的业务模型数据；

对所述业务模型数据进行解析，确定所述目标页面中包括的控件和各所述控件的至少部分控件信息；

按照所述至少部分控件信息和所述目标页面的预设布局信息，对所述目标页面中包括的各所述控件进行布局处理，确定各所述控件的控件信息，其中，所述控件信息包括：在所述目标页面中位置信息、尺寸信息、层级信息、渲染信息；

按照各所述控件在展示所述目标页面的目标位图中的展示逻辑，采用树形结构存储各所述控件的控件信息，生成所述目标页面的展示逻辑信息树。

本公开实施例提供的页面展示装置，用于实现本公开实施例一所述的页面展示方法的各步骤，装置的各模块的具体实施方式参见相应步骤，此处不再赘述。

本公开实施例提供了一种页面展示装置，通过确定目标页面中包括的各控件在目标位图中的展示逻辑信息树，其中，所述目标位图为展示所述目标页面的位图，所述展示逻辑信息树按照所述目标页面中包括的控件的展示逻辑，采用树形结构存储相应控件的控件信息，所述控件信息包括所述相应控件的渲染信息、位置信息、尺寸信息和层级信息；确定所述目标页面中的当前待展示区域；根据所述展示逻辑信息树中存储的控件的渲染信息和尺寸信息绘制所述当前待展示区域对应的位图；在屏幕中，根据所述展示逻辑信息树中存储的所述控件的位置信息和层级信息展示所述当前待展示区域对应的位图，有助于提升页面展示性能。本公开实施例提供的页面展示装置仅绘制屏幕显示区域内的页面区域对应的视图，而不是绘制整个目标页面的视图，减少了更新屏幕展示内容时视图生成的运算量，提升了页面的展示性能。

另一方面，本公开实施例提供的页面展示装置通过将当前待展示区域绘制成一幅位图进行展示，在绘制位图的过程中仅需要调用少量通用的系统图形处理接口，使得本公开实施例提供的页面展示装置在由不同的硬件平台执行时，通用性更强。

在一方面，由于本公开实施例提供的页面展示装置通过将当前待展示区域绘制成一幅位图进行展示，而绘制操作可以在异步线程中执行而不在主线程中执行，使得主线程可以在启动异步线程执行绘制操作的同时，继续执行其他界面展示相关的操作，从而充分利用终端资源，并且可以缩短界面展示时间，进一步改善了用户体验。

本公开实施例提供了一种页面展示装置，通过将现有技术中在主线程中执行的动态页面的布局、渲染和绘制操作拆分成不同的任务，并由异步线程执行各任务，实现了整个界面绘制过程的完全异步化，解决了现有技术中其他方案在构建复杂页面时仍然存在的性能瓶颈。

相应的，本公开还提供了一种电子设备，包括存储器、处理器及存储在所述存储器上并可在处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现如本公开实施例一所述的页面展示方法。所述电子设备可以为PC机、移动终端、个人数字助理、平板电脑等。

本公开还提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现如本公开实施例一所述的页面展示方法的步骤。

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

以上对本公开提供的一种页面展示方法及装置进行了详细介绍，本文中应用了具体个例对本公开的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本公开的方法及其核心思想；同时，对于本领域的一般技术人员，依据本公开的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本公开的限制。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到各实施方式可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件实现。基于这样的理解，上述技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在计算机可读存储介质中，如ROM/RAM、磁碟、光盘等，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行各个实施例或者实施例的某些部分所述的方法。

Claims (14)

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

确定目标页面中包括的各控件在目标位图中的展示逻辑信息树，其中，所述目标位图为展示所述目标页面的位图，所述展示逻辑信息树按照所述目标页面中包括的控件的展示逻辑，采用树形结构存储相应控件的控件信息，所述控件信息包括所述相应控件的渲染信息、位置信息、尺寸信息和层级信息；

确定所述目标页面中的当前待展示区域；

根据所述展示逻辑信息树中存储的控件的渲染信息和尺寸信息绘制所述当前待展示区域对应的位图；

在屏幕中，根据所述展示逻辑信息树中存储的所述控件的位置信息和层级信息展示所述当前待展示区域对应的位图。

2.根据权利要求1所述的方法，其特征在于，所述根据所述展示逻辑信息树中存储的控件的渲染信息和尺寸信息绘制所述当前待展示区域对应的位图的步骤包括：

根据所述当前待展示区域的尺寸信息和位置信息、所述展示逻辑信息树中的控件信息和所述目标页面的已经绘制完成的区域对应的位图，绘制所述当前待展示区域对应的位图。

3.根据权利要求2所述的方法，其特征在于，所述根据所述当前待展示区域的尺寸信息和位置信息、所述展示逻辑信息树中的控件信息和所述目标页面的已经绘制完成的区域对应的位图，绘制所述当前待展示区域对应的位图的步骤，包括：

根据所述当前待展示区域的尺寸信息和位置信息，确定所述当前待展示区域中的目标区域，所述目标区域为包含在所述目标页面的已经绘制完成的区域中的区域；

若所述当前待展示区域中包括所述目标区域，则根据所述展示逻辑信息树中的控件信息绘制所述当前待展示区域中所述目标区域之外的区域对应的位图；

根据缓存的所述目标区域对应的位图、绘制的所述目标区域之外的区域对应的位图，生成所述当前待展示区域对应的位图。

4.根据权利要求3所述的方法，其特征在于，所述根据所述当前待展示区域的尺寸信息和位置信息、所述展示逻辑信息树中的控件信息和所述目标页面的已经绘制完成的区域对应的位图，绘制所述当前待展示区域对应的位图的步骤，还包括：

若所述当前待展示区域中不包括所述目标区域，则根据所述展示逻辑信息树中的控件信息绘制所述当前待展示区域对应的位图。

5.根据权利要求3或4所述的方法，其特征在于，所述方法还包括：

缓存绘制的所述位图。

6.根据权利要求5所述的方法，其特征在于，所述缓存绘制的所述位图的步骤，还包括：

对绘制的所述位图和当前已经缓存的位图进行拼接处理，根据拼接处理结果更新当前已经缓存的位图。

7.根据权利要求1至4任一项所述的方法，其特征在于，所述方法还包括：

确定移出所述屏幕的所述目标页面的已展示区域为待回收区域；

回收所述待回收区域占用的展示资源。

8.根据权利要求1至4任一项所述的方法，其特征在于，所述确定目标页面中包括的各控件在目标位图中的展示逻辑信息树的步骤，包括：

获取所述目标页面的业务模型数据；

对所述业务模型数据进行解析，确定所述目标页面中包括的控件和各所述控件的至少部分控件信息；

按照所述至少部分控件信息和所述目标页面的预设布局信息，对所述目标页面中包括的各所述控件进行布局处理，确定各所述控件的控件信息，其中，所述控件信息包括：在所述目标页面中位置信息、尺寸信息、层级信息、渲染信息；

按照各所述控件在展示所述目标页面的目标位图中的展示逻辑，采用树形结构存储各所述控件的控件信息，生成所述目标页面的展示逻辑信息树。

9.一种页面展示装置，其特征在于，包括：

展示逻辑信息树确定模块，用于确定目标页面中包括的各控件在目标位图中的展示逻辑信息树，其中，所述目标位图为展示所述目标页面的位图，所述展示逻辑信息树按照所述目标页面中包括的控件的展示逻辑，采用树形结构存储相应控件的控件信息，所述控件信息包括所述相应控件的渲染信息、位置信息、尺寸信息和层级信息；

当前待展示区域确定模块，用于确定所述目标页面中的当前待展示区域；

当前待展示区域位图绘制模块，用于根据所述展示逻辑信息树中存储的控件的渲染信息和尺寸信息绘制所述当前待展示区域对应的位图；

位图展示模块，用于在屏幕中，根据所述展示逻辑信息树中存储的所述控件的位置信息和层级信息展示所述当前待展示区域对应的位图。

10.根据权利要求9所述的装置，其特征在于，所述当前待展示区域位图绘制模块进一步用于：

根据所述当前待展示区域的尺寸信息和位置信息、所述展示逻辑信息树中的控件信息和所述目标页面的已经绘制完成的区域对应的位图，绘制所述当前待展示区域对应的位图。

11.根据权利要求10所述的装置，其特征在于，所述根据所述当前待展示区域的尺寸信息和位置信息、所述展示逻辑信息树中的控件信息和所述目标页面的已经绘制完成的区域对应的位图，绘制所述当前待展示区域对应的位图的步骤，包括：

根据所述当前待展示区域的尺寸信息和位置信息，确定所述当前待展示区域中的目标区域，所述目标区域为包含在所述目标页面的已经绘制完成的区域中的区域；

若所述当前待展示区域中包括所述目标区域，则根据所述展示逻辑信息树中的控件信息绘制所述当前待展示区域中所述目标区域之外的区域对应的位图；

根据缓存的所述目标区域对应的位图、绘制的所述目标区域之外的区域对应的位图，生成所述当前待展示区域对应的位图。

12.根据权利要求11所述的装置，其特征在于，所述根据所述当前待展示区域的尺寸信息和位置信息、所述展示逻辑信息树中的控件信息和所述目标页面的已经绘制完成的区域对应的位图，绘制所述当前待展示区域对应的位图的步骤，还包括：

若所述当前待展示区域中不包括所述目标区域，则根据所述展示逻辑信息树中的控件信息绘制所述当前待展示区域对应的位图。

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

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