一种页面渲染方法、装置、计算机设备及存储介质

技术领域

本公开涉及页面显示技术领域，具体而言，涉及一种页面渲染方法、装置、计算机设备及存储介质。

背景技术

Flutter是目前被广泛使用的一种自渲染跨平台UI(User Interface，用户界面)框架，利用Flutter框架可以实现同层渲染，即将系统原生页面嵌入到自渲染跨平台框架中。

由于同层渲染需要将两种UI框架下的页面融合到一起进行渲染，因此容易出现性能稳定性较差问题，例如占用内存较高或者流畅性较低。

发明内容

本公开实施例至少提供一种页面渲染方法、装置、计算机设备及存储介质。

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

基于在待显示页面中组件之间的层级关系和相对位置关系，生成所述待显示页面对应的图层树；所述组件包括系统原生组件和跨平台自绘组件；所述图层树用于表征所述系统原生组件对应的图层和跨平台自绘组件对应的图层之间的层级关系和相对位置关系，以及不同图层对应的绘制指令；

将所述图层树中的所述绘制指令转换成与各所述组件分别对应的目标绘制数据，并进行缓存；所述目标绘制数据为渲染线程能够渲染的目标格式的绘制数据；

调用目标回调接口，按照所述图层树中的所述层级关系，依次从所述缓存中读取各所述组件对应的目标绘制数据，并基于所述目标绘制数据和所述图层之间的相对位置关系，渲染所述待显示页面。

一种可选的实施方式中，所述按照所述图层树中的所述层级关系，依次读取各所述组件对应的目标绘制数据，包括：

基于所述图层树按照自上而下的层级顺序依次读取各所述组件对应的目标绘制数据。

一种可选的实施方式中，所述按照所述图层树中的所述层级关系，依次读取各所述组件对应的目标绘制数据，包括：

按照所述图层树中各所述图层之间的层级关系，以及所述系统原生组件对应的图层和跨平台自绘组件对应的图层之间的重叠关系，确定各组件对应的目标绘制数据的读取优先级顺序；

按照所述读取优先级顺序依次读取各所述组件对应的目标绘制数据。

一种可选的实施方式中，所述按照所述图层树中各所述图层之间的层级关系，以及所述系统原生组件对应的图层和跨平台自绘组件对应的图层之间的重叠关系，确定各组件对应的目标绘制数据的读取优先级顺序，包括：

当存在第一跨平台自绘组件，所述第一跨平台自绘组件对应的图层与所述系统原生组件对应的图层存在重叠、且位于所述系统原生组件对应的图层的上层时，确定所述第一跨平台自绘组件对应的目标绘制数据的读取优先级，高于所述系统原生组件对应的目标绘制数据的读取优先级；

当存在第二跨平台自绘组件和第三跨平台自绘组件，所述第二跨平台自绘组件对应的图层位于所述系统原生组件对应的图层的下层、所述第三跨平台自绘组件对应的图层与所述系统原生组件对应的图层不重叠且位于所述系统原生组件对应的图层的上层，确定所述系统原生组件对应的目标绘制数据的读取优先级，高于所述第二跨平台自绘组件和所述第三跨平台自绘组件对应的目标绘制数据的读取优先级。

一种可选的实施方式中，所述将所述图层树中的所述绘制指令转换成与各所述组件分别对应的目标绘制数据，包括：

按照用户从多种绘制模式中选择的目标绘制模式，将所述图层树中的所述绘制指令转换成与各所述组件分别对应的目标绘制数据；其中，所述目标绘制数据的目标格式与用户选择的目标绘制模式对应；所述多种绘制模式包括图像模式和纹理模式。

一种可选的实施方式中，所述按照用户选择的目标绘制模式，将所述图层树中的所述绘制指令转换成与各所述组件分别对应的目标绘制数据，包括：

在用户选择的绘制模式为图像模式的情况下，基于所述图层树中的各个所述绘制指令，生成用于绘制各个组件的图像绘制指令列表；所述图像绘制指令列表中包含能够被图像处理器GPU执行的、进行各组件的图像绘制的指令；

所述调用目标回调接口，按照所述图层树中的所述层级关系，依次从所述缓存中读取各所述组件对应的目标绘制数据，并基于所述目标绘制数据，渲染所述待显示页面，包括：

利用目标回调接口，按照所述图层树中的所述层级关系，依次从所述缓存中存储的所述图像绘制指令列表中调取各个所述图像绘制指令，并通过所述GPU执行所述图像绘制指令，渲染所述待显示页面。

一种可选的实施方式中，所述按照用户选择的目标绘制模式，将所述图层树中的所述绘制指令转换成与各所述组件分别对应的目标绘制数据，包括：

在用户选择的绘制模式为纹理模式的情况下，基于所述图层树中的各个所述绘制指令，将所述图层树对应的各个所述组件绘制为共享纹理；

