CN114647476B - 页面渲染方法、装置、设备、存储介质及程序 - Google Patents

Abstract

本公开提供页面渲染方法、装置、设备、存储介质及程序，涉及计算机技术领域，尤其涉及应用程序处理和页面显示技术领域。具体实现方案为：获取第一页面中的多个用户界面UI单元的单元信息，所述单元信息包括所述UI单元所在的图层、以及所述UI单元的显示位置；根据多个UI单元的单元信息，确定所述多个UI单元的未被遮挡区域；在所述多个UI单元的未被遮挡区域中确定多个图元的图元信息，并根据所述多个图元的图元信息，绘制所述第一页面。对页面中的图层、UI单元和图元进行处理即可实现页面的渲染，无需在应用程序内嵌入浏览器，提高了页面渲染效率。

Description

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

技术领域

本公开涉及计算机技术领域，具体涉及应用程序处理技术和页面显示技术，尤其涉及一种页面渲染方法、装置、设备、存储介质及程序。

背景技术

目前，应用程序可以应用于多种平台，例如，安卓平台、IOS平台、网页平台、桌面平台等。

由于不同平台中的用户界面(User Interface，UI)的渲染方式不同，为了使得同一应用程序可以应用于不同的平台，通常在应用程序中嵌入浏览器，并通过浏览器采用超文本标记语言(Hyper Text Markup Language，HTML)、层叠样式表(Cascading StyleSheets，CSS)和Javascript结合的方式进行UI页面渲染。然而，由于浏览器的运行效率较低，导致UI页面的渲染效率较低。

发明内容

本公开提供了一种用于提高页面渲染效率的页面渲染方法、装置、设备以及存储介质。

根据本公开的第一方面，提供了一种页面渲染方法，包括：

获取第一页面中的多个用户界面UI单元的单元信息，所述单元信息包括所述UI单元所在的图层、以及所述UI单元的显示位置；

根据多个UI单元的单元信息，确定所述多个UI单元的未被遮挡区域；

在所述多个UI单元的未被遮挡区域中确定多个图元的图元信息，并根据所述多个图元的图元信息，绘制所述第一页面。

根据本公开的第二方面，提供了一种页面渲染装置，包括：

获取模块，用于获取第一页面中的多个用户界面UI单元的单元信息，所述单元信息包括所述UI单元所在的图层、以及所述UI单元的显示位置；

第一确定模块，用于根据多个UI单元的单元信息，确定所述多个UI单元的未被遮挡区域；

第二确定模块，用于在所述多个UI单元的未被遮挡区域中确定多个图元的图元信息；

绘制模块，用于根据所述多个图元的图元信息，绘制所述第一页面。

根据本公开的第四方面，提供了一种电子设备，包括：

至少一个处理器；以及

与所述至少一个处理器通信连接的存储器；其中，

所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行第一方面任一项所述的方法。

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

至少一个处理器；以及

与所述至少一个处理器通信连接的存储器；其中，

所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行第一方面所述的方法。

根据本公开的第四方面，提供了一种存储有计算机指令的非瞬时计算机可读存储介质，其中，所述计算机指令用于使所述计算机执行根据第一方面所述的方法。

根据本公开的第五方面，提供了一种计算机程序产品，所述计算机程序产品包括：计算机程序，所述计算机程序存储在可读存储介质中，电子设备的至少一个处理器可以从所述可读存储介质读取所述计算机程序，所述至少一个处理器执行所述计算机程序使得电子设备执行第一方面所述的方法。

应当理解，本部分所描述的内容并非旨在标识本公开的实施例的关键或重要特征，也不用于限制本公开的范围。本公开的其它特征将通过以下的说明书而变得容易理解。

附图说明

附图用于更好地理解本方案，不构成对本公开的限定。其中：

图1为本公开实施例提供的UI页面的示意图；

图2为本公开实施例提供的一种页面渲染方法的流程示意图；

图3为本公开实施例提供的UI单元的遮挡示意图；

图4为本公开实施例提供的确定未被遮挡区域的方法的流程示意图；

图5为本公开实施例提供的另一种页面渲染方法的流程示意图；

图6为本公开实施例提供的UI单元的示意图；

图7为本公开实施例提供的一种页面渲染装置的结构示意图；

图8为本公开实施例提供的另一种页面渲染装置的结构示意图；

图9示出了可以用来实施本公开的实施例的示例电子设备900的示意性框图。

具体实施方式

以下结合附图对本公开的示范性实施例做出说明，其中包括本公开实施例的各种细节以助于理解，应当将它们认为仅仅是示范性的。因此，本领域普通技术人员应当认识到，可以对这里描述的实施例做出各种改变和修改，而不会背离本公开的范围和精神。同样，为了清楚和简明，以下的描述中省略了对公知功能和结构的描述。

本公开提供一种页面渲染方法、装置、设备、存储介质及程序，应用于计算机技术领域中的应用程序处理技术和页面显示技术，可应用于页面渲染场景，以提高页面渲染效率。

本公开实施例涉及UI页面的渲染，UI页面中通常包括多个图层，每个图层中包括至少一个UI单元(还可以称为UIBox)。为了便于理解，下面，结合图1，对UI页面的结构进行说明。

