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

本公开提供了一种页面渲染方法、装置、计算机设备及存储介质，其中，该方法包括：基于在待显示页面中组件之间的层级关系和相对位置关系，生成待显示页面对应的图层树；将图层树中的绘制指令转换成与各组件分别对应的目标绘制数据，并进行缓存；调用目标回调接口，按照图层树中的层级关系，依次从缓存中读取各组件对应的目标绘制数据，并基于目标绘制数据和图层之间的相对位置关系，渲染待显示页面。本公开实施例可以利用系统提供的目标回调接口按照图层树中各组件的层级关系调用目标绘制数据，目标回调接口是系统渲染线程提供的原生回调接口，可以最大化利用系统渲染线程，从而提高页面的渲染效率。高页面的渲染效率。高页面的渲染效率。

【技术实现步骤摘要】
一种页面渲染方法、装置、计算机设备及存储介质


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

技术介绍

[0002]Flutter是目前被广泛使用的一种自渲染跨平台UI(User Interface，用户界面)框架，利用Flutter框架可以实现同层渲染，即将系统原生页面嵌入到自渲染跨平台框架中。
[0003]由于同层渲染需要将两种UI框架下的页面融合到一起进行渲染，因此容易出现性能稳定性较差问题，例如占用内存较高或者流畅性较低。

技术实现思路