所述调用目标回调接口，按照所述图层树中的所述层级关系，依次从所述缓存中读取各所述组件对应的目标绘制数据，并基于所述目标绘制数据，渲染所述待显示页面，包括：

调用目标回调接口，按照所述图层树中的所述层级关系，依次从所述缓存中读取各所述组件对应的共享纹理，并将所述共享纹理绘制在所述待显示页面上。

一种可选的实施方式中，所述调用目标回调接口，按照所述图层树中的所述层级关系，依次从所述缓存中读取各所述组件对应的目标绘制数据之前，包括：

在当前系统版本大于或等于第一目标系统版本的情况下，利用接口创建函数创建目标回调接口；

利用绘制网页视图函数将所述目标回调接口注入到接口列表中；

所述调用目标回调接口，按照所述图层树中的所述层级关系，依次从所述缓存中读取各所述组件对应的目标绘制数据，包括：

调用所述接口列表提供的目标回调接口，按照所述图层树中的所述层级关系，依次从所述缓存中读取各所述组件对应的目标绘制数据。

一种可选的实施方式中，所述调用目标回调接口，按照所述图层树中的所述层级关系，依次从所述缓存中读取各所述组件对应的目标绘制数据，包括：

在当前系统版本大于或等于第二目标系统版本的情况下，在系统原生渲染线程中，调用目标回调接口，按照所述图层树中的所述层级关系，依次从所述缓存中读取各所述组件对应的目标绘制数据；

在当前系统版本小于第二目标系统版本的情况下，在平台线程中，调用目标回调接口，按照所述图层树中的所述层级关系，依次从所述缓存中读取各所述组件对应的目标绘制数据。

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

生成模块，用于基于在待显示页面组件之间的层级关系和相对位置关系，生成所述待显示页面对应的图层树；各所述组件包括系统原生组件和跨平台自绘组件；所述图层树用于表征所述系统原生组件对应的图层和跨平台自绘组件对应的图层之间的层级关系和相对位置关系，以及不同图层对应的绘制指令；

转换模块，用于将所述图层树中的所述绘制指令转换成与各所述组件分别对应的目标绘制数据，并进行缓存；所述目标绘制数据为渲染线程能够渲染的目标格式的绘制数据；

读取模块，用于调用目标回调接口，按照所述图层树中的所述层级关系，依次从所述缓存中读取各所述组件对应的目标绘制数据，并基于所述目标绘制数据和所述图层之间的相对位置关系，渲染所述待显示页面。

第三方面，本公开实施例还提供一种计算机设备，包括：处理器、存储器和总线，所述存储器存储有所述处理器可执行的机器可读指令，当计算机设备运行时，所述处理器与所述存储器之间通过总线通信，所述机器可读指令被所述处理器执行时执行上述第一方面，或第一方面中任一种可能的实施方式中的步骤。

第四方面，本公开实施例还提供一种计算机可读存储介质，该计算机可读存储介质上存储有计算机程序，该计算机程序被处理器运行时执行上述第一方面，或第一方面中任一种可能的实施方式中的步骤。

本公开实施例提供的页面渲染方法，在进行同层渲染的过程中，可以生成包括系统原生组件和跨平台自绘组件的图层树，并利用系统提供的目标回调接口按照图层树中各组件的层级关系，依次调用目标绘制数据，目标回调接口是系统渲染线程提供的原生回调接口，可以最大化利用系统渲染线程，从而提高页面的渲染效率。

另外，本公开实施例为生成的目标绘制数据提供了两种缓存方式，包括图像(Picture)模式和纹理(Texture)模式；其中，Picture模式，即缓存绘制指令的方式，不需要创建单独的缓存空间，可以减少占用的内存；Texture模式，即共享纹理的方式，可以减少渲染线程的渲染开销，生成的待展示页面在交互过程中流畅性更好。

为使本公开的上述目的、特征和优点能更明显易懂，下文特举较佳实施例，并配合所附附图，作详细说明如下。

附图说明

为了更清楚地说明本公开实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，此处的附图被并入说明书中并构成本说明书中的一部分，这些附图示出了符合本公开的实施例，并与说明书一起用于说明本公开的技术方案。应当理解，以下附图仅示出了本公开的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。

图1示出了本公开实施例所提供的一种页面渲染方法的流程图；

图2示出了本公开实施例所提供的一种渲染待显示页面的流程示意图；

图3示出了本公开实施例所提供的提供了一种同层渲染的页面效果图；

图4示出了本公开实施例所提供的提供了另一种同层渲染的页面效果图；

图5示出了本公开实施例所提供的一种页面渲染装置的结构示意图；

图6示出了本公开实施例所提供的一种计算机设备的示意图。

具体实施方式

