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

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

背景技术：

1、在flutter项目中，目前渲染复杂组件方案主要是直接渲染，使用各种小组件(widget)来实现不同类型的界面元素，例如容器(container)、行(row)、列(column)、堆叠(stack)等小组件来构建复杂组件。

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

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

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

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

技术实现思路

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

29、至少一个处理器；

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

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

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

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

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

35、计算机设备包括：

36、至少一个处理器；

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

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

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

技术特征：

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

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

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

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

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

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

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

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

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

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

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

技术研发人员：舒伟,郭曼丽,黄睿澍
受保护的技术使用者：广州咪爪网络科技有限公司
技术研发日：
技术公布日：2024/3/11