图1为本公开实施例提供的UI页面的示意图。请参见图1，UI界面中包括多个3个图层，图层1位于最底层，图层2位于图层1之上，图层3位于图层2之上。其中，图层2还包括位于图层1之上的搜索框、图标和导航栏，图1中未示出。

UI单元是二维的矩形区域。每个图层中包括至少一个UI单元。例如，图层1中的UI单元包括图层1所占的矩形区域。图层2中的UI单元包括：搜索框所占的矩形区域、电器图标和文字所占的矩形区域、服装图标和文字所占的矩形区域、缴费图标和文字所占的矩形区域、领券图标和文字所占的矩形区域、矩形区域A和页面最下边的导航栏所占的矩形区域。图层3中的UI单元包括矩形区域B和矩形区域C。

不同图层之间的UI单元之间存在遮挡关系。例如，图层2中的UI单元遮挡了图层1中的UI单元的一部分。图层3中的UI单元(矩形区域B和矩形区域C)遮挡了图层2中的UI单元(矩形区域A)的一部分。

在相关技术中，通常在应用程序中嵌入浏览器，并通过浏览器采用HTML、CSS和Javascript结合的方式进行UI页面渲染。然而，由于浏览器的运行效率较低，导致UI页面的渲染效率较低。

本公开提供的页面渲染方法中，当需要对第一页面进行渲染时，对第一页面进行图层拆分得到各个图层中的UI单元，并确定出各个UI单元中未被遮挡区域，再分别在各未被遮挡区域中拆分出多个图元，并根据各个图元的图元信息绘制第一页面。在上述过程中，只需对页面中的图层、UI单元和图元进行处理即可实现页面的渲染，无需在应用程序内嵌入浏览器，提高了页面渲染效率。

下面以具体地实施例对本公开的技术方案进行详细说明。下面这几个具体的实施例可以相互结合，对于相同或相似的概念或过程可能在某些实施例不再赘述。

图2为本公开实施例提供的一种页面渲染方法的流程示意图。请参见图2，该方法可以包括：

S201、获取第一页面中的多个UI单元的单元信息。

本公开实施例的执行主体可以为电子设备，也可以为电子设备中的页面渲染装置。页面渲染装置可以通过软件实现，也可以通过软件和硬件的结合实现。

第一页面为待渲染的页面。例如，当用户在电子设备中输入操作，以请求显示第一页面时，可以执行图2实施例所示的方案，以对第一页面进行渲染。

UI单元是指页面中的矩形区域，该矩形区域可以为直角矩形区域，也可以为圆角矩形区域。例如，请参见图1，电器图标和文字所对应的UI单元可以为一直角矩形区域，图层2中的矩形区域A可以为一圆角矩形区域。

单元信息包括UI单元所在的图层、以及UI单元的显示位置。可以通过UI单元在页面中的坐标表示显示位置。由于UI单元为一矩形区域，因此，可以通过UI单元的左上角坐标和右下角坐标表示UI单元的显示位置，或者，可以通过UI单元的右上角坐标和左下角坐标表示UI单元的显示位置。

上述多个UI单元是指第一页面中包括的所有的UI单元。可以在第一页面的源代码中进行遍历查找，以分别获取每个图层中的UI单元，进而得到第一页面中的多个UI单元。

S202、根据多个UI单元的单元信息，确定多个UI单元的未被遮挡区域。

可以分别确定每个图层中的UI单元的未被遮挡区域。例如，可以先确定最顶层的图层中的UI单元的未被遮挡区域，再确定次顶层的图层中的UI单元的未被遮挡区域，以此类推，直至确定得到最底层的图层中的UI单元的未被遮挡那个区域。或者，也可以先确定最底层的图层中的UI单元的未被遮挡区域，再确定次底层的图层中的UI单元的未被遮挡区域，以此类推，直至确定得到最顶层的图层中的UI单元的未被遮挡那个区域。

针对最顶层的图层，最顶层的图层中每个UI单元均不存在被遮挡区域，即，最顶层的UI单元中的所有区域均为未被遮挡区域。

针对非顶层的第一图层，在确定第一图层的第一UI单元的未被遮挡区域时，可以根据第一图层、第一UI单元的显示位置、至少一个第二图层中各UI单元的显示位置，确定第一UI单元的未被遮挡区域，第二图层位于第一图层之上。例如，假设第一页面中包括4个图层，从底层到顶层依次为图层1、图层2、图层3和图层4。在确定图层2中UI单元1的未被遮挡区域时，可以根据图层2中UI单元1的显示位置、以及图层3和图层4中各UI单元的显示位置，确定UI单元1的未被遮挡区域。

在上述过程中，在确定某一图层中的UI单元的未被遮挡区域时，根据该图层是否为顶层的图层，可以快速确定得到该图层中UI单元的未被遮挡区域，使得确定未被遮挡区域的效率较高。

下面，结合图3，对UI单元的未被遮挡区域进行说明。