[0004]本公开实施例至少提供一种页面渲染方法、装置、计算机设备及存储介质。
[0005]第一方面，本公开实施例提供了一种页面渲染方法，包括：
[0006]基于在待显示页面中组件之间的层级关系和相对位置关系，生成所述待显示页面对应的图层树；所述组件包括系统原生组件和跨平台自绘组件；所述图层树用于表征所述系统原生组件对应的图层和跨平台自绘组件对应的图层之间的层级关系和相对位置关系，以及不同图层对应的绘制指令；
[0007]将所述图层树中的所述绘制指令转换成与各所述组件分别对应的目标绘制数据，并进行缓存；所述目标绘制数据为渲染线程能够渲染的目标格式的绘制数据；
[0008]调用目标回调接口，按照所述图层树中的所述层级关系，依次从所述缓存中读取各所述组件对应的目标绘制数据，并基于所述目标绘制数据和所述图层之间的相对位置关系，渲染所述待显示页面。
[0009]一种可选的实施方式中，所述按照所述图层树中的所述层级关系，依次读取各所述组件对应的目标绘制数据，包括：
[0010]基于所述图层树按照自上而下的层级顺序依次读取各所述组件对应的目标绘制数据。
[0011]一种可选的实施方式中，所述按照所述图层树中的所述层级关系，依次读取各所述组件对应的目标绘制数据，包括：
[0012]按照所述图层树中各所述图层之间的层级关系，以及所述系统原生组件对应的图层和跨平台自绘组件对应的图层之间的重叠关系，确定各组件对应的目标绘制数据的读取优先级顺序；
[0013]按照所述读取优先级顺序依次读取各所述组件对应的目标绘制数据。
[0014]一种可选的实施方式中，所述按照所述图层树中各所述图层之间的层级关系，以及所述系统原生组件对应的图层和跨平台自绘组件对应的图层之间的重叠关系，确定各组件对应的目标绘制数据的读取优先级顺序，包括：
[0015]当存在第一跨平台自绘组件，所述第一跨平台自绘组件对应的图层与所述系统原生组件对应的图层存在重叠、且位于所述系统原生组件对应的图层的上层时，确定所述第一跨平台自绘组件对应的目标绘制数据的读取优先级，高于所述系统原生组件对应的目标绘制数据的读取优先级；
[0016]当存在第二跨平台自绘组件和第三跨平台自绘组件，所述第二跨平台自绘组件对应的图层位于所述系统原生组件对应的图层的下层、所述第三跨平台自绘组件对应的图层与所述系统原生组件对应的图层不重叠且位于所述系统原生组件对应的图层的上层，确定所述系统原生组件对应的目标绘制数据的读取优先级，高于所述第二跨平台自绘组件和所述第三跨平台自绘组件对应的目标绘制数据的读取优先级。
[0017]一种可选的实施方式中，所述将所述图层树中的所述绘制指令转换成与各所述组件分别对应的目标绘制数据，包括：
[0018]按照用户从多种绘制模式中选择的目标绘制模式，将所述图层树中的所述绘制指令转换成与各所述组件分别对应的目标绘制数据；其中，所述目标绘制数据的目标格式与用户选择的目标绘制模式对应；所述多种绘制模式包括图像模式和纹理模式。
[0019]一种可选的实施方式中，所述按照用户选择的目标绘制模式，将所述图层树中的所述绘制指令转换成与各所述组件分别对应的目标绘制数据，包括：
[0020]在用户选择的绘制模式为图像模式的情况下，基于所述图层树中的各个所述绘制指令，生成用于绘制各个组件的图像绘制指令列表；所述图像绘制指令列表中包含能够被图像处理器GPU执行的、进行各组件的图像绘制的指令；
[0021]所述调用目标回调接口，按照所述图层树中的所述层级关系，依次从所述缓存中读取各所述组件对应的目标绘制数据，并基于所述目标绘制数据，渲染所述待显示页面，包括：
[0022]利用目标回调接口，按照所述图层树中的所述层级关系，依次从所述缓存中存储的所述图像绘制指令列表中调取各个所述图像绘制指令，并通过所述GPU执行所述图像绘制指令，渲染所述待显示页面。
[0023]一种可选的实施方式中，所述按照用户选择的目标绘制模式，将所述图层树中的所述绘制指令转换成与各所述组件分别对应的目标绘制数据，包括：
[0024]在用户选择的绘制模式为纹理模式的情况下，基于所述图层树中的各个所述绘制指令，将所述图层树对应的各个所述组件绘制为共享纹理；
[0025]所述调用目标回调接口，按照所述图层树中的所述层级关系，依次从所述缓存中读取各所述组件对应的目标绘制数据，并基于所述目标绘制数据，渲染所述待显示页面，包括：
[0026]调用目标回调接口，按照所述图层树中的所述层级关系，依次从所述缓存中读取各所述组件对应的共享纹理，并将所述共享纹理绘制在所述待显示页面上。
[0027]一种可选的实施方式中，所述调用目标回调接口，按照所述图层树中的所述层级关系，依次从所述缓存中读取各所述组件对应的目标绘制数据之前，包括：
[0028]在当前系统版本大于或等于第一目标系统版本的情况下，利用接口创建函数创建目标回调接口；
[0029]利用绘制网页视图函数将所述目标回调接口注入到接口列表中；
[0030]所述调用目标回调接口，按照所述图层树中的所述层级关系，依次从所述缓存中读取各所述组件对应的目标绘制数据，包括：
[0031]调用所述接口列表提供的目标回调接口，按照所述图层树中的所述层级关系，依次从所述缓存中读取各所述组件对应的目标绘制数据。
[0032]一种可选的实施方式中，所述调用目标回调接口，按照所述图层树中的所述层级关系，依次从所述缓存中读取各所述组件对应的目标绘制数据，包括：
[0033]在当前系统版本大于或等于第二目标系统版本的情况下，在系统原生渲染线程中，调用目标回调接口，按照所述图层树中的所述层级关系，依次从所述缓存中读取各所述组件对应的目标绘制数据；
[0034]在当前系统版本小于第二目标系统版本的情况下，在平台线程中，调用目标回调接口，按照所述图层树中的所述层级关系，依次从所述缓存中读取各所述组件对应的目标绘制数据。
[0035]第二方面，本公开实施例还提供一种页面渲染装置，包括：
[0036]生成模块，用于基于在待显示页面组件之间的层级关系和相对位置关系，生成所述待显示页面对应的图层树；各所述组件包括系统原生组件和跨平台自绘组件；所述图层树用于表征所述系统原生组件对应的图层和跨平台自绘组件本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种页面渲染方法，其特征在于，包括：基于在待显示页面中组件之间的层级关系和相对位置关系，生成所述待显示页面对应的图层树；所述组件包括系统原生组件和跨平台自绘组件；所述图层树用于表征所述系统原生组件对应的图层和跨平台自绘组件对应的图层之间的层级关系和相对位置关系，以及不同图层对应的绘制指令；将所述图层树中的所述绘制指令转换成与各所述组件分别对应的目标绘制数据，并进行缓存；所述目标绘制数据为渲染线程能够渲染的目标格式的绘制数据；调用目标回调接口，按照所述图层树中的所述层级关系，依次从所述缓存中读取各所述组件对应的目标绘制数据，并基于所述目标绘制数据和所述图层之间的相对位置关系，渲染所述待显示页面。2.根据权利要求1所述的方法，其特征在于，所述按照所述图层树中的所述层级关系，依次读取各所述组件对应的目标绘制数据，包括：基于所述图层树按照自上而下的层级顺序依次读取各所述组件对应的目标绘制数据。3.根据权利要求1所述的方法，其特征在于，所述按照所述图层树中的所述层级关系，依次读取各所述组件对应的目标绘制数据，包括：按照所述图层树中各所述图层之间的层级关系，以及所述系统原生组件对应的图层和跨平台自绘组件对应的图层之间的重叠关系，确定各组件对应的目标绘制数据的读取优先级顺序；按照所述读取优先级顺序依次读取各所述组件对应的目标绘制数据。4.根据权利要求3所述的方法，其特征在于，所述按照所述图层树中各所述图层之间的层级关系，以及所述系统原生组件对应的图层和跨平台自绘组件对应的图层之间的重叠关系，确定各组件对应的目标绘制数据的读取优先级顺序，包括：当存在第一跨平台自绘组件，所述第一跨平台自绘组件对应的图层与所述系统原生组件对应的图层存在重叠、且位于所述系统原生组件对应的图层的上层时，确定所述第一跨平台自绘组件对应的目标绘制数据的读取优先级，高于所述系统原生组件对应的目标绘制数据的读取优先级；当存在第二跨平台自绘组件和第三跨平台自绘组件，所述第二跨平台自绘组件对应的图层位于所述系统原生组件对应的图层的下层、所述第三跨平台自绘组件对应的图层与所述系统原生组件对应的图层不重叠且位于所述系统原生组件对应的图层的上层，确定所述系统原生组件对应的目标绘制数据的读取优先级，高于所述第二跨平台自绘组件和所述第三跨平台自绘组件对应的目标绘制数据的读取优先级。5.根据权利要求1所述的方法，其特征在于，所述将所述图层树中的所述绘制指令转换成与各所述组件分别对应的目标绘制数据，包括：按照用户从多种绘制模式中选择的目标绘制模式，将所述图层树中的所述绘制指令转换成与各所述组件分别对应的目标绘制数据；其中，所述目标绘制数据的目标格式与用户选择的目标绘制模式对应；所述多种绘制模式包括图像模式和纹理模式。6.根据权利要求5所述的方法，其特征在于，所述按照用户选择的目标绘制模式，将所述图层树中的所述绘制指令转换成与各所述组件分别对应的目标绘制数据，包括：在用户选择的绘制模式为图像模式的情况下，基于所述图层树中的各个所述绘制指
令，生成用于绘制各个组件的图像绘制指令列表；所述图像绘制指令列表中包含能够被图像处理器GPU执行的、进行各组件的图像绘制的指令；所述调用目标回调接口，按照所述图层树中的所述层级关系，依次从所述缓存中读取各所述组件对应的目标绘制数据，并基于所述目标绘制数据，渲染所述待显示页面，包括：利用目标回调...

【专利技术属性】
技术研发人员：王莹，王赛，
申请(专利权)人：北京火山引擎科技有限公司，
类型：发明
国别省市：