美文网首页
当List数据量过大, app渲染慢导致卡顿问题解决

当List数据量过大, app渲染慢导致卡顿问题解决

作者: 扶得一人醉如苏沐晨 | 来源:发表于2022-10-28 09:36 被阅读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)
                },
    

    相关文章

      网友评论

          本文标题:当List数据量过大, app渲染慢导致卡顿问题解决

          本文链接:https://www.haomeiwen.com/subject/ucixtdtx.html