图3为本公开实施例提供的UI单元的遮挡示意图。请参见图3，包括图层1和图层2，图层2位于图层1之上。图层1中包括UI单元A和UI单元B，图层2中包括UI单元C。UI单元C位于UI单元A和UI单元B之上。请参见图3，UI单元A中的未被遮挡区域为UI单元A中除区域1之外的其它区域。UI单元B中的未被遮挡区域为UI单元B中处区域2之外的其它区域。

S203、在多个UI单元的未被遮挡区域中确定多个图元的图元信息，并根据多个图元的图元信息，绘制第一页面。

UI单元中包括一个或多个图元。图元为页面中的基本元素，例如，图元可以包括线段、多边形、文本、图片等。

图元信息用于描述图元，即，根据图元信息可以绘制出对应的图元。当图元不同时，图元的图元信息也不同。

例如，线段的图元信息包括如下至少一种：起始点位置、结束点位置、线段宽度和线段颜色。

例如，矩形的图元信息包括如下至少一种：起始点位置、结束点位置、边框颜色、边框宽度、内部颜色和圆角角度。

例如，多边形的图元信息包括如下至少一种：多个顶点的顶点位置、边框颜色、边框宽度、内部颜色。

例如，文本的图元信息包括如下至少一种：文本内容、字体、字号、颜色、文字位置。

例如，图片的图元信息包括如下至少一种：图片、图片位置。

在确定得到多个图元的图元信息之后，可以向图形处理器(Graphics ProcessingUnit，GPU)GPU发送图元信息，以使GPU根据图元信息绘制第一页面，在绘制完成第一页面之后，可以显示第一页面。

本公开实施例提供的页面渲染方法，当需要对第一页面进行渲染时，获取第一页面中各UI单元的单元信息，并根据各UI单元的单元信息确定各个UI单元中未被遮挡区域，再分别在各未被遮挡区域中拆分出多个图元，并根据各个图元的图元信息绘制第一页面。在上述过程中，只需对页面中的图层、UI单元和图元进行处理即可实现页面的渲染，无需在应用程序内嵌入浏览器，提高了页面渲染效率。

在上述任意一个实施例的基础上，在对第一页面进行渲染的过程中，需要对确定出第一页面中各个UI单元的未被遮挡区域，确定各UI单元的未被遮挡区域的过程相同，下面，以确定任意一个第一UI单元的未被遮挡区域的过程为例进行说明。

图4为本公开实施例提供的确定未被遮挡区域的方法的流程示意图。请参见图4，该方法可以包括：

S401、确定第一UI单元所在的第一图层。

S402、判断第一图层是否为顶层的图层。

若是，则执行S403。

若否，则执行S404。

可以获取第一图层的图层标识和图层总数量，并根据第一图层的标识和图层总数量，判断第一图层是否为顶层的图层。

例如，假设最底层图层的图层标识最小，最顶层图层的图层标识最大，则可以判断第一图层标识是否与图层总数量相同，若是，则确定第一图层为顶层的图层，若否，则确定第一图层不是顶层的图层。

S403、将第一UI单元的全部区域确定为第一UI单元的未被遮挡区域。

若第一图层为最顶层的图层，则不存在任何UI单元位于第一图层之上，即，不存在任何UI单元位于第一UI单元之上，则可以将第一UI单元的全部区域确定为第一UI单元的未被遮挡区域。

S404、根据第一UI单元的显示位置和至少一个第二图层中各UI单元的显示位置，判断第二图层中是否存在UI单元的显示位置与第一UI单元的显示位置存在重合区域。

其中，第二图层位于第一图层之上。

若是，则执行S405。

若否，则执行S403。

若第一图层为非顶层的图层，则可能存在UI单元位于第一UI单元之上，也可能不存在UI单元位于第一UI单元之上，因此，需要根据第一UI单元的显示位置和第二图层中各UI单元的显示位置确定第一UI单元的未被遮挡区域。

可以获取第二图层中各UI单元的显示位置，若第二图层中不存在UI单元的显示位置与第一UI单元的显示位置存在重合区域，则可以将第一UI单元的全部区域确定为第一UI单元的未被遮挡区域。若第二图层中存在UI单元的显示位置与第一UI单元的显示位置存在重合区域，则需要进一步根据S405-S406确定第一UI单元的未被遮挡区域。

在上述过程中，在确定得到第二图层中不存在UI单元的显示位置与第一UI单元的显示位置存在重合区域时，可以直接确定第一UI单元的未被遮挡区域第一UI单元的全部区域，使得确定第一UI单元的未被遮挡区域的效率较高。

S405、在至少一个第二图层中确定至少一个第二UI单元。

其中，第二UI单元的显示位置与第一UI单元的显示位置存在重合区域。

S406、根据第一UI单元的显示位置和至少一个第二UI单元的显示位置，确定第一UI单元的未被遮挡区域。

可以根据第一UI单元的显示位置和至少一个第二UI单元的显示位置，在第一UI单元中确定被至少一个第二UI单元遮挡的至少一个遮挡区域；将第一UI单元中除至少一个遮挡区域之外的其它区域，确定为第一UI单元的未被遮挡区域。

