本发明涉及前端显示，尤其涉及一种前端列表渲染方法、装置、计算机设备及存储介质。
背景技术：
1、随着互联网技术的飞速发展和移动设备的普及，用户对web应用的期望值越来越高。特别是在数据密集型的应用场景中，如电子商务网站的商品列表、社交媒体的信息流、新闻门户的文章聚合等，用户希望能够快速、流畅地浏览大量的数据。然而，传统的前端页面渲染技术在处理长列表时面临诸多挑战。
2、传统的前端页面渲染通常采用同步加载和一次性渲染的方式，即在页面加载时获取所有数据，并一次性构建完整的dom树。这种方式在数据量较小的情况下表现良好，但在面对长列表时，会遭遇以下问题：性能瓶颈：大量dom节点的创建和布局计算导致浏览器渲染性能急剧下降；内存压力：大量dom节点占用大量内存，可能导致浏览器崩溃或响应缓慢；用户体验差：页面加载时间长，滚动时出现卡顿，影响用户操作和浏览体验。
技术实现思路
1、本发明实施例的目的在于提出一种前端列表渲染方法、装置、计算机设备及存储介质，以解决传统的前端页面渲染时，因大量dom节点的创建和布局计算导致浏览器渲染性能急剧下降的问题。
2、为了解决上述技术问题，本发明提供一种前端列表渲染方法，采用了如下所述的技术方案，包括步骤：
3、获取列表数据，将所述列表数据分割成多个数据块，仅渲染可视区域内的多个所述数据块，预加载即将进入可视区域的多个所述数据块；
4、根据用户的滚动行为，动态加载多个所述数据块，预测用户的滚动方向和速度，提前加载将需要加载的多个所述数据块；
5、将每个列表项封装为独立的组件，使用状态管理库来维护和管理列表的状态；
6、限制滚动事件的处理频率，在用户停止滚动一段时间后，再进行所述数据块的加载或渲染；
7、在后台开启多线程处理数据，对数据进行解析、过滤和排序；
8、最小化dom操作次数，利用css变换和动画来实现列表项的移动和隐藏。
9、优选地，所述获取列表数据，将所述列表数据分割成多个数据块，仅渲染可视区域内的多个所述数据块，预加载即将进入可视区域的多个所述数据块的步骤具体还包括：
10、通过api请求，从后端或本地存储中获取列表数据；
11、根据列表项的高度、可视区域的高度，将列表数据分割成多个数据块，确定每个数据块所包含的列表项数；
12、通过监听滚动事件、计算滚动位置方式，仅渲染可视区域内的多个数据块；
13、预加载即将进入可视区域的多个数据块。
14、优选地，所述根据用户的滚动行为，动态加载多个所述数据块，预测用户的滚动方向和速度，提前加载将需要加载的多个所述数据块的步骤具体包括：
15、根据用户的滚动行为，动态加载多个数据块；
16、预测用户滚动方向和速度，提前加载即将需要加载的数据块。
17、优选地，所述将每个列表项封装为独立的组件，使用状态管理库来维护和管理列表的状态的步骤具体包括：
18、定义列表数据结构；
19、创建列表项组件；
20、使用v-for指令渲染列表；
21、添加唯一标识key；
22、引入状态管理库；
23、在状态管理库中定义列表状态；
24、在组件中使用状态管理库；
25、封装和复用。
26、优选地，所述限制滚动事件的处理频率，在用户停止滚动一段时间后，再进行所述数据块的加载或渲染的步骤具体还包括：
27、监听滚动事件；
28、记录滚动时间；
29、比较时间差；
30、执行加载或渲染操作。
31、优选地，所述在后台开启多线程处理数据，对数据进行解析、过滤和排序的步骤具体还包括：
32、数据接收：后台服务接收来自数据库的数据；
33、多线程分配：根据数据的类型和数量，后台服务动态分配多个线程进行并行处理；
34、数据解析：每个线程对分配到的数据进行解析，将其转化为适合处理的数据结构；
35、数据过滤：根据前端的需求，对数据进行过滤；
36、数据排序：对过滤后的数据进行排序；
37、数据格式化：将排序后的数据格式化为前端能够识别的格式；
38、数据返回：将格式化后的数据返回给前端服务。
39、优选地，所述最小化dom操作次数，利用css变换和动画来实现列表项的移动和隐藏的步骤具体还包括：
40、使用vue.js的虚拟dom和diff算法，来最小化dom操作次数；
41、进行列表优化；
42、添加css样式，利用css过渡；
43、触发css动画。
44、为了解决上述技术问题，本发明还提供一种前端列表渲染装置，采用了如下所述的技术方案，包括：
45、预加载模块，用于获取列表数据，将所述列表数据分割成多个数据块，仅渲染可视区域内的多个所述数据块，预加载即将进入可视区域的多个所述数据块；
46、加载模块，用于根据用户的滚动行为，动态加载多个所述数据块，预测用户的滚动方向和速度，提前加载将需要加载的多个所述数据块；
47、管理模块，用于将每个列表项封装为独立的组件，使用状态管理库来维护和管理列表的状态；
48、限制模块，用于限制滚动事件的处理频率，在用户停止滚动一段时间后，再进行所述数据块的加载或渲染；
49、处理模块，用于在后台开启多线程处理数据，对数据进行解析、过滤和排序；
50、优化模块，用于最小化dom操作次数，利用css变换和动画来实现列表项的移动和隐藏。
51、为了解决上述技术问题，本发明还提供一种计算机设备，采用了如下所述的技术方案，包括存储器和处理器，所述存储器中存储有计算机可读指令，所述处理器执行所述计算机可读指令时实现上述的前端列表渲染方法的步骤。
52、为了解决上述技术问题，本发明还提供一种计算机可读存储介质，采用了如下所述的技术方案，所述计算机可读存储介质上存储有计算机可读指令，所述计算机可读指令被处理器执行时实现上述的前端列表渲染方法的步骤。
53、与现有技术相比，本发明主要有以下有益效果：通过虚拟滚动和其他优化技术，显著减少了dom操作和重绘/重排次数，从而提升了页面的渲染性能；避免了一次性加载和渲染所有列表项，有效降低了内存占用，减少了因内存不足导致的性能问题或应用崩溃；实现了平滑的滚动体验，无明显卡顿或延迟，即使在数据量巨大的情况下也能保持流畅的交互，改善了用户体验；通过延迟加载和智能预加载技术，加快了数据的响应速度，用户可以更快地看到需要的信息，响应速度加快；设计灵活，易于扩展，可以适应不同规模的数据集和多样化的业务需求，可扩展性强；兼容主流浏览器和设备，确保了广泛的用户覆盖和一致的体验，兼容性强；组件化设计和状态管理的使用，使得代码更加模块化，易于开发和维护；通过服务端和客户端的数据一致性检查，确保了显示的数据是准确和最新的，数据的准确性有保障；开发者可以根据具体需求调整数据块的大小、加载策略等参数，实现定制化的渲染效果，灵活性强；通过减少一次性请求大量数据的情况，减轻了服务器的负担，提高了服务的稳定性和扩展性，减轻服务器负担；统一的渲染方案和工具库使得开发者能够快速实现长列表功能，加快开发速度，提高开发效率。
1.一种前端列表渲染方法，其特征在于，包括下述步骤：
2.根据权利要求1所述的前端列表渲染方法，其特征在于，所述获取列表数据，将所述列表数据分割成多个数据块，仅渲染可视区域内的多个所述数据块，预加载即将进入可视区域的多个所述数据块的步骤具体还包括：
3.根据权利要求1所述的前端列表渲染方法，其特征在于，所述根据用户的滚动行为，动态加载多个所述数据块，预测用户的滚动方向和速度，提前加载将需要加载的多个所述数据块的步骤具体包括：
4.根据权利要求1所述的前端列表渲染方法，其特征在于，所述将每个列表项封装为独立的组件，使用状态管理库来维护和管理列表的状态的步骤具体包括：
5.根据权利要求1所述的前端列表渲染方法，其特征在于，所述限制滚动事件的处理频率，在用户停止滚动一段时间后，再进行所述数据块的加载或渲染的步骤具体还包括：
6.根据权利要求1所述的前端列表渲染方法，其特征在于，所述在后台开启多线程处理数据，对数据进行解析、过滤和排序的步骤具体还包括：
7.根据权利要求1至6任意一项所述的前端列表渲染方法，其特征在于，所述最小化dom操作次数，利用css变换和动画来实现列表项的移动和隐藏的步骤具体还包括：
8.一种前端列表渲染装置，其特征在于，包括：
9.一种计算机设备，包括存储器和处理器，所述存储器中存储有计算机可读指令，所述处理器执行所述计算机可读指令时实现如权利要求1至7中任一项所述的前端列表渲染方法的步骤。
10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有计算机可读指令，所述计算机可读指令被处理器执行时实现如权利要求1至7中任一项所述的前端列表渲染方法的步骤。