为使本公开实施例的目的、技术方案和优点更加清楚，下面将结合本公开实施例中附图，对本公开实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本公开一部分实施例，而不是全部的实施例。通常在此处附图中描述和示出的本公开实施例的组件可以以各种不同的配置来布置和设计。因此，以下对在附图中提供的本公开的实施例的详细描述并非旨在限制要求保护的本公开的范围，而是仅仅表示本公开的选定实施例。基于本公开的实施例，本领域技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例，都属于本公开保护的范围。

Flutter是目前被广泛使用的一种自渲染跨平台UI(User Interface，用户界面)框架，利用Flutter框架可以实现同层渲染，即将系统原生页面嵌入到自渲染跨平台框架中。

通常利用Flutter框架实现同层渲染的方式中，可以利用虚拟显示列表VirtualDisplay的方式先将系统原生视图绘制到虚拟显示列表中，Flutter框架从虚拟显示列表获取绘制纹理数据并将其与自己内部的组件widget树进行合成显示；这种渲染方式在占用内存和流畅性等方面的稳定性都较差。还可以利用混合组成Hybrid Composition的方式将跨平台Flutter UI绘制到图像阅读器ImageReader中，然后通过ImageReader读取跨平台Flutter UI的输出转成跨平台图像视图FlutterImageView并嵌入到系统原生页面中；这种渲染方式对于系统版本较低的系统(例如系统版本小于Android 10的安卓系统)性能较差。还可以利用纹理图层TextureLayer的方式，将系统原生页面绘制到表面纹理画布SurfaceTexture Canvas提供的缓存器Buffer中，然后再输出给跨平台Flutter框架渲染；这种渲染方式在系统版本较低的系统中，在占用内存和流畅性等方面的稳定性都较差。还可以利用挖洞的方式，将系统原生视图PlatformView放置在跨平视图FlutterView的下方，将FlutterView中对应的位置透明化处理，这样就将PlatformView从FlutterView中显示出来了；这种方式不支持半透明、蒙版、各种过滤器等特效，适用场景有限。

综上，通常的同层渲染的方式容易出现性能稳定性较差问题，例如占用内存较高或者流畅性较低。

基于此，本公开提供了一种页面渲染方法，在进行同层渲染的过程中，可以生成包括系统原生组件和跨平台自绘组件的图层树，并利用系统提供的目标回调接口按照图层树中各组件的层级关系，依次调用目标绘制数据，目标回调接口是系统渲染线程提供的原生回调接口，可以最大化利用系统渲染线程，从而提高页面的渲染效率。

针对以上方案所存在的缺陷以及所提出的解决方案，均是发明人在经过实践并仔细研究后得出的结果，因此，上述问题的发现过程以及下文中本公开针对上述问题所提出的解决方案，都应该是发明人在本公开过程中对本公开做出的贡献。

应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步定义和解释。

可以理解的是，在使用本公开各实施例公开的技术方案之前，均应当依据相关法律法规通过恰当的方式对本公开所涉及个人信息的类型、使用范围、使用场景等告知用户并获得用户的授权。

为便于对本实施例进行理解，首先对本公开实施例所公开的一种页面渲染方法进行详细介绍，本公开实施例所提供的页面渲染方法的执行主体一般为具有一定计算能力的计算机设备。

下面以执行主体为服务器为例对本公开实施例提供的页面渲染方法加以说明。

参见图1所示，为本公开实施例提供的一种页面渲染方法的流程图，所述方法包括S101～S103，其中：

S101：基于在待显示页面组件之间的层级关系和相对位置关系，生成所述待显示页面对应的图层树；各所述组件包括系统原生组件和跨平台自绘组件；所述图层树用于表征所述系统原生组件对应的图层和跨平台自绘组件对应的图层之间的层级关系和相对位置关系，以及不同图层对应的绘制指令。

在本公开实施例中，各组件在待显示页面中的层级关系和相对位置关系可以是根据展示要求预先设置的。在一种实施方式中，可以生成包含各个组件以及各个组件的层级关系和相对位置关系的组件树，如图2所示。

这里，系统原生组件可以为安卓系统原生组件。跨平台自绘组件可以为Flutter组件。其中Flutter是目前被广泛使用的一种跨平台用户界面(User Interface，UI)框架，开发者通常使用Flutter来开发页面，使用Flutter实现的页面被称为跨平台Flutter页面。系统原生组件用于嵌入到跨平台页面FlutterView中，实现在跨平台Flutter页面中，系统原生组件与跨平台自绘组件同层渲染。

