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

Abstract

本公开实施例中提供的动态页面展示方法，属于计算机技术领域，有助于改善展示动态页面时的性能。本公开实施例提供的动态页面展示方法包括：通过根据DSL描述的目标动态页面的页面信息，确定该目标动态页面中包括的各控件在目标位图中的展示逻辑信息树，其中，所述目标位图为展示所述目标动态页面的位图，所述展示逻辑信息树按照所述目标动态页面中包括的控件的展示逻辑，采用树形结构存储相应控件的控件信息；在确定所述目标动态页面中需要展示的界面区域后，根据所述展示逻辑信息树中存储的控件信息绘制所述需要展示的界面区域对应的位图；并根据所述展示逻辑信息树中存储的控件的位置和层级信息展示绘制的位图，有助于提升动态页面展示***的性能。

Description

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

技术领域

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

背景技术

动态页面指页面的展示内容动态变化的页面，对于电商，社交等需要快速迭代、实时调整的强运营类业务具有重要意义。动态页面的展示内容通常不是写在程序代码中的，而是通过动态化实时更新页面的技术实现动态页面的展示。现有的客户端动态渲染技术主要包括以下四种：1、基于webview的web页面动态化加载；2、本地内置多个模板支持动态切换；3，支持DSL语言的布局引擎；以及，4，基于虚拟机的动态化解决方案。

基于webview的web页面动态化，实质是基于浏览器运行网页，页面绘制效率低，运行效率差，***开销大。而后三种解决方案，实质是通过建立映射表、布局引擎和虚拟机与客户端渲染引擎通讯及调用关系，实现页面渲染。而渲染引擎则基于客户端操作***原生UI控件搭建动态化页面。由于操作***提供的UI控件绘制/布局仅支持主线程访问，大量原生UI控件操作导致客户端所在设备的CPU/GPU负担过重，虽然现有技术中部分技术方案在UI渲染过程中，将无需放置在主线程的UI控件操作进行剥离，最小化构建视图对主线程的性能损耗，在展示复杂的动态化页面时，仍然存在效率和性能瓶颈。

发明内容

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

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

确定所述目标动态页面中需要展示的界面区域；

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

在屏幕中，根据所述展示逻辑信息树中存储的所述控件的位置信息和层级信息展示绘制的所述需要展示的界面区域对应的位图。

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

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

待展示的界面区域确定模块，用于确定所述目标动态页面中需要展示的界面区域；

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

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

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

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

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

附图说明

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

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

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

图3是本公开实施例一中DSL描述的页面信息示意图；

图4是本公开实施例一中展示逻辑信息树示意图；

图5是本公开实施例二的动态页面展示方法流程示意图；

图6是本公开实施例三的动态页面展示方法中线程运行时序示意图；

图7是本公开实施例四的动态页面展示装置的结构示意图之一；

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

具体实施方式

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

实施例一

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

步骤110，根据DSL描述的目标动态页面的页面信息，确定所述目标动态页面中包括的各控件在目标位图中的展示逻辑信息树。

其中，所述目标位图为展示所述目标动态页面的位图，所述展示逻辑信息树按照所述目标动态页面中包括的控件的展示逻辑，采用树形结构存储相应控件的控件信息，所述控件信息包括所述相应控件的渲染信息、位置信息、尺寸信息和层级信息和事件响应方法信息。具体实施时，可以按照所述目标动态页面中控件的自顶向下从左到右的排布位置关系，从前向后依次存储各控件的所述控件信息。

DSL(domain-specific language，领域特定语言)指的是专注于某个应用程序领域的计算机语言，又译作领域专用语言，可以用来描述界面的设计信息。

