一种高效率的网页动态渲染方法、系统、设备及介质与流程

本发明涉及数据处理，具体的，本发明应用于网页渲染，特别是涉及一种高效率的网页动态渲染方法、系统、设备及介质。

背景技术：

1、目前，数据在网页端进行渲染时，现有的技术方案通常采用全部渲染的方式，对页面中所有元素渲染完毕后予以输出显示，这种方式在面对少量数据时能够提升较佳的用户体验，而在面对大量数据的网页时，容易造成页面卡顿以及事件操作延迟响应，极大的影响用户的体验感，占用较大的瞬时计算资源，影响网页端的性能。

技术实现思路

1、本发明的目的在于，提供一种高效率的网页动态渲染方法、系统、设备及介质，进而解决现有技术中存在的上述所有问题或问题之一。

2、为解决上述技术问题，本发明的具体技术方案如下：

3、一方面，本发明提供一种高效率的网页动态渲染方法，包括以下步骤：

4、初始化配置步骤：

5、确定网页中的可视区域，并对所述可视区域进行方法绑定操作以及容器设置操作；

6、可视区域计算步骤：

7、设置元素数量计算公式，获取网页中可视区域的基准尺寸参数，基于所述元素数量计算公式和所述渲染基准参数计算可视区域高度参数以及可视区域元素参数；

8、可视区域渲染步骤：

9、基于所述可视区域高度参数以及所述可视区域元素参数进行网页中可视区域的渲染。

10、作为一种改进的方案，所述方法绑定操作，包括：

11、对网页中的所述可视区域进行onscroll方法的绑定；

12、所述容器设置操作，包括：

13、设置vlistcontainer为所述可视区域的容器，并对所述容器添加overflow-y:auto属性，为vlistcontainer绑定onscroll的响应函数。

14、作为一种改进的方案，所述获取网页中可视区域的基准尺寸参数，包括：

15、获取单个列表元素的固定高度；

16、获取list中数据的总条数；

17、获取所述可视区域的高度；

18、所述基于所述元素数量计算公式和所述渲染基准参数计算可视区域高度参数以及可视区域元素参数，包括：

19、基于所述单个列表元素的固定高度、所述list中数据的总条数、所述可视区域的高度以及所述元素数量计算公式计算页面的列表总高度以及所述可视区域内的展示元素数量；

20、设置所述列表总高度为所述可视区域高度参数；

21、设置所述可视区域内的展示元素数量为所述可视区域元素参数。

22、作为一种改进的方案，所述基于所述可视区域高度参数以及可视区域元素参数进行网页中可视区域的渲染，包括：

23、根据所述可视区域高度参数以及所述可视区域元素参数，采用vlistcontainer绑定的所述响应函数计算待渲染元素的开始索引和结束索引；

24、根据所述可视区域元素参数、所述开始索引和所述结束索引生成dom元素，并将生成的dom元素填充到所述可视区域中。

25、另一方面，本发明还提供一种高效率的网页动态渲染系统，包括：

26、初始化配置模块、可视区域计算模块和可视区域渲染模块；

27、所述初始化配置模块，用于确定网页中的可视区域，并对所述可视区域进行方法绑定操作以及容器设置操作；

28、所述可视区域计算模块，用于设置元素数量计算公式，并获取网页中可视区域的基准尺寸参数，所述可视区域计算模块基于所述元素数量计算公式和所述渲染基准参数计算可视区域高度参数以及可视区域元素参数；

29、所述可视区域渲染模块，用于基于所述可视区域高度参数以及可视区域元素参数进行网页中可视区域的渲染。

30、作为一种改进的方案，所述初始化配置模块，用于对网页中的所述可视区域进行onscroll方法的绑定；

31、所述初始化配置模块，用于设置vlistcontainer为所述可视区域的容器，并对所述容器添加overflow-y:auto属性，所述初始化配置模块为vlistcontainer绑定onscroll的响应函数。

32、作为一种改进的方案，所述可视区域计算模块，用于获取单个列表元素的固定高度、list中数据的总条数以及所述可视区域的高度；

33、所述可视区域计算模块，用于基于所述单个列表元素的固定高度、所述list中数据的总条数、所述可视区域的高度以及所述元素数量计算公式计算页面的列表总高度以及所述可视区域内的展示元素数量；所述可视区域计算模块设置所述列表总高度为所述可视区域高度参数；所述可视区域计算模块设置所述可视区域内的展示元素数量为所述可视区域元素参数。

