CN117667351A - 一种分帧渲染组件的方法、系统、装置及存储介质 - Google Patents

Abstract

本发明公开了一种分帧渲染组件的方法、系统、装置及存储介质，所述方法包括：获取目标组件的渲染任务，创建第一队列表、分帧组件和分帧组件控制器；通过分帧组件将渲染任务拆分成多个子任务；获取预设参数，将多个子任务按优先级进行分类，并进行封装，将封装后的子任务加入到第一队列表中，得到第二队列表；预设参数包括每个子任务的优先级；渲染占位组件，等待占位组件渲染结束；通过分帧组件控制器按优先级依次对第二列表中的所有子任务根据预设参数进行渲染，直至对所有子任务的渲染完成，将占位组件替换为目标组件，完成分帧渲染。本发明实施例提高了应用的响应性和流畅度，并提高了用户体验，可广泛应用于组件渲染技术领域。

Description

一种分帧渲染组件的方法、系统、装置及存储介质

技术领域

本发明涉及组件渲染技术领域，尤其涉及一种分帧渲染组件的方法、系统、装置及存储介质。

背景技术

在Flutter项目中，目前渲染复杂组件方案主要是直接渲染，使用各种小组件(Widget)来实现不同类型的界面元素，例如容器(Container)、行(Row)、列(Column)、堆叠(Stack)等小组件来构建复杂组件。

在现有技术中，通常先初始化一个占位组件，然后在widget的初始化方法调用WidgetsBinding.instance.addPostFrameCallBack方法，在widget占位组件渲染完成的下一帧，从而完成复杂组件的渲染。然而，这种方法存在以下几种问题：

1、布局错乱或不符合预期：该方法中的initState方法是在小部件创建时调用的，而addPostFrameCallback是在小部件完成布局计算并绘制到屏幕上后才被触发的，这意味着渲染逻辑将在布局计算之后执行，可能会导致布局错乱或不符合预期。

2、闪烁和延迟：由于在布局完成后才开始渲染复杂组件中的小组件，可能会导致界面闪烁或延迟，用户可能会看到部分内容先显示，再在稍后的帧中看到小组件更新完整的组件，从而影响到界面的流畅性和用户体验。

3、卡顿：该方法无法根据当前设备的性能优劣来调整渲染方案，无法延迟不同的时间来加载小组件，使得渲染复杂组件的过程中可能会出现卡顿。

发明内容

有鉴于此，本发明实施例的目的是提供一种分帧渲染组件的方法、系统、装置及存储介质，提高了应用的响应性和流畅度，并提高了用户体验。

第一方面，本发明实施例提供了一种分帧渲染组件的方法，包括：

获取目标组件的渲染任务，创建第一队列表、分帧组件和分帧组件控制器；

通过分帧组件将渲染任务拆分成多个子任务；

获取预设参数，将多个子任务按优先级进行分类，并进行封装，将封装后的子任务加入到第一队列表中，得到第二队列表；预设参数包括每个子任务的优先级；

渲染占位组件，等待占位组件渲染结束；

通过分帧组件控制器按优先级依次对第二列表中的所有子任务根据预设参数进行渲染，直至对所有子任务的渲染完成；

将占位组件替换为目标组件，完成分帧渲染。

可选地，通过分帧组件将渲染任务拆分成多个子任务，具体包括：

目标组件包括多个组件单元，分帧组件按每个组件单元对渲染任务进行划分，再将每个组件单元对应的渲染任务拆分成多个子任务。

可选地，将多个子任务按优先级进行分类，并进行封装，将封装后的子任务加入到第一队列表中，得到第二队列表，具体包括：

将多个子任务按照优先级进行分类，按优先级排列，将多个排列好的子任务拼接在一起以完成封装；

将封装后的多个子任务加入到第一队列表中，得到第二队列表；其中，第一队列表为空的队列表。