设计师会设计出很多精美的界面，最后交给程序员去用代码编写成漂亮的网页或者App。每个界面如果纯用代码编写，都会面临大量的代码工作量，这里面可能更多的是一些重复的机械性的代码工作。诸如：某个元素设置长宽，设置居中，设置文字，设置距离上个元素XX像素，N个元素一起纵向，横向平均排列等等。现有技术中，为了提高工作效率，出现了把一些设计师产出的长宽、色值、文字、居中，距上等设计元数据(设计的标注信息等)，以一种约定的简洁的语言规则(即DSL)输入给程序代码，由程序和代码(如布局引擎)自动的分析和处理，从而生成真正的界面开发代码的应用，可以大幅度的减少代码量与工作量。

本公开实施例中，基于获取的目标动态页面的通过DSL描述的页面信息，进一步进行布局和渲染，确定所述目标动态页面的渲染信息，用于后续进行页面展示。具体实施时，DSL可以为如XML、JSON、js、lua等结构化语言。本公开实施例中仅以结构化语言为XML举例说明页面展示方案。

为了提升页面展示效率，本公开实施例中将不必须在主线程执行的代码部署在异步线程中执行。例如，创建网络线程、布局线程和绘制线程等异步线程，通过上述异步线程执行动态页面数据获取、页面布局、绘制等代码。

在本公开实施例中，在所述根据DSL描述的目标动态页面的页面信息，确定所述目标动态页面中包括的各控件在目标位图中的展示逻辑信息树的步骤之前，包括：在异步线程中获取DSL描述的目标动态页面的页面信息。例如，主线程在获取到展示目标动态页面的指令之后，构建页面信息请求参数，并创建网络请求任务，将该网络请求任务加入网络线程的任务队列中。网络线程在获取到该网络请求任务之后，通过服务器获取DSL描述所述目标动态页面的页面信息，并将该页面信息加入到布局线程的布局任务队列中。以图2所示的目标动态页面举例，将获取到如图3所示的页面信息。图2中的目标动态页面包括210、220和230三个部分，描述该目标动态页面的页面信息相应分为三个部分(Section)。所述页面信息通常按照预设格式，采用预设关键字描述目标动态页面中包括的控件的相关信息，如控件类型、图标文件名称、Title、描述文本、列宽度等。

在本公开的一些实施例中，所述根据DSL描述的目标动态页面的页面信息，确定所述目标动态页面中包括的各控件在目标位图中的展示逻辑信息树的步骤，包括：在异步线程中对获取的所述DSL描述的目标动态页面的页面信息进行解析，确定所述目标动态页面中包括的控件和各所述控件的至少部分控件信息；在异步线程中按照所述至少部分控件信息和所述目标动态页面的预设布局信息，对所述目标动态页面中包括的各所述控件进行布局处理，确定各所述控件的控件信息，其中，所述控件信息包括：在所述目标动态页面中的布局信息(如位置信息、尺寸信息)、层级信息、渲染信息、事件响应方法；按照各所述控件在展示所述目标动态页面的目标位图中的展示逻辑，采用树形结构存储各所述控件的控件信息，生成所述目标动态页面的展示逻辑信息树。其中，所述目标位图为所述目标动态页面的虚拟视图位图。所述目标位图是所述目标动态页面的完整视图的虚拟位图。

布局线程从布局任务队列中取出包括DSL描述的页面信息的布局任务之后，调用预设的布局引擎进行界面布局，将DSL描述的页面信息解析成可被渲染引擎直接处理的，包含布局信息、层级信息、渲染信息、事件响应方法等控件信息的数据结构。在本公开的一些实施例中，可以通过从DSL描述的页面信息中从前向后遍历各关键字，通过预设的关键字字典确定从DSL描述的页面信息中包括的控件，并进一步解析通过预设关键字标识的相应控件的控件信息(如：图标文件名称、列宽度、事件响应方法等)。进一步的，根据该目标动态页面的预设布局信息(如页面尺寸、列表项高度等)，结合通过DSL描述的页面信息获取的控件信息，确定该目标动态页面中包括的每个控件的具体控件信息，如控件的布局信息(包括位置信息、尺寸信息、层级信息等)、渲染信息(如背景色、展示的字体自豪、透明度、边框等控件视觉属性)、事件响应方法(如控件如何响应对应的控件事件，如点击事件等)。之后，按照各所述控件在所述目标动态页面中的位置从上至下，由左到右的顺序，依序记录各所述控件的控件信息，生成描述所述目标动态页面中各控件的展示逻辑的信息树。具体实施时，可以采用DSL等结构化语言描述展示逻辑信息树，如图4所示；也可以采用预设的数据结构存储各控件信息。

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

