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

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

背景技术：

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

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

技术实现思路

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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