可选地，预设参数包括还包括延迟时间，通过分帧组件控制器按优先级依次对第二队列表中的所有子任务根据预设参数进行渲染，具体包括：

从第二队列表取出所有的子任务，获取所有子任务的优先级；

根据子任务的优先级高低及对应的延迟时间，依次对所有子任务进行渲染。

可选地，本发明实施例所提供的分帧渲染组件的方法还包括：

当多个子任务处于同一优先级，按第二队列表中子任务的排序来进行渲染。

可选地，预设参数还包括预设帧率，本发明实施例所提供的分帧渲染组件的方法还包括：

通过分帧组件控制器控制目标组件按预设帧率显示以对界面进行更新；其中，预设帧率根据当前显示设备的帧率确定。

第二方面，本发明实施例提供了一种分帧渲染组件的系统，包括：

第一模块，用于获取目标组件的渲染任务，创建第一队列表、分帧组件和分帧组件控制器；

第二模块，用于通过分帧组件将渲染任务拆分成多个子任务；

第三模块，用于获取预设参数，将多个子任务按优先级进行分类，并进行封装，将封装后的子任务加入到第一队列表中，得到第二队列表；预设参数包括每个子任务的优先级；

第四模块，用于渲染占位组件，等待占位组件渲染结束；

第五模块，用于通过分帧组件控制器按优先级依次对第二列表中的所有子任务根据预设参数进行渲染，直至对所有子任务的渲染完成；

第六模块，用于将占位组件替换为目标组件，完成分帧渲染。

第三方面，本发明实施例提供了一种分帧渲染组件的装置，包括：

至少一个处理器；

至少一个存储器，用于存储至少一个程序；

当至少一个程序被至少一个处理器执行，使得至少一个处理器实现如上所述的方法。

第四方面，本发明实施例提供了一种计算机可读存储介质，其中存储有处理器可执行的程序，处理器可执行的程序在由处理器执行时用于执行如上所述的方法。

第五方面，本发明实施例提供了一种分帧渲染组件的系统，包括显示设备以及与显示设备连接的计算机设备；其中，

显示设备，用于显示如上所述的目标组件；

计算机设备包括：

至少一个处理器；

至少一个存储器，用于存储至少一个程序；

当至少一个程序被至少一个处理器执行，使得至少一个处理器实现如上所述的方法。

实施本发明实施例包括以下有益效果：本实施例提供的方法通过分帧组件将渲染任务拆分成多个子任务，减少了因渲染任务过长导致的界面卡顿或响应延迟；将多个子任务按优先级进行分类，并按优先级进行渲染，确保了子任务按一定的频率或顺序及时执行，减少了布局错乱或不符合预期的情况；根据子任务对应的延迟时间，依次对所有子任务进行渲染，将总的渲染任务分散到多个帧中，确保了任务在适当的时间间隔内执行，不会过度占用设备的计算资源，并提高了应用的响应性，使得用户的操作不会被长时间的任务阻塞，保持了界面的流畅性，提高了用户体验；并且，通过分帧渲染，减少了主线程上的负载，很大程度上减少了长时间任务占用主线程资源，使得应用才处理其他操作时更顺畅。

附图说明

图1是本发明实施例提供的一种分帧渲染组件的方法的步骤流程示意图；

图2是本发明实施例提供的一种分帧渲染组件的系统的结构框图；

图3是本发明实施例提供的一种分帧渲染组件装置的结构框图；

图4是本发明实施例提供的另一种分帧渲染组件系统的结构框图。

具体实施方式

下面结合附图和具体实施例对本发明做进一步的详细说明。对于以下实施例中的步骤编号，其仅为了便于阐述说明而设置，对步骤之间的顺序不做任何限定，实施例中的各步骤的执行顺序均可根据本领域技术人员的理解来进行适应性调整。

在以下的描述中，涉及到“一些实施例”，其描述了所有可能实施例的子集，但是可以理解，“一些实施例”可以是所有可能实施例的相同子集或不同子集，并且可以在不冲突的情况下相互结合。