步骤120，确定所述目标动态页面中需要展示的界面区域。

以客户端的动态页面为例，当用户启动客户端或者通过点击客户端页面的链接、滑动客户端页面时，都需要更新显示屏幕中的界面。具体实施时，根据用户对客户端的操作生成的页面展示指令，确定所述目标动态页面中需要展示的界面区域相对于所述目标动态页面顶端的坐标偏移，然后，根据所述坐标偏移和客户端所在终端的有效屏幕尺寸确定所述目标动态页面中需要展示的界面区域。

步骤130，根据所述展示逻辑信息树中存储的控件的渲染信息和尺寸信息绘制所述需要展示的界面区域对应的位图。

本公开的一些实施例中，所述根据所述展示逻辑信息树中存储的控件的渲染信息和尺寸信息绘制所述需要展示的界面区域对应的位图，包括：根据所述展示逻辑信息树中存储的控件信息，确定所述需要展示的界面区域中包括的控件；通过调用***的绘制接口，根据所述界面区域中包括的各控件的渲染信息和尺寸信息绘制所述需要展示的界面区域的位图。

首先，根据确定的界面区域，进一步确定该界面区域包括的控件。具体实施时，展示逻辑信息树中的控件信息按照各控件在所述目标动态页面中自顶向下从左到右的位置关系从前向后存储，通过从前向后遍历展示逻辑信息树，即可确定待展示的界面区域中包括的依次排列的各控件的控件信息。如通过匹配展示逻辑信息树中控件的展示相对位置，确定待展示的界面区域包括的控件。

然后，将所述目标动态页面的展示逻辑信息树中该界面区域包括的控件的控件信息加入到绘制线程的绘制任务队列中。异步的绘制线程按照绘制任务入队的顺序依次取出绘制任务，并根据该绘制任务对应的控件信息执行绘制任务：即创建绘制上下文，根据控件信息中包含的尺寸信息、渲染信息等信息，调用***提供的绘制接口进行绘制工作。绘制结束后，输出一张包含了页面图文内容的位图，通知主线程绘制完毕。

步骤140，在屏幕中，根据所述展示逻辑信息树中存储的所述控件的位置信息和层级信息展示绘制的所述需要展示的界面区域对应的位图。

之后，主线程接收到绘制完毕信息之后，在屏幕中展示前述步骤绘制的所述需要展示的界面区域对应的位图，如图2所示的位图。

在本公开的一些实施例中，所述展示逻辑信息树中可以存储应控件的信息，也可以存储多个控件的信息。所述需要展示的界面区域可能为部分屏幕区域，也可能为全部屏幕区域；所述需要展示的界面区域显示的位图可能为显示在顶层的弹窗图片，也可能为背景图片。因此，在展示绘制的所述位图时，需要根据所述展示逻辑信息树中存储的所述控件的位置信息(即所述位图中包括的控件的位置信息)确定所述位图在屏幕中的展示位置，然后，进一步根据所述控件的层次信息在相应图层上的前述展示位置展示所述位图。