34、作为一种改进的方案，所述可视区域渲染模块，用于根据所述可视区域高度参数以及所述可视区域元素参数，采用vlistcontainer绑定的所述响应函数计算待渲染元素的开始索引和结束索引；所述可视区域渲染模块根据所述可视区域元素参数、所述开始索引和所述结束索引生成dom元素，并将生成的dom元素填充到所述可视区域中。

35、另一方面，本发明还提供一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现所述高效率的网页动态渲染方法的步骤。

36、另一方面，本发明还提供一种计算机设备，所述计算机设备包括处理器、通信接口、存储器和通信总线，其中，所述处理器，所述通信接口，所述存储器通过所述通信总线完成相互间的通信；其中：

37、所述存储器，用于存放计算机程序；

38、所述处理器，用于通过运行所述存储器上所存放的程序来执行所述高效率的网页动态渲染方法的步骤。

39、本发明技术方案的有益效果是：

40、本发明所述的高效率的网页动态渲染方法，可以实现采用动态渲染的方式对网页中用户可视区域部分的元素进行渲染，进而带面对大数据渲染需求时，提升一定的渲染效率和性能，动态渲染不会占用较大的性能资源，能够在页面渲染时立即响应用户的事件操作，提高用户的使用体验，以及页面加载的流畅性，弥补现有技术的缺陷。

41、本发明所述的高效率的网页动态渲染系统，可以实现采用动态渲染的方式对网页中用户可视区域部分的元素进行渲染，进而带面对大数据渲染需求时，提升一定的渲染效率和性能，动态渲染不会占用较大的性能资源，能够在页面渲染时立即响应用户的事件操作，提高用户的使用体验，以及页面加载的流畅性，弥补现有技术的缺陷。

42、本发明所述的计算机可读存储介质，可以实现保存本发明所述的高效率的网页动态渲染方法，且本发明所述的计算机可读存储介质还有效提高所述高效率的网页动态渲染方法的可操作性。

43、本发明所述的计算机设备，可以实现存储并执行所述计算机可读存储介质，进而实现本发明所述的高效率的网页动态渲染方法。

技术特征：

1.一种高效率的网页动态渲染方法，其特征在于，包括以下步骤：

2.根据权利要求1所述的一种高效率的网页动态渲染方法，其特征在于：

3.根据权利要求1所述的一种高效率的网页动态渲染方法，其特征在于：

4.根据权利要求2所述的一种高效率的网页动态渲染方法，其特征在于：

5.一种高效率的网页动态渲染系统，其特征在于，包括：初始化配置模块、可视区域计算模块和可视区域渲染模块；

6.根据权利要求5所述的一种高效率的网页动态渲染系统，其特征在于：

7.根据权利要求5所述的一种高效率的网页动态渲染系统，其特征在于：

8.根据权利要求5所述的一种高效率的网页动态渲染系统，其特征在于：

9.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现权利要求1~4中任一项所述高效率的网页动态渲染方法的步骤。

10.一种计算机设备，其特征在于，包括处理器、通信接口、存储器和通信总线，其中，所述处理器，所述通信接口，所述存储器通过所述通信总线完成相互间的通信；其中：

技术总结
本发明公开了一种高效率的网页动态渲染方法、系统、设备及介质，所述方法包括以下步骤：确定网页中的可视区域，并对可视区域进行方法绑定操作以及容器设置操作；设置元素数量计算公式，获取网页中可视区域的基准尺寸参数，基于元素数量计算公式和渲染基准参数计算可视区域高度参数以及可视区域元素参数；基于可视区域高度参数以及可视区域元素参数进行网页中可视区域的渲染；本发明能够采用动态渲染的方式对网页中用户可视区域部分的元素进行渲染，进而带面对大数据渲染需求时，提升渲染效率和性能，动态渲染不会占用较大的性能资源，能够在页面渲染时立即响应用户的事件操作，提高用户使用体验，以及页面加载流畅性。

技术研发人员：韩程秋,胡焱,安静
受保护的技术使用者：浪潮金融信息技术有限公司
技术研发日：
技术公布日：2024/3/21