在以下的描述中，所涉及的术语“第一\第二\第三”仅仅是是区别类似的对象，不代表针对对象的特定排序，可以理解地，“第一\第二\第三”在允许的情况下可以互换特定的顺序或先后次序，以使这里描述的本发明实施例能够以除了在这里图示或描述的以外的顺序实施。

除非另有定义，本发明实施例所使用的所有的技术和科学术语与属于本发明的技术领域的技术人员通常理解的含义相同。本发明实施例中所使用的术语只是为了描述本发明实施例的目的，不是旨在限制本发明。

对本发明实施例进行进一步详细说明之前，对本发明实施例中涉及的名词和术语进行说明，本发明实施例中涉及的名词和术语适用于如下的解释。

如图1所示，本发明实施例提供了一种分帧渲染组件的方法，包括：

S100、获取目标组件的渲染任务，创建第一队列表、分帧组件和分帧组件控制器；

S200、通过分帧组件将渲染任务拆分成多个子任务；

S300、获取预设参数，将多个子任务按优先级进行分类，并进行封装，将封装后的子任务加入到第一队列表中，得到第二队列表；预设参数包括每个子任务的优先级；

S400、渲染占位组件，等待占位组件渲染结束；

S500、通过分帧组件控制器按优先级依次对第二列表中的所有子任务根据预设参数进行渲染，直至对所有子任务的渲染完成；

S600、将占位组件替换为目标组件，完成分帧渲染。

具体地，本发明实施例所提供的方法可应用于Flutter项目中，Flutter是一个谷歌(Google)的移动应用程序开发框架，用于构建用户界面(UI)的工具包，帮助开发者通过一套代码库来构建多平台的应用，支持移动端、网页、桌面和嵌入式平台。

具体地，分帧组件包括FrogFrameSeparateTaskQueue，通过FrogFrameSeparateTaskQueue先创建一个空队列表，即第一队列表，用于存放多个子任务。

具体地，分帧组件控制器包括FrogFrameWidgetController，通过FrogFrameWidgetController可通过指定每帧画面的时间间隔，来确定适合当前显示设备的预设帧率。

具体地，预设参数包括预设帧率、每个子任务的优先级、每个子任务的状态或每个子任务对应的延迟时间。

其中，子任务的状态根据实际情况确定，本发明实施例中不做限定，仅提供具体实施例以供参考，例如，子任务的状态包括进行中、已完成、未开始或等待中。

在一个具体的实施例中，子任务的状态可按如下方法进行划分：正在进行渲染的子任务的状态为“进行中”，已经完成渲染的子任务的状态为“已完成”，还未进行过渲染的子任务的状态为“未开始”或“等待中”，其中，即将进行渲染的子任务的状态可为“等待中”。

具体地，当所有子任务的渲染完成时，将占位组件替换为目标组件，完成分帧渲染。

可选地，通过分帧组件将渲染任务拆分成多个子任务，具体包括：

目标组件包括多个组件单元，分帧组件按每个组件单元对渲染任务进行划分，再将每个组件单元对应的渲染任务拆分成多个子任务。

具体地，目标组件为复杂组件，包括多个组件单元，即Widget，每个组件单元都需要进行各自对应的子渲染任务，使得目标组件的渲染任务也是复杂的。

具体地，将渲染任务按每个组件单元进行划分，可使得渲染任务依次按组件单元的预设顺序进行。

可选地，将多个子任务按优先级进行分类，并进行封装，将封装后的子任务加入到第一队列表中，得到第二队列表，具体包括：

将多个子任务按优先级进行分类，按优先级排列，将多个排列好的子任务拼接在一起以完成封装；

将封装后的多个子任务加入到第一队列表中，得到第二队列表；其中，第一队列表为空的队列表。

具体地，每个子任务都设置有优先级，优先级包括高、中、低；子任务的默认优先级为中，可通过手动设置将子任务的优先级调整为高或低。