在图4所示的实施例中，在确定第一图层中的第一UI单元的未被遮挡区域时，可以判断第一图层是否为顶层的图层，当第一图层为顶层的图层时，可以直接确定第一UI单元的未被遮挡区域为第一UI单元的全部区域，使得确定第一UI单元的未被遮挡区域的效率较高。当第一图层为非顶层的图层时，可以再判断位于第一图层之上的第二图层中是否存在UI单元与第一UI单元存在重合区域，若否，则可以直接确定第一UI单元的未被遮挡区域为第一UI单元的全部区域，若是，则再进一步确定第一UI单元的未被遮挡区域。在上述过程中，通过多级确定第一UI单元的未被遮挡区域，使得确定第一UI单元的未被遮挡区域的效率较高。

在上述任意一个实施例的基础上，下面，结合图5，对本公开实施例所示的页面渲染方法进行进一步详细说明。

图5为本公开实施例提供的另一种页面渲染方法的流程示意图。请参见图5，该方法可以包括：

S501、获取第一页面中的多个用户界面UI单元的单元信息。

其中，单元信息包括UI单元所在的图层、以及UI单元的显示位置。

需要说明的是，S501的执行过程可以参见S201的执行过程，此处不再进行赘述。

S502、根据多个UI单元的单元信息，确定多个UI单元的未被遮挡区域。

需要说明的是，S502的执行过程可以参见S202的执行过程，或者参见图4实施例所示的执行过程，此处不再进行赘述。

S503、分别对多个UI单元的未被遮挡区域进行图元拆分处理，得到多个图元。

下面，结合图6，对图元的拆分过程进行说明。

图6为本公开实施例提供的UI单元的示意图。请参见图6，UI单元1中包括5个图元，分别即为图元1、图元2、图元3、图元4和图元5。图元1为文本“特价秒杀9.9”，图元2为五角星，图元3为横线，图元4为小熊图片，图元5为矩形框。

假设在实际的UI页面中，UI单元1的右下角被其它图层的UI单元2遮挡，则UI单元1的未被遮挡区域为除右下角被遮挡区域外的其它区域。在UI单元1的为被遮挡区域中包括图元1、图元2、图元3和图元4。

S504、针对任意一个图元，根据图元的类型，生成图元的图元信息。

若图元的类型为线段类型，则确定图元的图元信息包括如下至少一种：起始点位置、结束点位置、线段宽度和线段颜色。

若图元的类型为矩形类型，则确定图元的图元信息包括如下至少一种：起始点位置、结束点位置、边框颜色、边框宽度、内部颜色和圆角角度。其中，起始点位置可以为矩形左上角位置，结束点位置可以为矩形右下角位置；或者，起始点位置可以为矩形右上角位置，结束点位置可以为矩形左下角位置。

若图元的类型为多边形类型，则确定图元的图元信息包括如下至少一种：多个顶点的顶点位置、边框颜色、边框宽度、内部颜色。

若图元的类型为文本类型，则确定图元的图元信息包括如下至少一种：文本内容、字体、字号、颜色、文字位置。

若图元的类型为图片类型，则确定图元的图元信息包括如下至少一种：图片、图片位置。

S505、根据多个图元的图元信息，生成多个图元对应的绘制指令。

可以按照多个图元所在图层从下到上的顺序，分别生成多个图元对应的绘制指令。

例如，假设UI界面中包括3个图层，分别为图层1、图层2和图层3，图层1位于底层、图层3位于顶层，则可以先生成图层1中图元对应的绘制指令，再生成图层2中图元对应的绘制指令，再生成图层3中图元对应的绘制指令。

S506、向GPU发送多个图元对应的绘制指令，以使GPU根据绘制指令绘制第一页面。

可以按照多个图元所在图层从下到上的顺序，分别向GPU发送多个图元对应的绘制指令。

例如，假设UI界面中包括3个图层，分别为图层1、图层2和图层3，图层1位于底层、图层3位于顶层，则可以先向GPU发送图层1中图元对应的绘制指令，向GPU发送图层2中图元对应的绘制指令，再向GPU发送图层3中图元对应的绘制指令。

S507、显示第一页面。

在图5所示的实施例中，当需要对第一页面进行渲染时，获取第一页面中各UI单元的单元信息，并根据各UI单元的单元信息确定各个UI单元中未被遮挡区域，再分别在各未被遮挡区域中拆分出多个图元，并根据各个图元的图元信息绘制第一页面，以及显示第一页面。在上述过程中，只需对页面中的图层、UI单元和图元进行处理即可实现页面的渲染，无需在应用程序内嵌入浏览器，提高了页面渲染效率。

图7为本公开实施例提供的一种页面渲染装置的结构示意图。请参见图7，该页面渲染装置700可以包括：

获取模块701，用于获取第一页面中的多个用户界面UI单元的单元信息，所述单元信息包括所述UI单元所在的图层、以及所述UI单元的显示位置；

第一确定模块702，用于根据多个UI单元的单元信息，确定所述多个UI单元的未被遮挡区域；

第二确定模块703，用于在所述多个UI单元的未被遮挡区域中确定多个图元的图元信息；

绘制模块704，用于根据所述多个图元的图元信息，绘制所述第一页面。

本公开实施例提供的页面渲染装置700可以执行上述方法实施例所示的技术方案，其实现原理以及有益效果类似，此处不再进行赘述。

