[发明专利]一种组件渲染方法、装置、电子设备及存储介质

说明书

本公开关于一种组件渲染方法、装置、电子设备及存储介质，包括：确定预设页面对应的帧计数值；帧计数值表征预设页面从被打开的时间点到当前时间点经过的帧数，若预设页面中的目标待渲染组件的渲染帧数大于等于帧计数值，对目标待渲染组件进行渲染，并显示在预设页面上。本申请通过目标待渲染组件的渲染帧数和帧计数值的比较可以确定目标待渲染组件是否满足渲染时机，进而可以精确控制渲染时机，同时避免了通过多个计时器造成的代码冗余现象。

技术领域

本公开涉及互联网技术领域，尤其涉及一种组件渲染方法、装置、电子设备及存储介质。

背景技术

随着当前的移动互联网的迅速发展，基于移动终端的信息资讯传播已经变得越来越成熟，通常，信息资讯通过渲染技术呈现在页面上。传统的页面渲染技术,是浏览器将HTL(Hypertext Markup Language,超文本标记语言)代码根据CSS(Cascading Style Sheets,层叠样式表)定义的规则显示在浏览器窗口中的过程。

在前端项目开发中，工程师除了完成需求外，也在不断的通过工程手段提升页面性能，加快页面渲染。其中，如何让用户更快的打开页面，一直是前端领域经久不衰的话题和探索方向。这是因为加快首屏渲染可以提升用户体验，提高页面触达率，进而提升业务用户的留存率。如果一个页面加载数秒都不能正常显示，用户显然更倾向关闭该页面。这样就造成了业务价值流失。

现有技术中，工程师可以给页面上的组件设置渲染时间，比如A组件在页面打开后的第0秒进行渲染，B组件在页面打开后的第0.01秒进行渲染，C组件在页面打开后的第0.02进行渲染。首先，为了使得每个组件可以在对应的时间点进行渲染，需要因为每个组件设置延迟而设置一个定时器，这就使得代码实现较为复杂和冗余，且因为设备的时间也不是完全准确的，因此，组件的渲染时间不能得到精准控制。

发明内容

本公开提供一种组件渲染方法、装置、电子设备及存储介质，本公开的技术方案如下：

根据本公开实施例的第一方面，提供一种组件渲染方法，包括：

确定预设页面对应的帧计数值；帧计数值表征预设页面从被打开的时间点到当前时间点经过的帧数；

若预设页面中的目标待渲染组件的渲染帧数大于等于帧计数值，对目标待渲染组件进行渲染，并显示在预设页面上。

在一些可能的实施例中，确定预设页面对应的帧计数值之前，还包括：

确定预设页面所在设备的当前帧率；

获取预设页面中的每个待渲染组件的渲染优先级；

基于每个待渲染组件的渲染优先级和当前帧率确定每个待渲染组件的渲染帧数；

目标待渲染组件为待渲染组件中的组件。

在一些可能的实施例中，获取预设页面中的每个待渲染组件的渲染优先级，包括：

在预设页面为非首次渲染页面，且预设页面中的组件中存在待渲染组件时，获取预设页面中的每个待渲染组件的渲染优先级；

非首次渲染页面表征预设页面在历史时段内被渲染过，且预设页面上的固定组件的渲染数据被保存。

在一些可能的实施例中，若预设页面中的目标待渲染组件的渲染帧数大于等于帧计数值，对目标待渲染组件进行渲染，包括：

若预设页面中的目标待渲染组件的渲染帧数大于等于帧计数值，将目标待渲染组件置于渲染队列；

基于渲染队列的渲染顺序对目标待渲染组件进行渲染。

在一些可能的实施例中，将目标待渲染组件置于渲染队列；基于渲染队列的渲染顺序对目标待渲染组件进行渲染，包括：

将目标待渲染组件的标识置于渲染队列；