具体地，优先级包括但不限于高、中、低三个等级，具体的优先级设置根据实际情况确定，本发明实施例中不做限定，仅提供具体实施例以供参考。

具体地，优先级的排列方式包括从高到低。

可选地，预设参数包括还包括延迟时间，通过分帧组件控制器按优先级依次对第二队列表中的所有子任务根据预设参数进行渲染，具体包括：

从第二队列表取出所有的子任务，获取所有子任务的优先级；

根据子任务的优先级高低及对应的延迟时间，依次对所有子任务进行渲染。

具体地，获取每个子任务对应的延迟时间，通过分帧组件控制器对每个子任务设置对应的延迟时间，使得每个子任务按对应的延迟时间进行渲染，就能使得子任务之间间隔适当的时间，从而控制每帧画面之间的时间间隔。

具体地，每次渲染完一个子任务后，检查第二队列表中是否还有未进行渲染的子任务，若有，继续按子任务的优先级高低对子任务进行渲染，若无，结束渲染。

在一个具体的实施例中，根据当前显示设备设置子任务的延迟时间，包括：

通过第三方插件flutter_displaymode，获取当前显示设备的最大刷新率；将最大刷新率和实验系统内部的数据结合分析，将延迟时间分为三种：

当刷新率大于120Hz时，当前显示设备为高性能设备，延迟时间设置为8ms；

当刷新率为60～120Hz时，当前显示设备为中性能设备，延迟时间设置为16ms；

当刷新率小于60Hz时，或，当前显示设备为模拟器、Google手机、32位的手机中的任意一种，当前显示设备为低性能设备，延迟时间设置为20ms。

可选地，本发明实施例所提供的分帧渲染组件的方法还包括：

当多个子任务处于同一优先级，按第二队列表中子任务的排序来进行渲染。

具体地，将子任务按优先级进行排列，相同优先级的子任务可能包括多个，相同优先级的子任务的排序可通过手动设置，或随机排列。

可选地，预设参数还包括预设帧率，本发明实施例所提供的分帧渲染组件的方法还包括：

通过分帧组件控制器控制目标组件按预设帧率显示以对界面进行更新；其中，预设帧率根据当前显示设备的帧率确定。

具体地，预设帧率根据当前显示设备的帧率确定，包括：

使预设帧率和当前显示设备的帧率相等，

或，

使预设帧率和当前显示设备的帧率在一定范围内相近，以达到在目标组件的画面以预设帧率显示时，当前显示设备上不会出现卡顿或闪烁等情况的效果。

具体地，预设帧率还与任务的执行量相关；当预设帧率较高时，任务的执行量较多；当预设帧率较低时，任务的执行量较少。

示例性地，当显示设备的适应性能较低时，预设帧率也为较低的帧率，以适应显示设备；其中，较低的预设帧率可减少任务的执行量。

在一个具体的实施例中，当显示设备为手机时，预设帧率为60帧/秒，对应地，每帧的时间间隔为16.7毫秒，具体地，通过变化监听器监测FrogFrameWidgetController的值来控制目标组件的刷新与显示设备界面的更新同步；在每帧画面的回调中，及时对显示设备的界面进行更新，以反馈子任务执行的结果。画面在该帧率下的显示效果良好。

具体地，通过变化监听器监测FrogFrameWidgetController的值来控制目标组件的刷新与显示设备界面的更新同步；在每帧画面的回调中，及时对显示设备的界面进行更新，以反馈子任务执行的结果。