本公开实施例提供的动态页面展示方法，通过根据DSL描述的目标动态页面的页面信息，确定所述目标动态页面中包括的各控件在目标位图中的展示逻辑信息树，其中，所述目标位图为展示所述目标动态页面的位图，所述展示逻辑信息树按照所述目标动态页面中包括的控件的展示逻辑，采用树形结构存储相应控件的控件信息，所述控件信息包括相应控件的：渲染信息、位置信息、尺寸信息和层级信息；确定所述目标动态页面中需要展示的界面区域；根据所述展示逻辑信息树中存储的控件的渲染信息和尺寸信息绘制所述需要展示的界面区域对应的位图；在屏幕中，根据所述展示逻辑信息树中存储的所述控件的位置信息和层级信息展示绘制的所述需要展示的界面区域对应的位图，有助于提升动态页面展示***的性能。本公开实施例提供的动态页面展示方法，通过将结构化语言描述的界面信息进行预处理生成渲染信息进行存储，然后将需要显示的界面区域中包括的控件绘制成位图，进行展示，通过以体调用***接口绘制一张位图代替传统的通过控件“拼接”、“添加”在客户端界面绘制若干控件，抽象了底层操作***支持能力，减少了调用操作***提供的原生UI控件操作的次数，提升了动态页面的展示性能。

本公开实施例提供的动态页面展示方法，采用绘制控件成位图的方式实现页面的构建，不依赖***ViewSystem(视图***)，仅使用***少量标准图形绘制接口绘制界面图片，最终由主线程展示界面图片。最终产出的用户界面图片是一张位图，视图层级、数量大幅降低，性能消耗属常数级。因此，本公开在展示用户界面的过程中，仅有极少的操作必须由主进程执行，减少主进程执行的操作，尤其适用于构建动态用户界面，有助于提升界面绘制性能，降低***界面绘制瓶颈。并且，由于仅使用***少量标准图形绘制接口(如图2中的用户界面仅使用了图片绘制接口和文本绘制接口)绘制界面图片，并且，不同平台的标准图形绘制接口基本相同，有助于实现动态页面展示方法对不同平台的兼容性。

实施例二

本公开的另一个实施例提供的一种动态页面展示方法，所述控件信息还包括：事件响应方法、位置信息，如图5所示，所述在屏幕中，根据所述展示逻辑信息树中存储的所述控件的位置信息和层级信息展示绘制的所述需要展示的界面区域对应的位图的步骤之后，还包括：步骤150至步骤190。

步骤150，接收对屏幕中展示的所述位图的触发操作。

在本公开的一些实施例中，当用户触发了展示的页面中的某个按键，或者执行了拖动展示的页面的操作之后，终端需要刷新屏幕中展示的页面。

步骤160，根据所述触发操作针对的所述位图的位置、所述位图对应的所述目标动态页面的位置和所述展示逻辑信息树中存储的控件的位置信息、尺寸信息和层级信息，确定所述触发操作针对的控件，以及所述控件的事件响应方法。

进一步的，根据接收到的触发操作，获取触发操作针对的页面中展示的位图的位置。例如，当屏幕中展示如图2所示的位图时，如果用户点击了210中的美食图标，则终端的屏幕将切换至显示美食栏目的页面。具体实施时，根据所述触发操作的类型和坐标信息可以确定所述触发操作针对的屏幕中展示的位图位置。进一步的，根据屏幕中展示的位图相对于该动态页面的位置、所述触发操作针对的屏幕中展示的位图位置和尺寸，确定所述触发操作针对的该动态页面中的候选控件，然后，再根据该候选控件的层次信息确定所述触发操作针对的位于页面顶层的所述候选控件。例如，将屏幕中展示的位图相对于该动态页面顶端的位置偏移和所述触发操作针对的屏幕中展示的位图位置相对于该位图顶端的位置偏移相加，将得到的和作为所述触发操作针对的该动态页面的顶端的位置偏移。然后，遍历所述展示逻辑信息树中存储的控件，并根据各控件的位置信息和尺寸信息，确定所述触发操作针对的该动态页面的顶端的位置偏移处的一个或多个控件；最后，确定层次信息指示的最顶层的控件为触发操作针对的控件，并确定该控件的事件响应方法。

步骤170，修改所述触发操作针对的控件的渲染信息，重新绘制与所述需要展示的界面区域对应的位图并刷新显示，以更新所述触发操作针对的所述控件的显示效果。

