【技术实现步骤摘要】
本专利技术涉及数据处理，尤其涉及一种页面组件加载处理方法和装置。
技术介绍
1、页面通常会设计多个组件，无论是后台管理系统，还是其他一些应用的页面，比如首页，如果涉及到大量组件，往往需要等待这些组件统一加载完毕之后再展示出来，整体渲染时间过长，因此会出现一部分白屏的刷新时间，不利于用户体验。
2、目前前端解决首页白屏提高加载速度的方法较多，包括减少打包后的体积，主要是关闭sourcemap的源码、cdn引入、路由懒加载、配置在路由文件中的页面和页面之间组件按需加载等等。但这些方式并未从根本上解决白屏问题，且维护成本高。
技术实现思路
1、有鉴于此，本专利技术实施例提供一种页面组件加载处理方法和装置，至少能够解决现有技术中一次渲染组件过多导致出现白屏现象。
2、为实现上述目的，根据本专利技术实施例的一个方面，提供了一种页面组件加载处理方法，包括：
3、响应于对浏览器中页面的打开操作，获取所述页面中每个组件的信息；
4、根据浏览器的屏幕信息、组件及组件中元素的面积信息，确定首屏显示的组件和组件中的元素，将确定的组件和元素划分到第一帧中；
5、确定非首屏外每个其他屏显示的组件和组件中的元素，将确定的组件和元素划分到相应帧中，对得到的帧做排序，并统计最大帧数量；
6、在按照帧排序每次渲染帧时，使用计数器计算已渲染的帧数量和本次待渲染的帧数量的累加值，响应于累加值小于最大帧数量，对当前待渲染的帧做渲染处理。
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、上述的非惯用的可选方式所具有的进一步效果将在下文中结合具体实施方式加以说明。
本文档来自技高网...【技术保护点】
1.一种页面组件加载处理方法，其特征在于，包括：
2.根据权利要求1所述的方法，其特征在于，所述在按照帧排序每次渲染帧时，使用计数器计算已渲染的帧数量和本次待渲染的帧数量的累加值，包括：
3.根据权利要求1所述的方法，其特征在于，所述响应于累加值小于最大帧数量，对当前待渲染的帧做渲染处理，还包括：
4.根据权利要求1-3中任一项所述的方法，其特征在于，组件信息还包括显示要求信息，所述方法还包括：
5.根据权利要求1所述的方法，其特征在于，最大帧数量为划分的帧总数和预设数值之和。
6.根据权利要求1所述的方法，其特征在于，所述页面为后台管理系统个人工作台的首页。
7.一种页面组件加载处理装置，其特征在于，包括：
8.根据权利要求7所述的装置，其特征在于，所述渲染模块，用于：
9.根据权利要求7所述的装置，其特征在于，所述渲染模块，还用于：
10.一种电子设备，其特征在于，包括：
11.一种计算机可读介质，其上存储有计算机程序，其特征在于，所述程序被处理器执行时实现
12.一种计算机程序产品，包括计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求1-6中任一项所述的方法。
...【技术特征摘要】
1.一种页面组件加载处理方法，其特征在于，包括：
2.根据权利要求1所述的方法，其特征在于，所述在按照帧排序每次渲染帧时，使用计数器计算已渲染的帧数量和本次待渲染的帧数量的累加值，包括：
3.根据权利要求1所述的方法，其特征在于，所述响应于累加值小于最大帧数量，对当前待渲染的帧做渲染处理，还包括：
4.根据权利要求1-3中任一项所述的方法，其特征在于，组件信息还包括显示要求信息，所述方法还包括：
5.根据权利要求1所述的方法，其特征在于，最大帧数量为划分的帧总数和预设数值之和。
6.根据权利要求1所述的方法，其特征在...
【专利技术属性】
技术研发人员：李钦坚，郭家豪，
申请(专利权)人：中国建设银行股份有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。