一种JS虚拟列表渲染方法与流程

一种js虚拟列表渲染方法
技术领域
1.本发明涉及软件开发技术领域，具体为一种js虚拟列表渲染方法。


背景技术：

2.随着前端应用的发展，现如今的前端应用变得更加复杂。前端虚拟列表主要为了解决在复杂的现实场景中，页面列表元素数量过于庞大而导致的页面卡顿，页面请求过慢，白屏，甚至页面崩溃等问题，现实场景中，对于数据列表渲染主要有两种，一种是获取数据列表，直接对所有数据进行展示，然后在页面上下滚动的时候，做数据加载，并进行数据列表渲染。第二种是使用页面滚动去实时计算列表在可视区域的滚动距离，并在上下的区域设置缓冲区域，滚动的时候在缓冲区域做数据释放，并去掉滚动的多余数据，再做列表渲染。
3.上述方法存在如下问题：
4.缺点1：
5.第一种方法当页面的dom元素过多的时候，一直增加新的dom元素，会导致页面的冗余元素过多，页面的回流和重绘需要的性能逐渐变大，会导致页面卡顿，甚至页面崩溃等性能问题。
6.缺点2：
7.第二种的页面滚动，在每次滚动的时候都要重新计算出可视区域的列表移动的量，同时还要计算出上下缓冲区在移动过程中，增加的量，和减少的量。当页面快速滑动时，因为大量的javascript计算会造成页面的卡顿，甚至出现dom元素没来得及渲染的空白区域。
8.缺点3：
9.第二种在使用的时候需要实时监听列表的滚动，来获知当前页面滚动的距离，并作出对应的处理，相对复杂。
10.因此，针对上述问题提出一种js虚拟列表渲染方法。


技术实现要素：

11.本发明的目的在于提供一种js虚拟列表渲染方法,以解决上述背景技术中提出的问题。
12.为实现上述目的，本发明提供如下技术方案：
13.一种js虚拟列表渲染方法，包括如下步骤：
14.步骤一：获取列表的数据，渲染出列表的dom，并计算出需要监听的startindex和endindex；
15.步骤二：列表滚动时判断当前所监听的dom是否超过设置的监听阈值，超过阈值执行第三步，没超过则继续滚动；
16.步骤三：startindex超过阈值执行intersectionoberve的回调函数，添加新的dom
元素，释放出旧的多余的dom元素，重新渲染列表，endinex在超过阈值的时候，添加新dom，释放旧的dom元素，重新渲染列表。
17.优选的，intersectionoberve用来在可视区域内监听子元素与父元素的距离。
18.优选的，intersectionoberve有一个回调函数，和三个参数，参数包括参数root、rootmargin和threshold；参数root用来定义列表的可视区域的父元素的上下边界，rootmargin用来定义列表的子元素相对于父元素的偏移量，做数据操作，threshold是监听的目标相对列表盒边界的交叉的比例数值，有0.0到1.0，在监听元素在交叉的比例为0.0的时候代表监听元素进入可视区域。
19.优选的，在列表渲染的时候，先计算可视区域的可视区及可以展示的列表个数，之后标记可视区域的第一个元素为startindex、最后一个元素为endindex，并在之后的列表偏移使用intersectionoberve动态创建监听。
20.优选的，监听第一个startindex完全移出可视区域的时候，请求后续的列表，并动态删除之前的dom元素，保持列表的长度，同样的监听endindex是否偏移出，在监听到偏移出可视区域，执行回调函数做列表数据的添加，和切割处理。
21.与现有技术相比，本发明的有益效果是：
22.1、本发明使用的是虚拟列表，每次渲染只需要渲染对应可视区域的列表，所以它的dom元素是固定的，而原方案的元素累加就会导致大量的数据冗余，会使页面负载过大。本发明将会优化这种情况，使页面元素过大的时候用户体验更好，更加顺畅；
23.2、本发明使用了intersectionoberve做为页面监听，不需要高频率的计算，列表滚动时的偏移量，减少了性能损耗，在页面快速滚动的时候也会减少因为计算量太大导致的页面卡顿，白屏等问题的出现；
24.3、本发明使用了intersectionoberve，只要设置监听对象相对于可视区域边框的偏移量，就会在达到偏移量的时候触发回调函数，做接下来的操作。
附图说明
25.图1为本发明一种js虚拟列表渲染方法流程示意图。
具体实施方式
26.下为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。
27.需要说明的是，当元件被称为“固定于”或“设置于”另一个元件，它可以直接在另一个元件上或者间接在该另一个元件上。当一个元件被称为是“连接于”另一个元件，它可以是直接连接到另一个元件或间接连接至该另一个元件上。
28.在本发明的描述中，需要理解的是，术语“长度”、“宽度”、“上”、“下”、“前”、“后”、“左”、“右”、“竖直”、“水平”、“顶”、“底”“内”、“外”等指示的方位或位置关系为基于附图所示的方位或位置关系，仅是为了便于描述本发明和简化描述，而不是指示或暗示所指的装置或元件必须具有特定的方位、以特定的方位构造和操作，因此不能理解为对本发明的限制。
29.此外，术语“第一”、“第二”仅用于描述目的，而不能理解为指示或暗示相对重要性或者隐含指明所指示的技术特征的数量。由此，限定有“第一”、“第二”的特征可以明示或者隐含地包括一个或者更多个该特征。在本发明的描述中，“多个”的含义是两个或两个以上，除非另有明确具体的限定。
30.为了更好地理解上述技术方案，下面将结合说明书附图以及具体实施方式对上述技术方案进行详细的说明。
31.实施例：
32.请参阅图1，本实施例提供一种技术方案：
33.一种js虚拟列表渲染方法，包括如下步骤：
34.步骤一：获取列表的数据，渲染出列表的dom，并计算出需要监听的startindex和endindex；
35.步骤二：列表滚动时判断当前所监听的dom是否超过设置的监听阈值，超过阈值执行第三步，没超过则继续滚动；
36.步骤三：startindex超过阈值执行intersectionoberve的回调函数，添加新的dom元素，释放出旧的多余的dom元素，重新渲染列表，endinex在超过阈值的时候，添加新dom，释放旧的dom元素，重新渲染列表。
37.本实施例中，主要使用javascript的intersectionoberve方法做dom监听结合虚拟列表做列表渲染，intersectionoberve主要用来在可视区域内监听子元素与父元素的距离，intersectionoberve有一个回调函数，和三个参数。参数root，在本例中主要用来定义列表的可视区域的父元素的上下边界，rootmargin则是用来定义列表的子元素相对于父元素的偏移量，做数据操作。threshold是监听的目标相对列表盒边界的交叉的比例数值，有0.0到1.0，在监听元素在交叉的比例为0.0的时候代表监听元素进入可视区域。
38.进一步，在列表渲染的时候，我们先算可视区域的可视区，可以展示的列表个数，之后标记可视区域的第一个元素为startindex最后一个元素为endindex，并在之后的列表偏移使用intersectionoberve动态创建监听，监听第一个startindex完全移出可视区域的时候，请求后续的列表，并动态删除之前的dom元素，保持列表的长度，同样的监听endindex是否偏移出。在监听到偏移出可视区域，执行回调函数做列表数据的添加，和切割处理。
39.尽管已经示出和描述了本发明的实施例，对于本领域的普通技术人员而言，可以理解在不脱离本发明的原理和精神的情况下可以对这些实施例进行多种变化、修改、替换和变型，本发明的范围由所附权利要求及其等同物限定。

