当List数据量过大， app渲染慢导致卡顿问题解决
- 前端
- 扶得一人醉如苏沐晨
- 0
项目中有一个功能中有个几百多条的列表，这个列表总是展示很慢，刚开始我以为是后台返回结果慢，后来测试发现是渲染慢,网上搜索说是v-for渲染的问题，建议加上key属性。但是我加了key属性后并没有解决问题，进一步了解发现key属性只在二次渲染的时候起作用，于是我转念一想我把这100条数据分页加载不就行了，但是由于vue的渲染触发机制，分页加载并没有起作用，于是我进步探究，终于使用延时分页加载解决了这个问题，分享给大家这段代码。
list需要延迟加载的全部list
pageSize每次延迟加载的数据条数
current初始页默认0
delay延迟时间
delayloadDp(list, pageSize, current, delay) {
//延时加载
if (current != 0) {
current++
}
for (let i = current; i < list.length; i++) {
this.dataList.push(list[i]);
current = i
if (i != 0 && i % pageSize == 0) {
break
}
}
if (this.dataList=== list.length) {
return
}
setTimeout(() => {
this.delayloadDp(list, pageSize, current, delay)
}, 200 + delay)
},
免责申明：本站发布的内容（图片、视频和文字）以转载和分享为主，文章观点不代表本站立场，如涉及侵权请联系站长邮箱：xbc-online@qq.com进行反馈，一经查实，将立刻删除涉嫌侵权内容。