当页面中展示的某一控件被触发(如点击)之后，通常该控件的展示状态需要发生变化，例如高亮显示被点击的控件。因此，当确定所述触发操作针对的控件之后，需要根据预设的展示方式修改所述触发操作针对的控件的渲染信息。在本公开的一些实施例中，重新绘制与所述需要展示的界面区域对应的位图并刷新显示的步骤，包括：在异步线程中重新绘制与所述需要展示的界面区域对应的位图，并在重新绘制完成后通知主线程所述位图绘制完成；在主线程中将重新绘制完成的所述位图刷新显示至屏幕中。例如，绘制线程基于修改后的渲染信息重新绘制与所述需要展示的界面区域对应的位图，并通知主线程动态页面对应的位图绘制完成。主线程将重新绘制的位图刷新显示至屏幕中，以更新所述触发操作针对的所述控件的显示效果。

步骤180，执行所述控件的事件响应方法。

在异步绘制线程重新绘制屏幕中展示的位图的过程中，主线程执行所述控件的事件响应方法，例如，跳转到美食栏目对应的界面。

步骤190，恢复所述触发操作针对的所述控件的渲染信息，重新绘制与所述需要展示的界面区域对应的位图并刷新显示，以恢复所述触发操作针对的所述控件的显示效果。

在主线程执行完所述控件的事件响应方法之后，主线程恢复所述触发操作针对的所述控件的渲染信息。之后，绘制线程基于恢复后的渲染信息重新绘制与所述需要展示的界面区域对应的位图，并通知主线程动态页面对应的位图绘制完成。主线程重新绘制与所述需要展示的界面区域对应的位图并刷新显示，以恢复所述触发操作针对的所述控件的显示效果。

本公开实施例提供的动态页面展示方法，当展示的页面接收到触发操作时，通过触发操作的位置和展示逻辑信息树存储的控件信息，可以快速确定操作的控件，并执行相应的事件响应方法，同时，更新所述控件的展示效果。本公开实施例提供的动态页面展示方法，通过在异步线程中绘制变化的界面位图，在主线程中执行控件的事件响应方法，可以提升用户操作的响应速度，对于多处理器的终端，可以提升终端资源的利用率。

实施例三

基于实施例一和实施例二，本实施例结合主线程和异步线程之间的交互过程，进一步详细描述本公开实施例提供的动态页面展示方法。本实施例中，采用主线程、异步线程和任务队列相结合，完成动态页面的布局和渲染，通过异步执行布局任务、绘制任务，绘制需要展示的页面区域的位图。任务队列作为线程之间的数据传输通道。如图6所示，用于动态页面展示的异步线程至少包括：网络线程、布局线程、绘制线程，其中，所述网络线程、布局线程、绘制线程分别对应网络任务队列、布局任务队列和绘制任务队列。

下面，结合移动终端的客户端展示动态页面的应用场景和图6详细说明动态页面展示的技术方案。如图6所示，本公开实施例提供的一种动态页面展示方法包括步骤610至步骤6110。

步骤610，在主线程中构建目标动态页面的数据请求参数，并创建与目标动态页面对应的数据请求任务，然后，将数据请求任务放入网络线程对应的网络任务队列中，由网络线程通过执行所述数据请求任务，向服务器获取所述目标动态页面的数据。

步骤620，所述网络线程通过网络任务队列获取数据请求任务，并依次执行各数据请求任务获取目标动态页面的DSL描述的页面信息，并生成布局任务。

在本公开的一些实施例中，所述数据请求任务根据携带的请求参数，访问后台服务器，以获取该目标动态页面的数据。

获取到的数据包括目标动态页面中采用DSL描述的包括各业务模型的页面信息数据。

所述网络线程进一步根据各业务模型数据生成布局任务，并将生成的布局任务按照业务模型的展示顺序依次放入布局任务队列。所述布局任务携带各业务模型的数据。

步骤630，在布局线程中根据DSL描述的目标动态页面的页面信息，确定所述目标动态页面中包括的各控件在目标位图中的展示逻辑信息树。

