CN114625997A - 页面渲染方法及装置、电子设备、计算机可读介质 - Google Patents

Abstract

本公开提供一种页面渲染方法，包括：根据目标页面的渲染数据生成待渲染视图，其中，所述待渲染视图中包括所述目标页面中的多个控件；对所述待渲染视图进行渲染。本公开还提供一种页面渲染装置、一种电子设备、一种计算机可读介质。

Description

页面渲染方法及装置、电子设备、计算机可读介质

技术领域

本公开实施例涉及计算机技术领域，特别涉及一种页面渲染方法、一种页面渲染装置、一种电子设备、一种计算机可读介质。

背景技术

当前，整个世界正在加速迈进以比特为DNA的数字化时代，以智能终端为载体的应用程序(APP，Application)技术也在发生剧烈的变革，带来了传播时间上的“提速”和传播空间上的“延展”。APP技术充分发挥移动互联网、无线局域网的延伸性、立体性、融合性等特征，引领信息传播向互动化、虚拟化、多媒体化发展。常用的APP大致可分为工具、社交、休闲娱乐、行业应用、社交五大类，随着终端硬件性能的不断增强，APP性能也在不断提升。

但是，终端屏幕展示的APP页面的内容越来越复杂，必然会消耗更多的中央处理器(CPU，Central Processing Unit)、图形处理器(GPU，Graphics Processing Unit)等硬件资源。APP性能与终端硬件性能相互制约，严重影响用户体验。

发明内容

本公开实施例提供一种页面渲染方法、一种页面渲染装置、一种电子设备、一种计算机可读介质。

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

根据目标页面的渲染数据生成待渲染视图，其中，所述待渲染视图中包括所述目标页面中的多个控件；

对所述待渲染视图进行渲染。

在一些实施例中，在根据目标页面的渲染数据生成待渲染视图的步骤之前，所述页面渲染方法还包括：

响应于所述目标页面对应的渲染指令，获取所述渲染数据，其中，所述渲染数据包括所述目标页面中各个所述控件的形状信息和位置信息，所述位置信息表征所述控件在所述目标页面中的位置。

在一些实施例中，根据目标页面的渲染数据生成待渲染视图的步骤包括：

根据各个所述控件的形状信息，分别绘制各个所述控件的控件视图；

根据各个所述控件的控件视图和各个所述控件的位置信息，生成所述待渲染视图。

在一些实施例中，所述控件的形状信息包括所述控件的尺寸和形状数据，所述形状数据表征所述控件的形状；根据各个所述控件的形状信息，分别绘制各个所述控件的控件视图的步骤包括：

对于任意一个所述控件，创建图片视图；

根据所述控件的形状数据，利用贝塞尔曲线绘制所述控件的初始视图；

根据所述控件的尺寸调整所述初始视图的大小并设置所述初始视图的样式，生成所述控件的控件视图。

在一些实施例中，所述控件为用户界面控件、标签控件、文本输入控件、按钮控件、图标控件中任意一者。

在一些实施例中，对所述待渲染视图进行渲染的步骤包括：

将所述待渲染视图提交到图形处理器进行渲染。

在一些实施例中，所述页面渲染方法还包括：

确定需要离屏渲染的离屏渲染页面；

对所述离屏渲染页面进行离屏渲染，得到离屏渲染视图；

将所述离屏渲染视图存储到离屏缓冲区中。

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

绘图模块，用于根据目标页面的渲染数据生成待渲染视图，其中，所述待渲染视图中包括所述目标页面中的多个控件；

渲染模块，用于对所述待渲染视图进行渲染。

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

一个或多个处理器；

存储装置，其上存储有一个或多个程序，当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现本公开实施例第一方面中所述页面渲染方法；

一个或多个I/O接口，连接在所述处理器与存储器之间，配置为实现所述处理器与存储器的信息交互。

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