实施本发明实施例包括以下有益效果：本实施例提供的方法通过分帧组件将渲染任务拆分成多个子任务，减少了因渲染任务过长导致的界面卡顿或响应延迟；将多个子任务按优先级进行分类，并按优先级进行渲染，确保了子任务按一定的频率或顺序及时执行，减少了布局错乱或不符合预期的情况；根据子任务对应的延迟时间，依次对所有子任务进行渲染，将总的渲染任务分散到多个帧中，确保了任务在适当的时间间隔内执行，不会过度占用设备的计算资源，并提高了应用的响应性，使得用户的操作不会被长时间的任务阻塞，保持了界面的流畅性，提高了用户体验；并且，通过分帧渲染，减少了主线程上的负载，很大程度上减少了长时间任务占用主线程资源，使得应用才处理其他操作时更顺畅。

如图2所示，本发明实施例还提供了一种分帧渲染组件的系统，包括：

第一模块，用于获取目标组件的渲染任务，创建第一队列表、分帧组件和分帧组件控制器；

第二模块，用于通过分帧组件将渲染任务拆分成多个子任务；

第三模块，用于获取预设参数，将多个子任务按优先级进行分类，并进行封装，将封装后的子任务加入到第一队列表中，得到第二队列表；预设参数包括每个子任务的优先级；

第四模块，用于渲染占位组件，等待占位组件渲染结束；

第五模块，用于通过分帧组件控制器按优先级依次对第二列表中的所有子任务根据预设参数进行渲染，直至对所有子任务的渲染完成；

第六模块，用于将占位组件替换为目标组件，完成分帧渲染。

可见，上述方法实施例中的内容均适用于本系统实施例中，本系统实施例所具体实现的功能与上述方法实施例相同，并且达到的有益效果与上述方法实施例所达到的有益效果也相同。

如图3所示，本发明实施例还提供了一种分帧渲染组件的装置，包括：

至少一个处理器；

至少一个存储器，用于存储至少一个程序；

当至少一个程序被至少一个处理器执行，使得至少一个处理器实现如上所述的方法。

其中，存储器作为一种非暂态计算机可读存储介质，可用于存储非暂态软件程序以及非暂态性计算机可执行程序。存储器可以包括高速随机存取存储器，还可以包括非暂态存储器，例如至少一个磁盘存储器件、闪存器件、或其他非暂态固态存储器件。在一些实施方式中，存储器可选包括相对于处理器远程设置的远程存储器，这些远程存储器可以通过网络连接至处理器。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。

可见，上述方法实施例中的内容均适用于本装置实施例中，本装置实施例所具体实现的功能与上述方法实施例相同，并且达到的有益效果与上述方法实施例所达到的有益效果也相同。

本发明实施例还提供了一种计算机可读存储介质，其中存储有处理器可执行的程序，处理器可执行的程序在由处理器执行时用于执行如上所述的方法。

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

如图4所示，本发明实施例提供了一种分帧渲染组件的系统，包括显示设备以及与显示设备连接的计算机设备；其中，

显示设备，用于显示如上所述的目标组件；

计算机设备包括：

至少一个处理器；

至少一个存储器，用于存储至少一个程序；

当至少一个程序被至少一个处理器执行，使得至少一个处理器实现如上所述的方法。

具体地，显示设备包括但不限于手机、平板、电脑等具备显示功能的设备；而对于计算机设备，其可为不同类型的电子设备，包含但不限于有台式电脑、手提电脑等终端。

可见，上述方法实施例中的内容均适用于本系统实施例中，本系统实施例所具体实现的功能与上述方法实施例相同，并且达到的有益效果与上述方法实施例所达到的有益效果也相同。

以上是对本发明的较佳实施进行了具体说明，但本发明创造并不限于所述实施例，熟悉本领域的技术人员在不违背本发明精神的前提下还可做作出种种的等同变形或替换，这些等同的变形或替换均包含在本申请权利要求所限定的范围内。

Claims (10)

1.一种分帧渲染组件的方法，其特征在于，包括：

获取目标组件的渲染任务，创建第一队列表、分帧组件和分帧组件控制器；

通过所述分帧组件将所述渲染任务拆分成多个子任务；