其中，所述展示逻辑信息树按照所述目标动态页面中控件的位置关系存储所述目标动态页面中包括的控件信息，所述控件信息包括：渲染信息、位置信息、尺寸信息和层级信息。具体实施时，在布局线程中对目标动态页面中各业务模型的数据进行布局处理，确定各业务模型对应的控件信息，并将确定的控件信息按照各业务模型中控件在该动态页面中的展示顺序，确定所述目标动态页面中包括的各控件在目标位图中的展示逻辑信息树。

在本公开的一些实施例中，业务模型的数据包括在所述目标动态页面内展示的该业务模型的控件的数据，通过在布局线程中按照所述目标动态页面的预设展示属性，对该业务模型的控件进行排版布局处理，确定各所述控件的绘制参数。进一步的，在布局线程中根据该业务模型的控件的绘制参数，确定该业务模型的界面绘制信息，其中，界面绘制信息由各个控件的渲染信息组成。各业务模型的界面绘制信息进一步构成该目标动态页面的展示逻辑信息树。

布局线程完成该目标动态页面的排版布局之后，生成了该目标动态页面的展示逻辑信息树，之后，布局线程向主线程发送布局完成消息。

步骤640，在主线程中确定所述目标动态页面中需要展示的界面区域。

主线程在接收到布局完成信息之后，根据用户操作确定需要展示的目标动态页面的界面区域。并创建绘制所述界面区域的绘制任务加入至绘制任务队列。

步骤650，在绘制线程中根据所述展示逻辑信息树中存储的控件的渲染信息和尺寸信息绘制所述需要展示的界面区域对应的位图。

绘制线程执行绘制任务队列中的绘制任务，根据所述展示逻辑信息树中存储的控件的渲染信息，调用***提供的绘制接口绘制所述需要展示的界面区域对应的位图。并在完成绘制位图之后，向主线程发送绘制结束信息。

步骤660，主线程在屏幕中，根据所述展示逻辑信息树中存储的所述控件的位置信息和层级信息展示绘制的所述需要展示的界面区域对应的位图。

主线程接收到绘制线程发送的绘制结束之后，在终端的屏幕中展示绘制线程绘制的位图。

步骤670，在主线程中接收对屏幕中展示的所述位图的触发操作。

目标动态页面展示完成之后，主线程接收用户对展示的界面区域的触发操作，如，点击展示的界面中的图标的操作。

步骤680，在主线程中根据所述触发操作针对的所述位图的位置、所述位图对应的所述目标动态页面的位置和所述展示逻辑信息树中存储的控件的位置信息、尺寸信息和层级信息，确定所述触发操作针对的控件，以及所述控件的事件响应方法。

主线程根据所述触发操作针对的屏幕中展示的位图的位置，即目标动态页面的相应位置、尺寸和显示的层级，通过展示逻辑信息树确定所述触发操作针对的控件以及该控件的事件响应方法。

步骤690，在主线程中修改所述触发操作针对的控件的渲染信息，创建布局任务。

之后，主线程通知布局线程修改该所述展示逻辑信息树中该控件的渲染信息(如将该控件的展示效果修改为高亮)。之后，主线程创建布局任务，使得布局线程基于修改后的展示逻辑信息树，重新进行界面布局，更新渲染信息。

步骤6100，在布局线程中更新展示逻辑信息树。

异步的布局线程通过执行布局任务更新展示逻辑信息树。在布局任务更新展示逻辑信息树之后，通知主线程展示逻辑信息树更新完毕。

步骤6101，在主线程中创建所述界面区域的重新绘制任务。

步骤6102，在绘制线程中重新绘制所述界面区域的位图。

异步的绘制线程通过执行绘制任务，基于更新后的渲染信息绘制所述界面区域的更新后的位图。

步骤6103，在主线程中执行所述控件的事件响应方法。

在异步绘制所述界面区域的更新后的位图的过程中，主线程同步执行所述控件的事件响应方法。

步骤6104，绘制线程在重新绘制所述界面区域的位图结束之后，通知主线程完成位图绘制。

步骤6105，在主线程中展示重新绘制的位图。

