[发明专利]一种页面显示方法、装置、电子设备及存储介质

说明书

本申请公开了一种页面显示方法、装置、电子设备及存储介质。其中，页面显示方法包括：在设定列表中的列表元素发生更新的情况下，通过第一数量的设定DOM元素将所述设定列表中对应的列表元素渲染至设定页面中；所述设定列表的列表长度与所述第一数量相等；所述设定页面支持同时显示待渲染数组中所述第一数量的数据；在监听到所述设定列表中的尾列表元素被渲染至所述设定页面中的情况下，将所述设定列表中的列表元素更新为在所述待渲染数据中位于第一数据之后的所述第一数量的数据；其中，所述第一数据为所述设定列表更新前的尾列表元素表征的数据。

技术领域

本申请属于前端开发技术领域，尤其涉及一种页面显示方法、装置、电子设备及存储介质。

背景技术

通常，浏览页面侧边会加载一个滚动条，以供用户滚动浏览页面，浏览器需要监听滚动条的滚动事件，根据滚动事件加载显示内容。浏览器在监听到滚动事件之后，获取滚动条的滚动距离，根据滚动距离计算页面内可以显示的数据行数，再把对应数量的数据动态添加至文档对象模型(DOM，Document Object Model)中，从而将数据转换成DOM元素，最终在页面中渲染出对应的数据。实际应用时，滚动条的滚动距离动态变化，需要基于动态变化的滚动距离反复执行上述操作，当存在大量待显示的数据时，会导致浏览器占用大量的内存开销，从而造成浏览器性能下降。

发明内容

有鉴于此，本申请实施例的主要目的在于提供一种页面显示方法、装置、电子设备及存储介质，以解决相关技术中在页面中滚动显示数据时浏览器性能下降的问题。

为达到上述目的，本申请实施例的技术方案是这样实现的：

本申请实施例提供了一种页面显示方法，包括：

在设定列表中的列表元素发生更新的情况下，通过第一数量的设定DOM元素将所述设定列表中对应的列表元素渲染至设定页面中；所述设定列表的列表长度与所述第一数量相等；所述设定页面支持同时显示待渲染数组中所述第一数量的数据；

在监听到所述设定列表中的尾列表元素被渲染至所述设定页面中的情况下，将所述设定列表中的列表元素更新为在所述待渲染数据中位于第一数据之后的所述第一数量的数据；其中，

所述第一数据为所述设定列表更新前的尾列表元素表征的数据。

上述方案中，还包括：

通过填充(padding)的方式在所述设定页面上加载滚动条。

上述方案中，所述通过padding的方式在所述设定页面上加载滚动条时，所述方法包括：

基于每个列表元素在所述设定页面中的渲染高度和所述第一数量的设定DOM元素累积渲染的列表元素的个数，确定padding的增量。

上述方案中，还包括：

通过交叉观察函数监听所述设定列表中的尾列表元素是否被渲染至所述设定页面中。

上述方案中，还包括：

当监听到滚动事件时，监听所述设定列表中的尾列表元素是否被渲染至所述设定页面中。

上述方案中，所述通过第一数量的设定DOM元素将所述设定列表中对应的列表元素渲染至设定页面中时，所述方法包括：

确定列表元素表征的数据在所述待渲染数组中对应的索引；

根据确定出的索引，从所述待渲染数组中查询出对应的数据并渲染至所述设定页面中。

上述方案中，所述方法还包括：

在加载所述设定页面时，为所述设定列表中的每个列表元素添加对应的设定DOM元素。

本申请实施例提供了一种页面显示装置，所述装置包括：