一些可能的实现方式中，所述第一确定模块702包括：

第一确定单元，用于针对任意的第一UI单元，确定所述第一UI单元所在的第一图层；

第二确定模块，用于在所述第一图层为顶层的图层时，将所述第一UI单元的全部区域确定为所述第一UI单元的未被遮挡区域；

第三确定单元，用于在所述第一图层为非顶层的图层时，根据所述第一图层、所述第一UI单元的显示位置、至少一个第二图层中各UI单元的显示位置，确定所述第一UI单元的未被遮挡区域，所述第二图层位于所述第一图层之上。

一些可能的实现方式中，所述第三确定单元包括：

判断子单元，用于根据所述第一UI单元的显示位置和所述至少一个第二图层中各UI单元的显示位置，判断所述第二图层中是否存在UI单元的显示位置与所述第一UI单元的显示位置存在重合区域；

第一确定子单元，用于在所述判断子单元判断所述第二图层中存在UI单元的显示位置与所述第一UI单元的显示位置存在重合区域时，在所述至少一个第二图层中确定至少一个第二UI单元，并根据所述第一UI单元的显示位置和所述至少一个第二UI单元的显示位置，确定所述第一UI单元的未被遮挡区域，所述第二UI单元的显示位置与所述第一UI单元的显示位置存在重合区域；

第二确定子单元，用于在所述判断子单元判断所述第二图层中不存在UI单元的显示位置与所述第一UI单元的显示位置存在重合区域时，将所述第一UI单元的全部区域确定为所述第一UI单元的未被遮挡区域。

一些可能的实现方式中，所述第一确定子单元具体用于：

根据所述第一UI单元的显示位置和所述至少一个第二UI单元的显示位置，在所述第一UI单元中确定被所述至少一个第二UI单元遮挡的至少一个遮挡区域；

将所述第一UI单元中除所述至少一个遮挡区域之外的其它区域，确定为所述第一UI单元的未被遮挡区域。

一些可能的实现方式中，所述第二确定模块703包括：

拆分单元，用于分别对所述多个UI单元的未被遮挡区域进行图元拆分处理，得到多个图元；

第一生成单元，用于针对任意一个图元，根据所述图元的类型，生成所述图元的图元信息。

一些可能的实现方式中，所述第一生成单元具体用于：

若所述图元的类型为线段类型，则确定所述图元的图元信息包括如下至少一种：起始点位置、结束点位置、线段宽度和线段颜色；

若所述图元的类型为矩形类型，则确定所述图元的图元信息包括如下至少一种：起始点位置、结束点位置、边框颜色、边框宽度、内部颜色和圆角角度；

若所述图元的类型为多边形类型，则确定所述图元的图元信息包括如下至少一种：多个顶点的顶点位置、边框颜色、边框宽度、内部颜色；

若所述图元的类型为文本类型，则确定所述图元的图元信息包括如下至少一种：文本内容、字体、字号、颜色、文字位置；

若所述图元的类型为图片类型，则确定所述图元的图元信息包括如下至少一种：图片、图片位置。

一些可能的实现方式中，所述绘制模块704包括：

第二生成单元，用于根据所述多个图元的图元信息，生成所述多个图元对应的绘制指令；

发送单元，用于向GPU发送所述多个图元对应的绘制指令，以使所述GPU根据所述绘制指令绘制所述第一页面。

一些可能的实现方式中，所述第二生成单元具体用于，按照所述多个图元所在图层从下到上的顺序，分别生成所述多个图元对应的绘制指令；

所述发送单元具体用于，按照所述多个图元所在图层从下到上的顺序，分别向GPU发送所述多个图元对应的绘制指令。

图8为本公开实施例提供的另一种页面渲染装置的结构示意图。在图7所示实施例的基础上，请参见图8，页面渲染装置700还包括显示模块705，所述显示模块705用于：

在所述绘制模块704根据所述多个图元的图元信息，绘制所述第一页面之后，显示所述第一页面。

本公开实施例提供的页面渲染装置700可以执行上述方法实施例所示的技术方案，其实现原理以及有益效果类似，此处不再进行赘述。

根据本公开的实施例，本公开还提供了一种电子设备、一种可读存储介质和一种计算机程序产品。

根据本公开的实施例，本公开还提供了一种计算机程序产品，计算机程序产品包括：计算机程序，计算机程序存储在可读存储介质中，电子设备的至少一个处理器可以从可读存储介质读取计算机程序，至少一个处理器执行计算机程序使得电子设备执行上述任一实施例提供的方案。

图9示出了可以用来实施本公开的实施例的示例电子设备900的示意性框图。电子设备旨在表示各种形式的数字计算机，诸如，膝上型计算机、台式计算机、工作台、个人数字助理、服务器、刀片式服务器、大型计算机、和其它适合的计算机。电子设备还可以表示各种形式的移动装置，诸如，个人数字处理、蜂窝电话、智能电话、可穿戴设备和其它类似的计算装置。本文所示的部件、它们的连接和关系、以及它们的功能仅仅作为示例，并且不意在限制本文中描述的和/或者要求的本公开的实现。