步骤6106，当所述控件的事件响应方法执行完毕之后，在主线程中恢复所述触发操作针对的所述控件的渲染信息，并创建布局任务。

步骤6107，在布局线程中恢复展示逻辑信息树，并通知主线程展示逻辑信息树恢复完毕。

步骤6108，在主线程中创建绘制任务，触发界面重新绘制。

步骤6109，在绘制线程中重新绘制所述界面区域的位图，并在绘制结束后通知主线程完成位图绘制。

步骤6110，在主线程中展示重新绘制的位图，以恢复所述触发操作针对的所述控件的显示效果。

本公开实施例提供了一种动态页面展示方法，通过将现有技术中在主线程中执行的动态页面的布局、渲染和展示操作拆分成不同的任务，并由相应的异步线程执行各任务，实现了整个动态页面绘制过程的完全异步化，解决了现有技术中其他方案在构建复杂页面时仍然存在的性能瓶颈。本公开通过引入展示逻辑信息树对控件信息进行存储，然后，通过异步绘制位图的方式实现渲染，布局，界面绘制和事件响应完全异步化，有助于提升动态页面展示***的性能。

实施例四

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

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

待展示的界面区域确定模块720，用于确定所述目标动态页面中需要展示的界面区域；

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

界面区域展示模块740，用于在屏幕中，根据所述展示逻辑信息树中存储的所述控件的位置信息和层级信息展示绘制的所述需要展示的界面区域对应的位图。

如图8所示，在本公开的另一些实施例中，所述控件信息还包括：事件响应方法，所述装置还包括：

触发操作接收模块750，用于接收对屏幕中展示的所述位图的触发操作；

控件及响应事件确定模块760，用于根据所述触发操作针对的所述位图的位置、所述位图对应的所述目标动态页面的位置和所述展示逻辑信息树中存储的控件的位置信息、尺寸信息和层级信息，确定所述触发操作针对的控件，以及所述控件的事件响应方法；

控件显示效果更新模块770，用于修改所述触发操作针对的控件的渲染信息，重新绘制与所述需要展示的界面区域对应的位图并刷新显示，以更新所述触发操作针对的所述控件的显示效果；

事件响应模块780，用于执行所述控件的事件响应方法；

控件显示效果恢复模块790，用于恢复所述触发操作针对的所述控件的渲染信息，重新绘制与所述需要展示的界面区域对应的位图并刷新显示，以恢复所述触发操作针对的所述控件的显示效果。

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

页面信息获取模块700，用于在异步线程中获取DSL描述的目标动态页面的页面信息。

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

在异步线程中对获取的所述DSL描述的目标动态页面的页面信息进行解析，确定所述目标动态页面中包括的控件和各所述控件的至少部分控件信息；

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

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

在本公开的一些实施例中，所述界面区域位图绘制模块730进一步用于：

根据所述展示逻辑信息树中存储的控件信息，确定所述需要展示的界面区域中包括的控件；

通过调用***的绘制接口，根据所述界面区域中包括的各控件的渲染信息和尺寸信息绘制所述需要展示的界面区域的位图。

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

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

具体的，本公开实施例提供的动态页面展示装置，通过将结构化语言描述的界面信息进行预处理生成渲染信息进行存储，然后将需要显示的界面区域中包括的控件绘制成位图，进行展示，通过以体调用***接口绘制一张位图代替传统的通过控件“拼接”、“添加”在客户端界面绘制若干控件，抽象了底层操作***支持能力，减少了调用操作***提供的原生U I控件操作的次数，提升了动态页面的展示性能。

进一步的，本公开实施例提供的动态页面展示装置，当展示的页面接收到触发操作时，通过触发操作的位置和展示逻辑信息树存储的控件信息，可以快速确定操作的控件，并执行相应的事件响应方法，同时，更新所述控件的展示效果。本公开实施例提供的动态页面展示装置，通过在异步线程中绘制变化的界面位图，在主线程中执行控件的事件响应方法，可以提升用户操作的响应速度，对于多处理器的终端，可以提升终端资源的利用率。

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

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

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

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

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

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