获取预设参数，将多个所述子任务按优先级进行分类，并进行封装，将封装后的子任务加入到所述第一队列表中，得到第二队列表；所述预设参数包括每个子任务的优先级；

渲染占位组件，等待所述占位组件渲染结束；

通过所述分帧组件控制器按所述优先级依次对所述第二列表中的所有子任务根据所述预设参数进行渲染，直至对所有所述子任务的渲染完成；

将所述占位组件替换为所述目标组件，完成分帧渲染。

2.根据权利要求1所述的分帧渲染组件的方法，其特征在于，所述通过所述分帧组件将所述渲染任务拆分成多个子任务，具体包括：

所述目标组件包括多个组件单元，所述分帧组件按每个所述组件单元对所述渲染任务进行划分，再将每个所述组件单元对应的渲染任务拆分成多个子任务。

3.根据权利要求1所述的分帧渲染组件的方法，其特征在于，所述将多个所述子任务按优先级进行分类，并进行封装，将封装后的子任务加入到所述第一队列表中，得到第二队列表，具体包括：

将多个所述子任务按照所述优先级进行分类，按所述优先级排列，将多个排列好的所述子任务拼接在一起以完成封装；

将封装后的多个所述子任务加入到所述第一队列表中，得到第二队列表；其中，所述第一队列表为空的队列表。

4.根据权利要求1所述的分帧渲染组件的方法，其特征在于，所述预设参数包括还包括延迟时间，所述通过所述分帧组件控制器按所述优先级依次对第二队列表中的所有子任务根据所述预设参数进行渲染，具体包括：

从所述第二队列表取出所有的子任务，获取所有所述子任务的优先级；

根据所述子任务的优先级高低及对应的延迟时间，依次对所有所述子任务进行渲染。

5.根据权利要求1所述的分帧渲染组件的方法，其特征在于，所述方法还包括：

当多个子任务处于同一优先级，按所述第二队列表中所述子任务的排序来进行渲染。

6.根据权利要求1所述的分帧渲染组件的方法，其特征在于，所述预设参数还包括预设帧率，所述方法还包括：

通过所述分帧组件控制器控制所述目标组件按所述预设帧率显示以对界面进行更新；其中，所述预设帧率根据当前显示设备的帧率确定。

7.一种分帧渲染组件的系统，其特征在于，包括：

第一模块，用于获取目标组件的渲染任务，创建第一队列表、分帧组件和分帧组件控制器；

第二模块，用于通过所述分帧组件将所述渲染任务拆分成多个子任务；

第三模块，用于获取预设参数，将多个所述子任务按优先级进行分类，并进行封装，将封装后的子任务加入到所述第一队列表中，得到第二队列表；所述预设参数包括每个子任务的优先级；

第四模块，用于渲染占位组件，等待所述占位组件渲染结束；

第五模块，用于通过所述分帧组件控制器按所述优先级依次对所述第二列表中的所有子任务根据所述预设参数进行渲染，直至对所有所述子任务的渲染完成；

第六模块，用于将所述占位组件替换为所述目标组件，完成分帧渲染。

8.一种分帧渲染组件的装置，其特征在于，包括：

至少一个处理器；

至少一个存储器，用于存储至少一个程序；

当所述至少一个程序被所述至少一个处理器执行，使得所述至少一个处理器实现如权利要求1-6任一项所述的方法。

9.一种计算机可读存储介质，其中存储有处理器可执行的程序，其特征在于，所述处理器可执行的程序在由处理器执行时用于执行如权利要求1-6任一项所述的方法。

10.一种分帧渲染组件的系统，其特征在于，包括显示设备以及与所述显示设备连接的计算机设备；其中，

所述显示设备，用于显示如权利要求1-7任一项所述的目标组件；

所述计算机设备包括：

至少一个处理器；

至少一个存储器，用于存储至少一个程序；

当所述至少一个程序被所述至少一个处理器执行，使得所述至少一个处理器实现如权利要求1-6任一项所述的方法。