这里，同层渲染实质上是将跨平台自绘组件树FlutterWidgetTree按照组件之间的层级关系和相对位置关系转换成系统的原生界面NativeViewTree，渲染得到待显示页面。各组件在跨平台自绘组件树FlutterWidgetTree中的层级关系对应各组件在待显示页面中的层级关系；各组件在跨平台自绘组件树FlutterWidgetTree中的相对位置关系对应各组件在待显示页面中的相对位置关系。跨平台自绘组件树FlutterWidgetTree可以表示跨平台页面FlutterView中的UI树，原生界面NativeViewTree可以表示系统原生页面中的UI树。基于跨平台自绘组件树FlutterWidgetTree中各个组件之间的层级关系和相对位置关系，可以生成图层树LayerTree。图层树LayerTree中每个图层可以对应一个跨平台Flutter页面。图层树LayerTree中各图层之间的层级关系和跨平台自绘组件树FlutterWidgetTree中各组件之间的层级关系可以是一致的。图层树LayerTree中各图层之间的相对位置关系和跨平台自绘组件树FlutterWidgetTree中各组件之间的相对位置关系可以是一致的。最后，基于图层树LayerTree，转换成系统的本地视图树NativeViewTree，渲染得到待显示页面。

如图2所示的一种渲染待显示页面的流程示意图中，组件树中可以包括系统原生组件、系统原生视图占位PlatformViewLink和多个跨平台自绘组件FlutterWidget；多个跨平台自绘组件FlutterWidget可以包括跨平台自绘组件Widget1、跨平台自绘组件Widget2、跨平台自绘组件Widget3、跨平台自绘组件Widget4。跨平台根组件可以位于某一系统原生组件的下层；系统原生视图占位PlatformViewLink和多个跨平台自绘组件FlutterWidget可以是位于跨平台根组件的下层，即跨平台根组件的子组件；其中，系统原生视图占位PlatformViewLink是系统原生视图PlatformView在跨平台自绘组件FlutterWidget中的占位，表示一个系统原生视图PlatformView嵌入到了跨平台自绘组件树FlutterWidgetTree中。系统原生视图占位PlatformViewLink可以表示一个组件，这里可以用系统原生视图占位组件PlatformViewLinkWidget表示。系统原生视图占位组件PlatformViewLinkWidget在经过一系列转换后，最终可以创建一个跨平台突变视图FlutterMutatorView添加到跨平台视图FlutterView中，而与系统原生视图占位PlatformViewLink存在重叠且位于系统原生视图占位PlatformViewLink的第一跨平台自绘组件FlutterWidget会绘制到上层的跨平台绘制表面对应的原生组件FlutterFunctorView中，位于系统原生视图占位PlatformViewLink下层的第二跨平台自绘组件FlutterWidget、以及与系统原生视图占位PlatformViewLink不重叠且位于系统原生视图占位PlatformViewLink上层的第三跨平台自绘组件FlutterWidget会绘制到下层的跨平台绘制表面对应的原生组件FlutterFunctorView中。这样就实现了将系统原生视图PlatformView嵌入到了待显示的跨平台Flutter页面中。

生成的图层树可以用于表征系统原生组件对应的图层和跨平台自绘组件对应的图层之间的层级关系和相对位置关系、以及不同图层对应的绘制指令。这里的层级关系可以表示系统原生组件对应的图层和跨平台自绘组件对应的图层之间的上下层关系。这里的相对位置关系可以表征系统原生组件对应的图层和跨平台自绘组件对应的图层之间的相对位置，例如相对方位、重叠关系等。这里的绘制指令可以是中间组织形式的绘制指令。绘制指令用于指示图层的大小、形状和位置等信息。在具体实施中，可以将图层对应的绘制指令转换成用于进行渲染的目标绘制数据。

S102：将所述图层树中的所述绘制指令转换成与各所述组件分别对应的目标绘制数据，并进行缓存；所述目标绘制数据为渲染线程能够渲染的目标格式的绘制数据。

这里，在渲染之前，可以按照用户从多种绘制模式中选择的目标绘制模式，将所述图层树中的绘制指令转换成与各组件分别对应的目标绘制数据，即渲染线程能够渲染的目标格式的绘制数据。这里的目标绘制数据的目标格式与用户选择的目标绘制模式对应。多种绘制模式可以包括图像(Picture)模式和纹理(Texture)模式。

在一种实施方式中，在用户选择的绘制模式为图像模式的情况下，可以基于图层树中的各个绘制指令，生成用于绘制各个组件的图像绘制指令列表，也就是用于绘制各个组件的图像绘制指令集合。其中，图像绘制指令列表中，包含能够被图像处理器(GraphicsProcessing Unit，GPU)执行的、进行各组件的图像绘制的指令。

在一种实施方式中，在用户选择的绘制模式为纹理模式的情况下，可以基于图层树中的各个绘制指令，将图层树对应的各个组件绘制为共享纹理。