如图9所示，设备900包括计算单元901，其可以根据存储在只读存储器(ROM)902中的计算机程序或者从存储单元908加载到随机访问存储器(RAM)903中的计算机程序，来执行各种适当的动作和处理。在RAM 903中，还可存储设备900操作所需的各种程序和数据。计算单元901、ROM 902以及RAM 903通过总线904彼此相连。输入/输出(I/O)接口905也连接至总线904。

设备900中的多个部件连接至I/O接口905，包括：输入单元906，例如键盘、鼠标等；输出单元907，例如各种类型的显示器、扬声器等；存储单元908，例如磁盘、光盘等；以及通信单元909，例如网卡、调制解调器、无线通信收发机等。通信单元909允许设备900通过诸如因特网的计算机网络和/或各种电信网络与其他设备交换信息/数据。

计算单元901可以是各种具有处理和计算能力的通用和/或专用处理组件。计算单元901的一些示例包括但不限于中央处理单元(CPU)、图形处理单元(GPU)、各种专用的人工智能(AI)计算芯片、各种运行机器学习模型算法的计算单元、数字信号处理器(DSP)、以及任何适当的处理器、控制器、微控制器等。计算单元901执行上文所描述的各个方法和处理，例如页面渲染方法。例如，在一些实施例中，页面渲染方法可被实现为计算机软件程序，其被有形地包含于机器可读介质，例如存储单元908。在一些实施例中，计算机程序的部分或者全部可以经由ROM 902和/或通信单元909而被载入和/或安装到设备900上。当计算机程序加载到RAM 903并由计算单元901执行时，可以执行上文描述的页面渲染方法的一个或多个步骤。备选地，在其他实施例中，计算单元901可以通过其他任何适当的方式(例如，借助于固件)而被配置为执行页面渲染方法。

本文中以上描述的系统和技术的各种实施方式可以在数字电子电路系统、集成电路系统、场可编程门阵列(FPGA)、专用集成电路(ASIC)、专用标准产品(ASSP)、芯片上系统的系统(SOC)、复杂可编程逻辑设备(CPLD)、计算机硬件、固件、软件、和/或它们的组合中实现。这些各种实施方式可以包括：实施在一个或者多个计算机程序中，该一个或者多个计算机程序可在包括至少一个可编程处理器的可编程系统上执行和/或解释，该可编程处理器可以是专用或者通用可编程处理器，可以从存储系统、至少一个输入装置、和至少一个输出装置接收数据和指令，并且将数据和指令传输至该存储系统、该至少一个输入装置、和该至少一个输出装置。

用于实施本公开的方法的程序代码可以采用一个或多个编程语言的任何组合来编写。这些程序代码可以提供给通用计算机、专用计算机或其他可编程数据处理装置的处理器或控制器，使得程序代码当由处理器或控制器执行时使流程图和/或框图中所规定的功能/操作被实施。程序代码可以完全在机器上执行、部分地在机器上执行，作为独立软件包部分地在机器上执行且部分地在远程机器上执行或完全在远程机器或服务器上执行。

在本公开的上下文中，机器可读介质可以是有形的介质，其可以包含或存储以供指令执行系统、装置或设备使用或与指令执行系统、装置或设备结合地使用的程序。机器可读介质可以是机器可读信号介质或机器可读储存介质。机器可读介质可以包括但不限于电子的、磁性的、光学的、电磁的、红外的、或半导体系统、装置或设备，或者上述内容的任何合适组合。机器可读存储介质的更具体示例会包括基于一个或多个线的电气连接、便携式计算机盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦除可编程只读存储器(EPROM或快闪存储器)、光纤、便捷式紧凑盘只读存储器(CD-ROM)、光学储存设备、磁储存设备、或上述内容的任何合适组合。

为了提供与用户的交互，可以在计算机上实施此处描述的系统和技术，该计算机具有：用于向用户显示信息的显示装置(例如，CRT(阴极射线管)或者LCD(液晶显示器)监视器)；以及键盘和指向装置(例如，鼠标或者轨迹球)，用户可以通过该键盘和该指向装置来将输入提供给计算机。其它种类的装置还可以用于提供与用户的交互；例如，提供给用户的反馈可以是任何形式的传感反馈(例如，视觉反馈、听觉反馈、或者触觉反馈)；并且可以用任何形式(包括声输入、语音输入或者、触觉输入)来接收来自用户的输入。

可以将此处描述的系统和技术实施在包括后台部件的计算系统(例如，作为数据服务器)、或者包括中间件部件的计算系统(例如，应用服务器)、或者包括前端部件的计算系统(例如，具有图形用户界面或者网络浏览器的用户计算机，用户可以通过该图形用户界面或者该网络浏览器来与此处描述的系统和技术的实施方式交互)、或者包括这种后台部件、中间件部件、或者前端部件的任何组合的计算系统中。可以通过任何形式或者介质的数字数据通信(例如，通信网络)来将系统的部件相互连接。通信网络的示例包括：局域网(LAN)、广域网(WAN)和互联网。

计算机系统可以包括客户端和服务器。客户端和服务器一般远离彼此并且通常通过通信网络进行交互。通过在相应的计算机上运行并且彼此具有客户端-服务器关系的计算机程序来产生客户端和服务器的关系。