技术特征：
1.一种js虚拟列表渲染方法，其特征在于：包括如下步骤：步骤一：获取列表的数据，渲染出列表的dom，并计算出需要监听的startindex和endindex；步骤二：列表滚动时判断当前所监听的dom是否超过设置的监听阈值，超过阈值执行第三步，没超过则继续滚动；步骤三：startindex超过阈值执行intersectionoberve的回调函数，添加新的dom元素，释放出旧的多余的dom元素，重新渲染列表，endinex在超过阈值的时候，添加新dom，释放旧的dom元素，重新渲染列表。2.根据权利要求1所述的一种js虚拟列表渲染方法，其特征在于：intersectionoberve用来在可视区域内监听子元素与父元素的距离。3.根据权利要求1所述的一种js虚拟列表渲染方法，其特征在于：intersectionoberve有一个回调函数，和三个参数，参数包括参数root、rootmargin和threshold；参数root用来定义列表的可视区域的父元素的上下边界，rootmargin用来定义列表的子元素相对于父元素的偏移量，做数据操作，threshold是监听的目标相对列表盒边界的交叉的比例数值，有0.0到1.0，在监听元素在交叉的比例为0.0的时候代表监听元素进入可视区域。4.根据权利要求1所述的一种js虚拟列表渲染方法，其特征在于：在列表渲染的时候，先计算可视区域的可视区及可以展示的列表个数，之后标记可视区域的第一个元素为startindex、最后一个元素为endindex，并在之后的列表偏移使用intersectionoberve动态创建监听。5.根据权利要求4所述的一种js虚拟列表渲染方法，其特征在于：监听第一个startindex完全移出可视区域的时候，请求后续的列表，并动态删除之前的dom元素，保持列表的长度，同样的监听endindex是否偏移出，在监听到偏移出可视区域，执行回调函数做列表数据的添加，和切割处理。

技术总结
本发明涉及软件开发技术领域，尤其为一种JS虚拟列表渲染方法。本发明，使用的是虚拟列表，每次渲染只需要渲染对应可视区域的列表，所以它的dom元素是固定的，而原方案的元素累加就会导致大量的数据冗余，会使页面负载过大。本发明将会优化这种情况，使页面元素过大的时候用户体验更好，更加顺畅；使用了intersectionOberve做为页面监听，不需要高频率的计算，列表滚动时的偏移量，减少了性能损耗，在页面快速滚动的时候也会减少因为计算量太大导致的页面卡顿，白屏等问题的出现；使用了intersectionOberve，只要设置监听对象相对于可视区域边框的偏移量，就会在达到偏移量的时候触发回调函数，做接下来的操作。做接下来的操作。做接下来的操作。


技术研发人员：林伟杰
受保护的技术使用者：厦门最有料数字科技有限公司
技术研发日：2023.05.25
技术公布日：2023/8/9