这里，Picture模式是将非系统原生控件实现的Flutter页面对应的图层树光栅化为图像绘制指令列表，由原生渲染线程执行图像绘制指令列表中的绘制指令进行Flutter页面的绘制，不需要创建单独的渲染表面或者缓存器Buffer，可以显著减少图像Graphics占用的内存。此外，可以选择性地将UI线程与GPU线程合并成一个线程，进一步精简渲染流水线。Texture模式是在GPU线程中，将非系统原生控件实现的Flutter页面对应的图层树绘制成纹理，然后由原生渲染线程将纹理直接绘制在渲染表面上，该模式能最大化利用GPU线程，减少原生渲染线程的渲染开销，页面显示会更加流畅。Picture模式占用的内存更少，Texture模式的流畅性更优，用户可以根据实际需求选择适合的模式。

生成的目标绘制数据可以缓存起来，这里可以利用绘制函数管理模块DrawFunctorManager负责管理缓存的图像绘制指令列表、共享纹理以及它们生命周期。

S103：调用目标回调接口，按照所述图层树中的所述层级关系，依次从所述缓存中读取各所述组件对应的目标绘制数据，并基于所述目标绘制数据和所述图层之间的相对位置关系，渲染所述待显示页面。

这里目标回调接口可以是系统提供的回调接口，也可以是创建的回调接口。在一种实施方式中，调用目标回调接口，按照图层树中的层级关系，依次从缓存中读取各组件对应的目标绘制数据之前，可以判断当前系统版本是否大于第一目标系统版本。这里的系统可以指安卓系统。在安卓系统版本小于Android 12的情况下，安卓系统的源代码中可以提供一个渲染线程绘制回调接口，即GLFunctor接口，原生渲染线程能够回调这一接口并读取接口中的数据。

在安卓系统版本大于或等于Android 12的情况下，安卓系统中GLFunctor接口依赖的回调绘制GLFunctor接口函数callDrawGLFunction在Android 12中已经废弃，也就是系统无法提供GLFunctor接口。系统只暴露了用于网页视图WebView绘制的绘制网页视图函数drawWebViewFunctor。

这里，可以利用接口创建函数create_functor，创建目标接口函数；然后，利用绘制网页视图函数drawWebViewFunctor将目标回调函数注入到接口列表DisplayList中。在利用接口列表提供的目标回调接口，按照图层树中的层级关系，依次从缓存中读取各组件对应的目标绘制数据。

在目标绘制数据为图像绘制指令列表的情况下，可以利用目标回调接口，按照图层树中的层级关系，依次从缓存中存储的图像绘制指令列表中调取各个图像绘制指令，并通过图像处理器GPU执行图像绘制指令，渲染待显示页面。

在目标绘制数据为纹理模式的情况下，可以利用目标回调接口，按照图层树中的层级关系，依次从缓存中读取各组件对应的共享纹理，并将共享纹理绘制在待显示页面上。

在按照图层树中的层级关系，依次从缓存中读取各组件对应的目标绘制数据(包括图像绘制指令列表或共享纹理)的过程中，在一种实施方式中，可以按照图层树中各图层之间的层级关系，以及系统原生组件对应的图层和跨平台自绘组件对应的图层之间的重叠关系，确定各组件的读取优先级。然后按照读取优先级依次读取各组件对应的目标绘制数据。

当存在第一跨平台自绘组件，第一跨平台自绘组件对应的图层与系统原生组件对应的图层存在重叠、且位于系统原生组件对应的图层的上层时，确定第一跨平台自绘组件对应的目标绘制数据的读取优先级，高于系统原生组件对应的目标绘制数据的读取优先级。当存在第二跨平台自绘组件和第三跨平台自绘组件，第二跨平台自绘组件对应的图层位于系统原生组件对应的图层的下层、第三跨平台自绘组件对应的图层与系统原生组件对应的图层不重叠且位于系统原生组件对应的图层的上层，确定系统原生组件对应的目标绘制数据的读取优先级，高于第二跨平台自绘组件和第三跨平台自绘组件对应的目标绘制数据的读取优先级。

也就是，对应的图层与系统原生组件对应的图层存在重叠且位于系统原生组件对应的图层的上层的第一跨平台自绘组件对应的目标绘制数据的读取优先级，高于系统原生组件对应的目标绘制数据的读取优先级；系统原生组件对应的目标绘制数据的读取优先级，高于对应的图层位于系统原生组件对应的图层的下层的第二跨平台自绘组件对应的目标绘制数据、以及对应的图层与系统原生组件对应的图层不重叠且位于系统原生组件对应的图层的上层的第三跨平台自绘组件对应的目标绘制数据的读取优先级。