应该理解，可以使用上面所示的各种形式的流程，重新排序、增加或删除步骤。例如，本发公开中记载的各步骤可以并行地执行也可以顺序地执行也可以不同的次序执行，只要能够实现本公开公开的技术方案所期望的结果，本文在此不进行限制。

上述具体实施方式，并不构成对本公开保护范围的限制。本领域技术人员应该明白的是，根据设计要求和其他因素，可以进行各种修改、组合、子组合和替代。任何在本公开的精神和原则之内所作的修改、等同替换和改进等，均应包含在本公开保护范围之内。

Claims (19)

1.一种页面渲染方法，包括：

在应用程序的第一页面的源代码中进行遍历查找，以获取所述第一页面的每个图层中的用户界面UI单元；

获取多个所述UI单元的单元信息，所述单元信息包括所述UI单元所在的图层、以及所述UI单元的显示位置；

根据所述多个UI单元的单元信息，确定所述多个UI单元的未被遮挡区域；

分别对所述多个UI单元的未被遮挡区域进行图元拆分处理，得到多个图元，所述图元为所述第一页面中的基本元素；

针对任意一个图元，根据所述图元的类型，生成所述图元的图元信息，所述图元的类型包若如下任一项：线段类型、矩形类型、多边形类型、文本类型，以及，图片类型；

根据所述多个图元的图元信息，绘制所述第一页面。

2.根据权利要求1所述的方法，其中，针对任意的第一UI单元；根据多个UI单元的单元信息，确定所述第一UI单元的未被遮挡区域，包括：

确定所述第一UI单元所在的第一图层；

若所述第一图层为顶层的图层，则将所述第一UI单元的全部区域确定为所述第一UI单元的未被遮挡区域；

若所述第一图层为非顶层的图层，则根据所述第一图层、所述第一UI单元的显示位置、至少一个第二图层中各UI单元的显示位置，确定所述第一UI单元的未被遮挡区域，所述第二图层位于所述第一图层之上。

3.根据权利要求2所述的方法，其中，所述根据所述第一图层、所述第一UI单元的显示位置、至少一个第二图层中各UI单元的显示位置，确定所述第一UI单元的未被遮挡区域，包括：

根据所述第一UI单元的显示位置和所述至少一个第二图层中各UI单元的显示位置，判断所述第二图层中是否存在UI单元的显示位置与所述第一UI单元的显示位置存在重合区域；

若是，则在所述至少一个第二图层中确定至少一个第二UI单元，并根据所述第一UI单元的显示位置和所述至少一个第二UI单元的显示位置，确定所述第一UI单元的未被遮挡区域，所述第二UI单元的显示位置与所述第一UI单元的显示位置存在重合区域；

若否，则将所述第一UI单元的全部区域确定为所述第一UI单元的未被遮挡区域。

4.根据权利要求3所述的方法，其中，所述根据所述第一UI单元的显示位置和所述至少一个第二UI单元的显示位置，确定所述第一UI单元的未被遮挡区域，包括：

根据所述第一UI单元的显示位置和所述至少一个第二UI单元的显示位置，在所述第一UI单元中确定被所述至少一个第二UI单元遮挡的至少一个遮挡区域；

将所述第一UI单元中除所述至少一个遮挡区域之外的其它区域，确定为所述第一UI单元的未被遮挡区域。

5.根据权利要求1所述的方法，其中，根据所述图元的类型，生成所述图元的图元信息，包括：

若所述图元的类型为线段类型，则确定所述图元的图元信息包括如下至少一种：起始点位置、结束点位置、线段宽度和线段颜色；

若所述图元的类型为矩形类型，则确定所述图元的图元信息包括如下至少一种：起始点位置、结束点位置、边框颜色、边框宽度、内部颜色和圆角角度；

若所述图元的类型为多边形类型，则确定所述图元的图元信息包括如下至少一种：多个顶点的顶点位置、边框颜色、边框宽度、内部颜色；

若所述图元的类型为文本类型，则确定所述图元的图元信息包括如下至少一种：文本内容、字体、字号、颜色、文字位置；

若所述图元的类型为图片类型，则确定所述图元的图元信息包括如下至少一种：图片、图片位置。

6.根据权利要求1-5任一项所述的方法，其中，所述根据所述多个图元的图元信息，绘制所述第一页面，包括：

根据所述多个图元的图元信息，生成所述多个图元对应的绘制指令；

向GPU发送所述多个图元对应的绘制指令，以使所述GPU根据所述绘制指令绘制所述第一页面。

7.根据权利要求6所述的方法，其中，所述根据所述多个图元的图元信息，生成所述多个图元对应的绘制指令，包括：

按照所述多个图元所在图层从下到上的顺序，分别生成所述多个图元对应的绘制指令；

所述向GPU发送所述多个图元对应的绘制指令，包括：

按照所述多个图元所在图层从下到上的顺序，分别向GPU发送所述多个图元对应的绘制指令。

8.根据权利要求1-5任一项所述的方法，其中，所述根据所述多个图元的图元信息，绘制所述第一页面之后，还包括：

显示所述第一页面。

9.一种页面渲染装置，包括：