本公开实施例提供一种页面渲染方法、能够执行该页面渲染方法的页面渲染装置、电子设备以及存储有能够实现该页面渲染方法的计算机程序的计算机可读介质。在本公开实施例中，根据应用程序页面的渲染数据生成包含组成页面的多个控件的待渲染视图，然后对待渲染视图统一进行渲染，无需触发离屏渲染，从而能够降低离屏渲染的使用率，有利于节约内存资源、优化内存使用、提高渲染效率，进而提升了用户体验。

附图说明

附图用来提供对本公开实施例的进一步理解，并且构成说明书的一部分，与本公开的实施例一起用于解释本公开，并不构成对本公开的限制。通过参考附图对详细示例实施例进行描述，以上和其它特征和优点对本领域技术人员将变得更加显而易见，在附图中：

图1是离屏渲染的示意图；

图2是本公开实施例中一种页面渲染方法的流程图；

图3是本公开实施例中另一种页面渲染方法中部分步骤的流程图；

图4是本公开实施例中一种页面渲染装置的组成框图；

图5为本公开实施例中一种电子设备的组成框图。

具体实施方式

为使本领域的技术人员更好地理解本公开的技术方案，下面结合附图对本公开提供的页面渲染方法、页面渲染装置、电子设备、计算机可读介质进行详细描述。

在下文中将参考附图更充分地描述示例实施例，但是所述示例实施例可以以不同形式来体现且不应当被解释为限于本文阐述的实施例。反之，提供这些实施例的目的在于使本公开透彻和完整，并将使本领域技术人员充分理解本公开的范围。

在不冲突的情况下，本公开各实施例及实施例中的各特征可相互组合。

如本文所使用的，术语“和/或”包括一个或多个相关列举条目的任何和所有组合。

本文所使用的术语仅用于描述特定实施例，且不意欲限制本公开。如本文所使用的，单数形式“一个”和“该”也意欲包括复数形式，除非上下文另外清楚指出。还将理解的是，当本说明书中使用术语“包括”和/或“由……制成”时，指定存在所述特征、整体、步骤、操作、元件和/或组件，但不排除存在或添加一个或多个其它特征、整体、步骤、操作、元件、组件和/或其群组。

除非另外限定，否则本文所用的所有术语(包括技术和科学术语)的含义与本领域普通技术人员通常理解的含义相同。还将理解，诸如那些在常用字典中限定的那些术语应当被解释为具有与其在相关技术以及本公开的背景下的含义一致的含义，且将不解释为具有理想化或过度形式上的含义，除非本文明确如此限定。

图1是离屏渲染的示意图。在直接渲染时，如果要在显示屏上显示内容，至少需要一块与屏幕像素数据量一样大的帧缓冲区(Frame Buffer)，用于存储像素数据，FrameBuffer同时也是GPU存储渲染结果的地方。而如果因为一些限制，GPU无法将渲染结果直接写入Frame Buffer，则需要先另外创建离屏缓冲区(Offscreen Buffer)，将提前渲染好的内容存储在Offscreen Buffer，等到适当时机再对Offscreen Buffer中存储的渲染好的内容进行进阶渲染，并将渲染结果写入Frame Buffer中。

经本公开的发明人研究发现，在离屏渲染过程中，不仅需要提前对APP页面内容中的一部分进行渲染并将渲染结果存储到Offscreen Buffer中，还需要在必要时对Offscreen Buffer和Frame Buffer进行内容切换，会导致渲染的处理时间延长；而且，创建Offscreen Buffer需要占用内存空间，如果需要进行大量的离屏渲染，对增加内存压力；而若限制Offscreen Buffer的大小，例如限制Offscreen Buffer不能超过屏幕总像素的2.5倍，当存在大量离屏渲染的内容时，容易出现掉帧。离屏渲染的上述问题严重影响用户体验。

有鉴于此，第一方面，参照图2，本公开实施例提供一种页面渲染方法，包括：

S1、根据目标页面的渲染数据生成待渲染视图，其中，所述待渲染视图中包括所述目标页面中的多个控件；

S2、对所述待渲染视图进行渲染。

