页面渲染方法、装置、电子设备及存储介质与流程

本技术属于计算机，尤其涉及一种页面渲染方法、装置、电子设备及存储介质。

背景技术：

1、当浏览器页面中的图表、卡片等组件触发数据更新时，从更新数据到达到页面渲染完成的过程中，浏览器需依次完成组件状态更新、页面dom（document object modelupdate，文档对象模型）更新、页面重排与重绘等多个渲染节点。

2、在复杂的数据可视化大屏应用中，页面通常包含大量组件。在数据到达时，若同时触发所有组件的完整渲染流程，将导致浏览器主线程长时间处于阻塞状态，引发页面卡顿、丢帧、用户交互无响应等问题，严重影响页面渲染的性能。

技术实现思路

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、第六方面，本技术提供了一种计算机程序产品，包括计算机程序，所述计算机程序被处理器执行时实现如上述第一方面所述的页面渲染方法。

40、本技术实施例中的上述一个或多个技术方案，至少具有如下技术效果之一：

41、根据本技术的页面渲染方法，通过确定待渲染的目标页面组件的渲染优先级，并在目标页面组件的渲染优先级为第一优先级的情况下，将目标页面组件的渲染任务写入过渡任务队列，根据过渡任务队列执行队列中各页面组件的渲染任务，并采用可中断异步渲染模式，在完成目标页面组件的第一子任务后，通过浏览器层空闲检测机制，将目标页面组件的第二子任务延迟至页面渲染主线程的剩余空闲时间大于或等于空闲时间阈值时执行，能够降低主线程的阻塞时间，从而提高页面渲染的性能。

42、在一些实施例中，通过设定超时兜底机制，在等待时间大于或等于等待时间阈值的情况下强制执行第二子任务，能够减少组件内容在持续高负载场景下长时间不显示的情况。

43、在一些实施例中，通过在存在更高执行优先级的渲染任务的情况下，暂停执行过渡任务队列中的渲染任务，优先执行目标事件对应的渲染任务，能够提高对高优先级事件的响应速度。

44、在一些实施例中，通过对渲染优先级较高的组件，立即执行全部渲染任务，能够降低高优先级组件渲染的延迟。

45、在一些实施例中，通过将渲染优先级较低的组件的渲染任务完全延后至主线程的空闲时间段执行，能够减少低渲染优先级组件的渲染任务阻塞主线程的情况。

46、在一些实施例中，通过在未获取到目标页面组件的优先级标签的情况下，将目标页面组件的渲染优先级确定为其对应的父组件的渲染优先级，使子组件能够自动继承父组件的渲染策略，无需在每个子组件中重复声明优先级标签。

47、本技术的附加方面和优点将在下面的描述中部分给出，部分将从下面的描述中变得明显，或通过本技术的实践了解到。