例如图2中，图层1、图层2、图层3和图层4均表示跨平台自绘组件对应的图层；图层1、图层2、图层3和图层4可以位于图层树LayerTree的根图层中，根图层为跨平台根组件对应的图层，根图层未在图2的图层树中示出；其中，图层2和图层3位于系统原生视图PlatformView对应的系统原生组件视图占位(这里可以看作是一个图层)的上层、且与系统原生视图PlatformView对应的系统原生组件视图占位存在重叠；图层3位于系统原生视图PlatformView对应的系统原生组件视图占位的下层；图层4位于系统原生视图PlatformView对应的系统原生组件视图占位的上层、且与系统原生视图PlatformView对应的系统原生组件视图占位存在重叠；图2中，图层2和图层3对应的跨平台自绘组件的目标绘制数据的读取优先级，高于系统原生视图PlatformView的目标绘制数据的读取优先级，系统原生视图PlatformView的目标绘制数据的读取优先级高于图层1和图层4对应的跨平台自绘组件的目标绘制数据的读取优先级。在一种实施方式中，图层2和图层3分别对应的跨平台自绘组件的目标绘制数据的读取优先级可以是相同的，即可以先读取图层2对应的跨平台自绘组件的目标绘制数据，也可以先读取图层3对应的跨平台自绘组件的目标绘制数据；图层2和图层3分别对应的跨平台自绘组件的目标绘制数据的读取优先级也可以是按照预设读取优先级读取，这里不再详述。同理，图层1和图层4分别对应的跨平台自绘组件的目标绘制数据的读取优先级可以是相同的，即可以先读取图层1对应的跨平台自绘组件的目标绘制数据，也可以先读取图层4对应的跨平台自绘组件的目标绘制数据；图层1和图层4分别对应的跨平台自绘组件的目标绘制数据的读取优先级也可以是按照预设读取优先级读取，这里不再详述。

在一种实施方式中，按照图层树中的层级关系，依次读取各组件对应的目标绘制数据时，也可以按照图层树中各图层之间的层级关系，从上层图层到下层图层依次读取各组件对应的目标绘制数据。

也就是对应的图层位于上层的组件对应的目标绘制数据的读取优先级，高于对应的图层位于下层的组件对应的目标绘制数据的读取优先级。

这里，在按照读取优先级，读取各个组件对应的目标绘制数据后，可以依次基于目标绘制数据，渲染待显示页面，最终得到了嵌入有系统原生组PlatformView的跨平台Flutter页面。

在一种实施方式中，可以利用UI线程将系统原生视图占位PlatformViewLink占位到跨平台自绘组件树FlutterWidgetTree中，并生成包含系统原生视图占位PlatformViewLink和跨平台自绘组件FlutterWidget的图层树；然后利用光栅线程RasterThread中的外部视图嵌入器ExternalViewEmbedder按照图层树中各个图层之间的层级关系，对各个图层进行分层，得到位于系统原生组件对应的图层上层的Flutter页面和位于系统原生组件对应的图层下层的Flutter页面，每层代表一层Flutter页面，即跨平台函数视图FlutterFunctorView表示，并按照各个图层之间的层级关系，生成各个图层分别对应的目标绘制数据。目标绘制数据可以包括图像模式下生成的用于绘制各个组件的图像绘制指令列表，或纹理模式下生成的共享纹理。并将生成的目标绘制数据进行缓存。

绘制函数管理模块DrawFunctorManager，可以用于管理缓存的图像绘制指令列表、共享纹理以及它们生命周期。

最后，在系统提供的原生渲染线程RenderThread中，可以利用目标回调接口按照图层树中的层级关系，依次从缓存中读取各组件对应的目标绘制数据，并基于目标绘制数据，渲染待显示页面，这样就实现了将系统原生组件对应的视图PlatformView嵌入到了待显示的跨平台Flutter页面中。

在一种实施方式中，可以将光栅线程RasterThread中的相关功能合并到渲染线程RenderThread中实现，比如图层树LayerTree的光栅化过程、缓存目标绘制数据的过程，这样可以去掉光栅线程RasterThread，进一步精简渲染流水线。

在一种实施方式中，还可以判断是否当前系统版本小于第二目标系统版本，在当前系统版本大于或等于第二目标系统版本的情况下，在系统原生渲染线程中，调用目标回调接口，按照图层树中的层级关系，依次从缓存中读取各组件对应的目标绘制数据；在当前系统版本小于第二目标系统版本的情况下，在平台线程中，调用目标回调接口，按照图层树中的层级关系，依次从缓存中读取各组件对应的目标绘制数据。

在具体实施中，在安卓系统中，当系统版本小于5.0时，安卓系统中没有渲染线程RenderThread，因此渲染过程可以是在平台线程PlatformThread中实现的。

在本公开实施例中，跨平台绘制表面对应的原生组件FlutterFunctorView继承自系统原生视图，可以无缝嵌入到原生视图之中，因此在交互过程，Flutter页面与系统原生页面之间不会出现不同步的情况，可以很好地适用于同层渲染场景中。

图3提供了一种同层渲染的页面效果图，图3中地图对应的视图为系统原生组件渲染后的视图，视图1、视图2和视图3为跨平台自绘组件渲染后的视图。系统原生组件渲染后的视图嵌入到了视图1、视图2和视图3分别对应的视图的下层。