在本公开实施例中，目标页面为终端中应用程序的页面。本公开实施例对应用程序不做特殊限定。例如应用程序可以是社交APP、电商APP、游戏APP等。本公开实施例对于终端的操作系统不做特殊限定。例如，操作系统可以是安卓、IOS等。

在本公开实施例中，目标页面包括多个控件，多个控件组成目标页面。本公开实施例对于目标页面中的控件不做特殊限定。例如，控件包括用户界面(UI，User Interface)控件、标签(Label)控件、文本输入(Textfield)控件、按钮(Button)控件、图标(Icon)控件等。本公开实施例对目标页面中的控件的数量也不做特殊限定。在一些实施例中，页面越复杂，包含的控件数量和控件种类越多。

在本公开实施例中，控件可以包含透明度效果、遮罩(mask)效果、阴影效果、圆角效果中的至少一种；控件也可以不包含透明度效果、遮罩(mask)效果、阴影效果、圆角效果中的任意一种。本公开实施例对此不做特殊限定。

需要说明的是，在使用离屏渲染的场景中，若目标页面中的控件包含透明度效果、遮罩(mask)效果、阴影效果、圆角效果中的至少一种，则会触发离屏渲染；并且在对控件进行离屏渲染时，针对每一个控件都单独进行渲染，得到各个控件的渲染结果并存储在Offscreen Buffer中，在合适的时机，从Offscreen Buffer中读取各个控件的渲染结果整合进一步渲染，得到页面的渲染结果，并存储在Frame Buffer中。在本公开实施例中，通过执行步骤S1，无论目标页面中的控件是否包含透明度效果、遮罩(mask)效果、阴影效果、圆角效果等，根据各个控件生成目标页面的待渲染视图，然后通过执行步骤S2对待渲染视图统一进行渲染。也就是说，通过步骤S1和S2，在对目标页面进行渲染时，不需要离屏渲染。

在一些实施例中，待渲染视图会被直接提交到GPU进行渲染。

本公开实施例提供的页面渲染方法，能够根据应用程序页面的渲染数据生成包含组成页面的多个控件的待渲染视图，然后对待渲染视图统一进行渲染，无需触发离屏渲染，从而能够降低离屏渲染的使用率，有利于节约内存资源、优化内存使用、提高渲染效率，进而提升了用户体验。

在一些实施例中，参照图3，在步骤S1之前，所述页面渲染方法还包括：

S3、响应于所述目标页面对应的渲染指令，获取所述渲染数据，其中，所述渲染数据包括所述目标页面中各个所述控件的形状信息和位置信息，所述位置信息表征所述控件在所述目标页面中的位置。

在本公开实施例中，渲染指令可以是APP启动时生成的，也可以是APP页面切换时生成的。本公开实施例对此不做特殊限定。

在本公开实施例中，渲染指令可以是离屏渲染指令，也可以是直接渲染指令。本公开实施例对此不做特殊限定。

在一些实施例中，若目标页面中的控件包含透明度效果、遮罩(mask)效果、阴影效果、圆角效果中的至少一种，则会触发离屏渲染，生成离屏渲染指令。在本实施例中，响应于离屏渲染指令并不进行离屏渲染，而是通过步骤S3获取渲染数据，并通过步骤S1和S2对目标页面同一进行渲染。从而能够节约内存资源，提高渲染效率。

本公开实施例对于渲染数据不做特殊限定。在一些实施例中，渲染数据包括目标页面中各个控件的形状信息和位置信息。在一些实施例中，根据控件的形状信息绘制控件，并根据各个控件的位置信息确定各个控件的位置关系，从而生成目标页面的待渲染视图。

在一些实施例中，根据目标页面的渲染数据生成待渲染视图的步骤包括：

根据各个所述控件的形状信息，分别绘制各个所述控件的控件视图；

根据各个所述控件的控件视图和各个所述控件的位置信息，生成所述待渲染视图。