获取模块，用于在应用程序的第一页面的源代码中进行遍历查找，以获取所述第一页面的每个图层中的用户界面UI单元，以及，获取所述UI单元的单元信息，所述单元信息包括所述UI单元所在的图层、以及所述UI单元的显示位置；

第一确定模块，用于根据多个UI单元的单元信息，确定所述多个UI单元的未被遮挡区域；

第二确定模块，用于在所述多个UI单元的未被遮挡区域中确定多个图元的图元信息，所述图元为所述第一页面中的基本元素；

绘制模块，用于根据所述多个图元的图元信息，绘制所述第一页面；

所述第二确定模块包括：

拆分单元，用于分别对所述多个UI单元的未被遮挡区域进行图元拆分处理，得到多个图元；

第一生成单元，用于针对任意一个图元，根据所述图元的类型，生成所述图元的图元信息，所述图元的类型包若如下任一项：线段类型、矩形类型、多边形类型、文本类型，以及，图片类型。

10.根据权利要求9所述的装置，其中，所述第一确定模块包括：

第一确定单元，用于针对任意的第一UI单元，确定所述第一UI单元所在的第一图层；

第二确定模块，用于在所述第一图层为顶层的图层时，将所述第一UI单元的全部区域确定为所述第一UI单元的未被遮挡区域；

第三确定单元，用于在所述第一图层为非顶层的图层时，根据所述第一图层、所述第一UI单元的显示位置、至少一个第二图层中各UI单元的显示位置，确定所述第一UI单元的未被遮挡区域，所述第二图层位于所述第一图层之上。

11.根据权利要求10所述的装置，其中，所述第三确定单元包括：

判断子单元，用于根据所述第一UI单元的显示位置和所述至少一个第二图层中各UI单元的显示位置，判断所述第二图层中是否存在UI单元的显示位置与所述第一UI单元的显示位置存在重合区域；

第一确定子单元，用于在所述判断子单元判断所述第二图层中存在UI单元的显示位置与所述第一UI单元的显示位置存在重合区域时，在所述至少一个第二图层中确定至少一个第二UI单元，并根据所述第一UI单元的显示位置和所述至少一个第二UI单元的显示位置，确定所述第一UI单元的未被遮挡区域，所述第二UI单元的显示位置与所述第一UI单元的显示位置存在重合区域；

第二确定子单元，用于在所述判断子单元判断所述第二图层中不存在UI单元的显示位置与所述第一UI单元的显示位置存在重合区域时，将所述第一UI单元的全部区域确定为所述第一UI单元的未被遮挡区域。

12.根据权利要求11所述的装置，其中，所述第一确定子单元具体用于：

根据所述第一UI单元的显示位置和所述至少一个第二UI单元的显示位置，在所述第一UI单元中确定被所述至少一个第二UI单元遮挡的至少一个遮挡区域；

将所述第一UI单元中除所述至少一个遮挡区域之外的其它区域，确定为所述第一UI单元的未被遮挡区域。

13.根据权利要求9所述的装置，其中，所述第一生成单元具体用于：

若所述图元的类型为线段类型，则确定所述图元的图元信息包括如下至少一种：起始点位置、结束点位置、线段宽度和线段颜色；

若所述图元的类型为矩形类型，则确定所述图元的图元信息包括如下至少一种：起始点位置、结束点位置、边框颜色、边框宽度、内部颜色和圆角角度；

若所述图元的类型为多边形类型，则确定所述图元的图元信息包括如下至少一种：多个顶点的顶点位置、边框颜色、边框宽度、内部颜色；

若所述图元的类型为文本类型，则确定所述图元的图元信息包括如下至少一种：文本内容、字体、字号、颜色、文字位置；

若所述图元的类型为图片类型，则确定所述图元的图元信息包括如下至少一种：图片、图片位置。

14.根据权利要求9-13任一项所述的装置，其中，所述绘制模块包括：

第二生成单元，用于根据所述多个图元的图元信息，生成所述多个图元对应的绘制指令；

发送单元，用于向GPU发送所述多个图元对应的绘制指令，以使所述GPU根据所述绘制指令绘制所述第一页面。

15.根据权利要求14所述的装置，其中，

所述第二生成单元具体用于，按照所述多个图元所在图层从下到上的顺序，分别生成所述多个图元对应的绘制指令；

所述发送单元具体用于，按照所述多个图元所在图层从下到上的顺序，分别向GPU发送所述多个图元对应的绘制指令。

16.根据权利要求9-13任一项所述的装置，其中，所述装置还包括显示模块，所述显示模块用于：

在所述绘制模块根据所述多个图元的图元信息，绘制所述第一页面之后，显示所述第一页面。

17. 一种电子设备，包括：

至少一个处理器；以及

与所述至少一个处理器通信连接的存储器；其中，

所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行权利要求1至8中任一项所述的方法。

18.一种存储有计算机指令的非瞬时计算机可读存储介质，其中，所述计算机指令用于使所述计算机执行根据权利要求1至8中任一项所述的方法。

19.一种计算机程序产品，包括计算机程序，该计算机程序被处理器执行时实现权利要求1至8中任一项所述的方法。