图4提供了另一种同层渲染的页面效果图，图4中目标图片和背景图片对应的视图为跨平台自绘组件渲染后的视图，搜索结果页面为系统原生组件渲染后的视图。系统原生组件渲染后的视图嵌入到了目标图片和背景图片的中间层。

本领域技术人员可以理解，在具体实施方式的上述方法中，各步骤的撰写顺序并不意味着严格的执行顺序而对实施过程构成任何限定，各步骤的具体执行顺序应当以其功能和可能的内在逻辑确定。

基于同一发明构思，本公开实施例中还提供了与页面渲染方法对应的页面渲染装置，由于本公开实施例中的装置解决问题的原理与本公开实施例上述页面渲染方法相似，因此装置的实施可以参见方法的实施，重复之处不再赘述。

参照图5所示，为本公开实施例提供的一种页面渲染装置的结构示意图，所述装置包括：

生成模块501，用于基于在待显示页面组件之间的层级关系和相对位置关系，生成所述待显示页面对应的图层树；各所述组件包括系统原生组件和跨平台自绘组件；所述图层树用于表征所述系统原生组件对应的图层和跨平台自绘组件对应的图层之间的层级关系和相对位置关系，以及不同图层对应的绘制指令；

转换模块502，用于将所述图层树中的所述绘制指令转换成与各所述组件分别对应的目标绘制数据，并进行缓存；所述目标绘制数据为渲染线程能够渲染的目标格式的绘制数据；

读取模块503，用于调用目标回调接口，按照所述图层树中的所述层级关系，依次从所述缓存中读取各所述组件对应的目标绘制数据，并基于所述目标绘制数据和所述图层之间的相对位置关系，渲染所述待显示页面。

在一种可选的实施方式中，读取模块503，具体用于：

基于所述图层树按照自上而下的层级顺序依次读取各所述组件对应的目标绘制数据。

在一种可选的实施方式中，读取模块503，具体用于：

按照所述图层树中各所述图层之间的层级关系，以及所述系统原生组件对应的图层和跨平台自绘组件对应的图层之间的重叠关系，确定各组件对应的目标绘制数据的读取优先级顺序；

按照所述读取优先级顺序依次读取各所述组件对应的目标绘制数据。

在一种可选的实施方式中，读取模块503，具体用于：

当存在第一跨平台自绘组件，所述第一跨平台自绘组件对应的图层与所述系统原生组件对应的图层存在重叠、且位于所述系统原生组件对应的图层的上层时，确定所述第一跨平台自绘组件对应的目标绘制数据的读取优先级，高于所述系统原生组件对应的目标绘制数据的读取优先级；

当存在第二跨平台自绘组件和第三跨平台自绘组件，所述第二跨平台自绘组件对应的图层位于所述系统原生组件对应的图层的下层、所述第三跨平台自绘组件对应的图层与所述系统原生组件对应的图层不重叠且位于所述系统原生组件对应的图层的上层，确定所述系统原生组件对应的目标绘制数据的读取优先级，高于所述第二跨平台自绘组件和所述第三跨平台自绘组件对应的目标绘制数据的读取优先级。

在一种可选的实施方式中，转换模块502，具体用于：

按照用户从多种绘制模式中选择的目标绘制模式，将所述图层树中的所述绘制指令转换成与各所述组件分别对应的目标绘制数据；其中，所述目标绘制数据的目标格式与用户选择的目标绘制模式对应；所述多种绘制模式包括图像模式和纹理模式。

在一种可选的实施方式中，转换模块502，具体用于：

在用户选择的绘制模式为图像模式的情况下，基于所述图层树中的各个所述绘制指令，生成用于绘制各个组件的图像绘制指令列表；所述图像绘制指令列表中，包含能够被图像处理器GPU执行的、进行各组件的图像绘制的指令；

所述调用目标回调接口，按照所述图层树中的所述层级关系，依次从所述缓存中读取各所述组件对应的目标绘制数据，并基于所述目标绘制数据，渲染所述待显示页面，包括：

利用目标回调接口，按照所述图层树中的所述层级关系，依次从所述缓存中存储的所述图像绘制指令列表中调取各个所述图像绘制指令，并通过所述GPU执行所述图像绘制指令，渲染所述待显示页面。

在一种可选的实施方式中，转换模块502，具体用于：

在用户选择的绘制模式为纹理模式的情况下，基于所述图层树中的各个所述绘制指令，将图层树对应的各个所述组件绘制为共享纹理；

所述调用目标回调接口，按照所述图层树中的所述层级关系，依次从所述缓存中读取各所述组件对应的目标绘制数据，并基于所述目标绘制数据，渲染所述待显示页面，包括：