需要说明的是，在本公开实施例中，控件的形状信息可以表征控件的外形，例如控件是否为圆角；也可以表征控件的效果，例如控件的透明度、是否有遮罩效果、是否有阴影效果等。本公开实施例对此不做特殊限定。

在本公开实施例中，各个控件的控件视图根据相互之间的位置关系叠加、组合，得到目标页面的待渲染视图。

本公开实施例对于如何绘制控件的控件视图不做特殊限定。

在一些实施例中，所述控件的形状信息包括所述控件的尺寸和形状数据，所述形状数据表征所述控件的形状；根据各个所述控件的形状信息，分别绘制各个所述控件的控件视图的步骤包括：

对于任意一个所述控件，创建图片视图；

根据所述控件的形状数据，利用贝塞尔曲线绘制所述控件的初始视图；

根据所述控件的尺寸调整所述初始视图的大小并设置所述初始视图的样式，生成所述控件的控件视图。

需要说明的是，在本公开实施例中，图片视图(Imageview)是使绘制的图像得以显示的容器。在本公开实施例中，利用贝塞尔曲线绘制的控件的初始视图具有圆角效果。

还需要说明的是，在本公开实施例中，设置初始视图的样式是指，设置控件的遮罩效果、透明度、阴影效果等。

本公开实施例对于组成目标页面的控件不做特殊限定。

在一些实施例中，所述控件为用户界面控件、标签控件、文本输入控件、按钮控件、图标控件中任意一者。

在一些实施例中，待渲染视图直接提交到GPU中进行渲染，无需占用CPU和内存资源，能够节约硬件资源，提高渲染效率。

在一些实施例中，对所述待渲染视图进行渲染的步骤包括：

将所述待渲染视图提交到图形处理器进行渲染。

在一些实施例中，可以主动选择进行离屏渲染的页面，对该页面进行离屏渲染，并通过Offscreen Buffer和Frame Buffer存储渲染结果。例如，当页面较复杂时，可以对该页面进行离屏渲染，并将渲染结果存储在Offscreen Buffer中；当需要加载该页面时，从Offscreen Buffer中读取渲染结果并进一步渲染。

相应地，在一些实施例中，所述页面渲染方法还包括：

确定需要离屏渲染的离屏渲染页面；

对所述离屏渲染页面进行离屏渲染，得到离屏渲染视图；

将所述离屏渲染视图存储到离屏缓冲区中。

在本公开实施例中，对特定页面进行离屏渲染，不会占用过多的内存空间，而且能够避免对该特定页面反复进行渲染，从而能够提升渲染效率。

第二方面，参照图4，本公开实施例提供一种页面渲染装置，包括：

绘图模块101，用于根据目标页面的渲染数据生成待渲染视图，其中，所述待渲染视图中包括所述目标页面中的多个控件；

渲染模块102，用于对所述待渲染视图进行渲染。

在一些实施例中，页面渲染装置还包括：

指令获取模块，用于响应于所述目标页面对应的渲染指令，获取所述渲染数据，其中，所述渲染数据包括所述目标页面中各个所述控件的形状信息和位置信息，所述位置信息表征所述控件在所述目标页面中的位置。

在一些实施例中，所述绘图模块包括绘图单元和整合单元；

所述绘图单元用于根据各个所述控件的形状信息，分别绘制各个所述控件的控件视图；

所述整合单元用于根据各个所述控件的控件视图和各个所述控件的位置信息，生成所述待渲染视图。

在一些实施例中，所述控件的形状信息包括所述控件的尺寸和形状数据，所述形状数据表征所述控件的形状；

对于任意一个所述控件，所述绘图单元用于创建图片视图；根据所述控件的形状数据，利用贝塞尔曲线绘制所述控件的初始视图；根据所述控件的尺寸调整所述初始视图的大小并设置所述初始视图的样式，生成所述控件的控件视图。

在一些实施例中，所述目标页面中的多个控件包括所述目标界面中用户界面、标签、文本框、按钮、图标中的至少两者。

在一些实施例中，所述渲染单元包括图形处理器，所述渲染单元通过图形处理器对待渲染视图进行渲染。

