vue 大数据列表滚动卡顿问题
因为项目是前后端不分离,百度搜了一圈暂时没有找到其他解决方法,都知道随着数据体量变得越来越大一次加载几K,几W条数据随处可见,大量渲染dom节点,消耗内存耗性能,渲染十分的慢,而且常规分页加载懒加载是解决不了问题的!
1、解决方案:
虚拟列表
2、什么是虚拟列表
虚拟列表就是只对可见区域进行渲染,对非可见区域中的数据不渲染或部分渲染,以实现减少消耗,提高用户体验的技术。它是长列表的一种优化方案,性能良好。
3、实现思路
(1)写一个代表可视区域的div,固定其高度,通过overflow使其允许纵向 Y 轴滚动。
(2)第二步,计算区域中可以显示的数据条数。这个可以用可视区域的高度除以单条数据高度得到。
(3)监听滚动,当滚动条变化时,计算出被卷起的数据的高度。
(4)计算区域内数据的起始索引,也就是区域内的第一条数据:这个用卷起的高度除以单条数据高度可以拿到。
(5)计算区域内数据的结束索引。通过起始索引+可显示的数据的条数可以拿到。
(6)取起始索引和结束索引中间的数据,渲染到可视区域。
(7)计算起始索引对应的数据在整个列表中的偏移位置并设置到列表上。
整个步骤下来,最终的效果是:不论怎么滚动,我们改变的只是滚动条的高度和可视区的元素内容。每次只会渲染一个固定的条数,不会增加多余元素。
4、demo
<template> <div :style="{height: `${contentHeight}px`}" class="content_box" @scroll="scroll"> <!--这层div是为了把高度撑开,让滚动条出现,height值为所有数据总高--> <div :style="{'height': `${itemHeight*(listAll.length)}px`, 'position': 'relative'}"> <!--可视区域里所有数据的渲染区域--> <div :style="{'position': 'absolute', 'top': `${top}px`}"> <!--单条数据渲染区域--> <div v-for="(item,index) in showList" :key="index" class="item"> {{item}} </div> </div> </div> </div> </template> <script> export default { name: "list", data(){ return{ listAll: [], //所有数据 showList: [], //可视区域显示的数据 contentHeight: 500, //可视区域高度 itemHeight: 30, //每条数据所占高度 showNum: 0, //可是区域显示的最大条数 top: 0, //偏移量 scrollTop: 0, //卷起的高度 startIndex: 0, //可视区域第一条数据的索引 endIndex: 0, //可视区域最后一条数据后面那条数据的的索引,因为后面要用slice(start,end)方法取需要的数据,但是slice规定end对应数据不包含在里面 } }, methods:{ //构造10万条数据 getList(){ for(let i=0;i<100000;i++){ this.listAll.push(`我是第${i}条数据呀`) } }, //计算可视区域数据 getShowList(){ this.showNum = Math.ceil(this.contentHeight/this.itemHeight); //可视区域最多出现的数据条数,值是小数的话往上取整,因为极端情况是第一条和最后一条都只显示一部分 this.startIndex = Math.floor(this.scrollTop/this.itemHeight); //可视区域第一条数据的索引 this.endIndex = this.startIndex + this.showNum; //可视区域最后一条数据的后面那条数据的索引 this.showList = this.listAll.slice(this.startIndex, this.endIndex) //可视区域显示的数据,即最后要渲染的数据。实际的数据索引是从this.startIndex到this.endIndex-1 const offsetY = this.scrollTop - (this.scrollTop % this.itemHeight); //在这需要获得一个可以被itemHeight整除的数来作为item的偏移量,这样随机滑动时第一条数据都是完整显示的 this.top = offsetY; }, //监听滚动事件,实时计算scrollTop scroll(){ this.scrollTop = document.querySelector('.content_box').scrollTop; //element.scrollTop方法可以获取到卷起的高度 this.getShowList(); } }, mounted() { this.getList(); this.scroll(); } } </script> <style scoped> .content_box{ overflow: auto; /*只有这行代码写了,内容超出高度才会出现滚动条*/ width: 700px; border: 1px solid red; } /*每条数据的样式*/ .item{ height:30px; padding: 5px; color: #666; box-sizing: border-box; } </style>