调用目标回调接口，按照所述图层树中的所述层级关系，依次从所述缓存中读取各所述组件对应的共享纹理，并将所述共享纹理绘制在所述待显示页面上。

在一种可选的实施方式中，所述调用目标回调接口，按照所述图层树中的所述层级关系，依次从所述缓存中读取各所述组件对应的目标绘制数据之前，所述装置还包括：

创建模块，用于在当前系统版本大于或等于第一目标系统版本的情况下，利用接口创建函数创建目标回调接口；

注入模块，用于利用绘制网页视图函数将所述目标回调接口注入到接口列表中；

读取模块503，具体用于：

调用所述接口列表提供的目标回调接口，按照所述图层树中的所述层级关系，依次从所述缓存中读取各所述组件对应的目标绘制数据。

在一种可选的实施方式中，读取模块503，具体用于：

在当前系统版本大于或等于第二目标系统版本的情况下，在系统原生渲染线程中，调用目标回调接口，按照所述图层树中的所述层级关系，依次从所述缓存中读取各所述组件对应的目标绘制数据；

在当前系统版本小于第二目标系统版本的情况下，在平台线程中，调用目标回调接口，按照所述图层树中的所述层级关系，依次从所述缓存中读取各所述组件对应的目标绘制数据。

关于装置中的各模块的处理流程、以及各模块之间的交互流程的描述可以参照上述方法实施例中的相关说明，这里不再详述。

基于同一技术构思，本公开实施例还提供了一种计算机设备。参照图6所示，为本公开实施例提供的计算机设备600的结构示意图，包括处理器601、存储器602、和总线603。其中，存储器602用于存储执行指令，包括内存6021和外部存储器6022；这里的内存6021也称内存储器，用于暂时存放处理器601中的运算数据，以及与硬盘等外部存储器6022交换的数据，处理器601通过内存6021与外部存储器6022进行数据交换，当计算机设备600运行时，处理器601与存储器602之间通过总线603通信，使得处理器601在执行以下指令：

基于在待显示页面中组件之间的层级关系和相对位置关系，生成所述待显示页面对应的图层树；所述组件包括系统原生组件和跨平台自绘组件；所述图层树用于表征所述系统原生组件对应的图层和跨平台自绘组件对应的图层之间的层级关系和相对位置关系，以及不同图层对应的绘制指令；

将所述图层树中的所述绘制指令转换成与各所述组件分别对应的目标绘制数据，并进行缓存；所述目标绘制数据为渲染线程能够渲染的目标格式的绘制数据；

调用目标回调接口，按照所述图层树中的所述层级关系，依次从所述缓存中读取各所述组件对应的目标绘制数据，并基于所述目标绘制数据和所述图层之间的相对位置关系，渲染所述待显示页面。

本公开实施例还提供一种计算机可读存储介质，该计算机可读存储介质上存储有计算机程序，该计算机程序被处理器运行时执行上述方法实施例中所述的页面渲染方法的步骤。其中，该存储介质可以是易失性或非易失的计算机可读取存储介质。

本公开实施例还提供一种计算机程序产品，该计算机产品承载有程序代码，所述程序代码包括的指令可用于执行上述方法实施例中所述的页面渲染方法的步骤，具体可参见上述方法实施例，在此不再赘述。

其中，上述计算机程序产品可以具体通过硬件、软件或其结合的方式实现。在一个可选实施例中，所述计算机程序产品具体体现为计算机存储介质，在另一个可选实施例中，计算机程序产品具体体现为软件产品，例如软件开发包(Software Development Kit，SDK)等等。

所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的系统和装置的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。在本公开所提供的几个实施例中，应该理解到，所揭露的系统、装置和方法，可以通过其它的方式实现。以上所描述的装置实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，又例如，多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些通信接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。

所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

另外，在本公开各实施例中的各功能单元可以集成在一个处理单元中，也可以是各单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。

所述功能如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个处理器可执行的非易失的计算机可读取存储介质中。基于这样的理解，本公开的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本公开各实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(Read-OnlyMemory，ROM)、随机存取存储器(Random Access Memory，RAM)、磁碟或者光盘等各种可以存储程序代码的介质。

最后应说明的是：以上所述实施例，仅为本公开的具体实施方式，用以说明本公开的技术方案，而非对其限制，本公开的保护范围并不局限于此，尽管参照前述实施例对本公开进行了详细的说明，本领域的普通技术人员应当理解：任何熟悉本技术领域的技术人员在本公开揭露的技术范围内，其依然可以对前述实施例所记载的技术方案进行修改或可轻易想到变化，或者对其中部分技术特征进行等同替换；而这些修改、变化或者替换，并不使相应技术方案的本质脱离本公开实施例技术方案的精神和范围，都应涵盖在本公开的保护范围之内。因此，本公开的保护范围应以所述权利要求的保护范围为准。