在一些实施例中，页面渲染装置还包括离屏渲染模块，用于确定需要离屏渲染的离屏渲染页面；对所述离屏渲染页面进行离屏渲染，得到离屏渲染视图；将所述离屏渲染视图存储到离屏缓冲区中。

第三方面，参照图5，本公开实施例提供一种电子设备，其包括：

一个或多个处理器201；

存储器202，其上存储有一个或多个程序，当一个或多个程序被一个或多个处理器执行，使得一个或多个处理器实现本公开实施例第一方面提供的页面渲染方法；

一个或多个I/O接口203，连接在处理器与存储器之间，配置为实现处理器与存储器的信息交互。

其中，处理器201为具有数据处理能力的器件，其包括但不限于中央处理器(CPU)等；存储器202为具有数据存储能力的器件，其包括但不限于随机存取存储器(RAM，更具体如SDRAM、DDR等)、只读存储器(ROM)、带电可擦可编程只读存储器(EEPROM)、闪存(FLASH)；I/O接口(读写接口)203连接在处理器201与存储器202间，能实现处理器201与存储器202的信息交互，其包括但不限于数据总线(Bus)等。

在一些实施例中，处理器201、存储器202和I/O接口203通过总线204相互连接，进而与计算设备的其它组件连接。

第四方面，本公开实施例提供一种计算机可读介质，其上存储有计算机程序，程序被处理器执行时实现本公开实施例第一方面提供的页面渲染方法。

为了使本领域技术人员能够更清楚地理解本公开实施例提供的技术方案，下面通过具体的实施例，对本公开实施例提供的技术方案进行详细说明：

实施例

本实施例以IOS为例进行说明。但是，本实施例并不限于IOS，本实施例中的终端可以是运行任意操作系统的终端。

在本实施例中，使用CAShapeLayer和UIBezierPath为目标页面中的控件设置圆角。CAShapeLayer继承于CALayer，CAShapeLayer可以使用CALayer所有属性值。

使用CAShapeLayer和UIBezierPath为目标页面中的控件设置圆角，生成待渲染视图，然后将待渲染视图直接提交GPU进行渲染，使用CPU进行渲染的View的DrawRectView方法，能够降低内存消耗，提高渲染效率。

在本实施例中，绘制各个所述控件的控件视图的过程包括：创建图片视图；使用贝塞尔曲线绘制控件的初始视图；设置初始视图的大小；设置初始视图的样式；结束画图。

下面具体举例说明。

绘制用户界面控件UIImageView包括：

创建图片视图：

UIImageView*wzImageView＝[[UIImageViewalloc]initWithFrame:CG RectMake(x,y,width,height)]；

wzImageView.image＝[UIImage imageNamed:@"wzImg"]；

使用贝塞尔曲线绘制用户界面控件UIImageView的初始视图：

UIBezierPath*wzMaskPath＝[UIBezierPath bezierPathWithRoundedRect:wzImageView.boundsbyRoundingCorners:UIRectCornerAllCornerscornerRad ii:wzImageView.bounds.size]；

CAShapeLayer*wzMaskLayer＝[[CAShapeLayer alloc]init]；

设置初始视图的大小：

wzMaskLayer.frame＝wzImageView.bounds；

设置初始视图的样式：

wzMaskLayer.path＝wzMaskPath.CGPath；

wzImageView.layer.mask＝maskLayer；

结束画图：

[self.view addSubview:wzImageView]。

绘制标签控件UILabel包括：

创建图片视图：

UILabel*wzLabel＝[[UILabelalloc]initWithFrame:CGRectMake(x,y,width,height)]；

wzLabel.text＝@"wzText"；

使用贝塞尔曲线绘制标签控件UILabel的初始视图：

UIBezierPath*wzMaskPath＝[UIBezierPathbezierPathWithRoundedRect:wzLabel.boundsbyRoundingCorners:UIRectCornerAllCornerscornerRadii:wzLabel.bounds.size]；