Claims (12)

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

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

确定所述目标动态页面中需要展示的界面区域；

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

在屏幕中，根据所述展示逻辑信息树中存储的所述控件的位置信息和层级信息展示绘制的所述需要展示的界面区域对应的位图。

2.根据权利要求1所述的方法，其特征在于，所述控件信息还包括：事件响应方法，所述在屏幕中，根据所述展示逻辑信息树中存储的所述控件的位置信息和层级信息展示绘制的所述需要展示的界面区域对应的位图的步骤之后，还包括：

接收对屏幕中展示的所述位图的触发操作；

根据所述触发操作针对的所述位图的位置、所述位图对应的所述目标动态页面的位置和所述展示逻辑信息树中存储的控件的位置信息、尺寸信息和层级信息，确定所述触发操作针对的控件，以及所述控件的事件响应方法；

修改所述触发操作针对的控件的渲染信息，重新绘制与所述需要展示的界面区域对应的位图并刷新显示，以更新所述触发操作针对的所述控件的显示效果；

执行所述控件的事件响应方法；

恢复所述触发操作针对的所述控件的渲染信息，重新绘制与所述需要展示的界面区域对应的位图并刷新显示，以恢复所述触发操作针对的所述控件的显示效果。

3.根据权利要求1或2所述的方法，其特征在于，所述根据DSL描述的目标动态页面的页面信息，确定所述目标动态页面中包括的各控件在目标位图中的展示逻辑信息树的步骤之前，包括：

在异步线程中获取DSL描述的目标动态页面的页面信息。

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

在异步线程中对获取的所述DSL描述的目标动态页面的页面信息进行解析，确定所述目标动态页面中包括的控件和各所述控件的至少部分控件信息；

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

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

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

根据所述展示逻辑信息树中存储的控件信息，确定所述需要展示的界面区域中包括的控件；

通过调用***的绘制接口，根据所述界面区域中包括的各控件的渲染信息和尺寸信息绘制所述需要展示的界面区域的位图。

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

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

待展示的界面区域确定模块，用于确定所述目标动态页面中需要展示的界面区域；

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

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

7.根据权利要求6所述的装置，其特征在于，所述控件信息还包括：事件响应方法，所述装置还包括：

触发操作接收模块，用于接收对屏幕中展示的所述位图的触发操作；

控件及响应事件确定模块，用于根据所述触发操作针对的所述位图的位置、所述位图对应的所述目标动态页面的位置和所述展示逻辑信息树中存储的控件的位置信息、尺寸信息和层级信息，确定所述触发操作针对的控件，以及所述控件的事件响应方法；

控件显示效果更新模块，用于修改所述触发操作针对的控件的渲染信息，重新绘制与所述需要展示的界面区域对应的位图并刷新显示，以更新所述触发操作针对的所述控件的显示效果；

事件响应模块，用于执行所述控件的事件响应方法；

控件显示效果恢复模块，用于恢复所述触发操作针对的所述控件的渲染信息，重新绘制与所述需要展示的界面区域对应的位图并刷新显示，以恢复所述触发操作针对的所述控件的显示效果。

8.根据权利要求6或7所述的装置，其特征在于，所述装置还包括：

页面信息获取模块，用于在异步线程中获取DSL描述的目标动态页面的页面信息。

9.根据权利要求6或7所述的装置，其特征在于，所述展示逻辑信息确定模块，进一步用于：

在异步线程中对获取的所述DSL描述的目标动态页面的页面信息进行解析，确定所述目标动态页面中包括的控件和各所述控件的至少部分控件信息；

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

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

10.根据权利要求6或7所述的装置，其特征在于，所述界面区域位图绘制模块，进一步用于：

根据所述展示逻辑信息树中存储的控件信息，确定所述需要展示的界面区域中包括的控件；

通过调用***的绘制接口，根据所述界面区域中包括的各控件的渲染信息和尺寸信息绘制所述需要展示的界面区域的位图。

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

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