CAShapeLayer*wzMaskLayer＝[[CAShapeLayer alloc]init]；

设置初始视图的大小：

wzMaskLayer.frame＝wzLabel.bounds；

设置初始视图的样式：

wzMaskLayer.path＝wzMaskPath.CGPath；

wzLabel.layer.mask＝wzMaskLayer；

结束画图：

[self.view addSubview:wzLabel]。

绘制文本输入控件UITextField包括：

创建图片视图：

UITextField*wzTF＝[[UIImageViewalloc]initWithFrame:CGRectMake(x,y,width,height)]；

wzTF.text＝@"wzTF"；

使用贝塞尔曲线绘制文本输入控件UITextField的初始视图：

UIBezierPath*wzMaskPath＝[UIBezierPathbezierPathWithRoundedRect:wzTF.boundsbyRoundingCorners:UIRectCornerAllCornerscornerRadii:wzTF.bounds.size]；

CAShapeLayer*wzMaskLayer＝[[CAShapeLayer alloc]init]；

设置初始视图的大小：

wzMaskLayer.frame＝wzTF.bounds；

设置初始视图的样式：

wzMaskLayer.path＝wzMaskPath.CGPath；

wzTF.layer.mask＝wzMaskLayer；

结束画图：

[self.view addSubview:wzTF]。

绘制按钮控件UIButton包括：

创建图片视图：

UIButton*wzBtn＝[[UIImageViewalloc]initWithFrame:CGRectMake(x,y,width,height)]；

[wzBtnsetImage:[UIImageimageNamed:@"wzImg"]forState:UIControlStateNormal]；

使用贝塞尔曲线绘制按钮控件UIButton的初始视图：

UIBezierPath*wzMaskPath＝[UIBezierPathbezierPathWithRoundedRect:wzBtn.boundsbyRoundingCorners:UIRectCornerAllCorners cornerRadii:wzBtn.bounds.size]；

CAShapeLayer*wzMaskLayer＝[[CAShapeLayer alloc]init]；

设置初始视图的大小：

wzMaskLayer.frame＝wzBtn.bounds；

设置初始视图的样式：

wzMaskLayer.path＝wzMaskPath.CGPath；

wzBtn.layer.mask＝wzMaskLayer；

结束画图：

[self.view addSubview:wzBtn]。

绘制文本输入控件UITextView包括：

创建图片视图：

UITextView*wzTV＝[[UILabelalloc]initWithFrame:CGRectMake(x,y,width,height)]；

wzTV.text＝@"wzTV"；

使用贝塞尔曲线绘制文本输入控件UITextView的初始视图：

UIBezierPath*wzMaskPath＝[UIBezierPathbezierPathWithRoundedRect:wzTV.boundsbyRoundingCorners:UIRectCornerAllCornerscornerRadii:wzTV.bounds.size]；

CAShapeLayer*wzMaskLayer＝[[CAShapeLayer alloc]init]；

设置初始视图的大小：

wzMaskLayer.frame＝wzTV.bounds；

设置初始视图的样式：

wzMaskLayer.path＝wzMaskPath.CGPath；

wzTV.layer.mask＝wzMaskLayer；

结束画图：

[self.view addSubview:wzTV]。

本领域普通技术人员可以理解，上文中所公开方法中的全部或某些步骤、系统、装置中的功能模块/单元可以被实施为软件、固件、硬件及其适当的组合。在硬件实施方式中，在以上描述中提及的功能模块/单元之间的划分不一定对应于物理组件的划分；例如，一个物理组件可以具有多个功能，或者一个功能或步骤可以由若干物理组件合作执行。某些物理组件或所有物理组件可以被实施为由处理器，如中央处理器、数字信号处理器或微处理器执行的软件，或者被实施为硬件，或者被实施为集成电路，如专用集成电路。这样的软件可以分布在计算机可读介质上，计算机可读介质可以包括计算机存储介质(或非暂时性介质)和通信介质(或暂时性介质)。如本领域普通技术人员公知的，术语计算机存储介质包括在用于存储信息(诸如计算机可读指令、数据结构、程序模块或其它数据)的任何方法或技术中实施的易失性和非易失性、可移除和不可移除介质。计算机存储介质包括但不限于RAM、ROM、EEPROM、闪存或其它存储器技术、CD-ROM、数字多功能盘(DVD)或其它光盘存储、磁盒、磁带、磁盘存储或其它磁存储装置、或者可以用于存储期望的信息并且可以被计算机访问的任何其它的介质。此外，本领域普通技术人员公知的是，通信介质通常包含计算机可读指令、数据结构、程序模块或者诸如载波或其它传输机制之类的调制数据信号中的其它数据，并且可包括任何信息递送介质。

本文已经公开了示例实施例，并且虽然采用了具体术语，但它们仅用于并仅应当被解释为一般说明性含义，并且不用于限制的目的。在一些实例中，对本领域技术人员显而易见的是，除非另外明确指出，否则可单独使用与特定实施例相结合描述的特征、特性和/或元素，或可与其它实施例相结合描述的特征、特性和/或元件组合使用。因此，本领域技术人员将理解，在不脱离由所附的权利要求阐明的本公开的范围的情况下，可进行各种形式和细节上的改变。

Claims (10)

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

根据目标页面的渲染数据生成待渲染视图，其中，所述待渲染视图中包括所述目标页面中的多个控件；

对所述待渲染视图进行渲染。

2.根据权利要求1所述的页面渲染方法，其中，在根据目标页面的渲染数据生成待渲染视图的步骤之前，所述页面渲染方法还包括：

响应于所述目标页面对应的渲染指令，获取所述渲染数据，其中，所述渲染数据包括所述目标页面中各个所述控件的形状信息和位置信息，所述位置信息表征所述控件在所述目标页面中的位置。

3.根据权利要求2所述的页面渲染方法，其中，根据目标页面的渲染数据生成待渲染视图的步骤包括：

根据各个所述控件的形状信息，分别绘制各个所述控件的控件视图；

根据各个所述控件的控件视图和各个所述控件的位置信息，生成所述待渲染视图。

4.根据权利要求3所述的页面渲染方法，其中，所述控件的形状信息包括所述控件的尺寸和形状数据，所述形状数据表征所述控件的形状；根据各个所述控件的形状信息，分别绘制各个所述控件的控件视图的步骤包括：

对于任意一个所述控件，创建图片视图；

根据所述控件的形状数据，利用贝塞尔曲线绘制所述控件的初始视图；

根据所述控件的尺寸调整所述初始视图的大小并设置所述初始视图的样式，生成所述控件的控件视图。

5.根据权利要求1至4中任意一项所述的页面渲染方法，其中，所述控件为用户界面控件、标签控件、文本输入控件、按钮控件、图标控件中任意一者。

6.根据权利要求1至4中任意一项所述的页面渲染方法，其中，对所述待渲染视图进行渲染的步骤包括：

将所述待渲染视图提交到图形处理器进行渲染。

7.根据权利要求1至4中任意一项所述的页面渲染方法，其中，所述页面渲染方法还包括：

确定需要离屏渲染的离屏渲染页面；

对所述离屏渲染页面进行离屏渲染，得到离屏渲染视图；

将所述离屏渲染视图存储到离屏缓冲区中。

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

绘图模块，用于根据目标页面的渲染数据生成待渲染视图，其中，所述待渲染视图中包括所述目标页面中的多个控件；

渲染模块，用于对所述待渲染视图进行渲染。

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

一个或多个处理器；

存储装置，其上存储有一个或多个程序，当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现根据权利要求1至7中任意一项所述页面渲染方法；

一个或多个I/O接口，连接在所述处理器与存储器之间，配置为实现所述处理器与存储器的信息交互。

10.一种计算机可读介质，其上存储有计算机程序，所述程序被处理器执行时实现根据权利要求1至7中任意一项所述的页面渲染方法。

Images