关于 vue 无缝滚动组件性能问题的探讨

Question

组件地址:https://github.com/chenxuan0000/vue-seamless-scroll
将近 1k 的 star 应该不错~~
但是最近使用项目的时候碰到 客户电脑上 性能表现比较差,自己模拟了下场景

<template>
    <vue-seamless-scroll :data="listData" class="seamless-warp">
        <ul class="item">
            <li v-for="item in listData">
                <span class="title" v-text="item.title"></span><span class="date" v-text="item.date"></span>
            </li>
        </ul>
    </vue-seamless-scroll>
</template>

<style lang="scss" scoped>
    .seamless-warp {
        height: 229px;
        overflow: hidden;
    }
</style>

<script>
    export default {
        data () {
            return {
                listData:[]
            }
        }
        mounted(){
            const length=9999//数据条数
            let data = []
            console.time()
            for(let i=0;i<length;i++){
                data.push({title:i,date:new Date().getTime()})
            }
            this.listData = Object.freeze(data)//听说这个方法可以提高性能  亲测可以提高 60%左右
            this.$nextTick(()=>{
                console.timeEnd();
            })
        }
    }
   
</script>

//简单测试下了 结果如下(每个数据条数测试10ci 取得平均值)

数据条数	平均用时
1000	40ms
10000	180ms
50000	900ms	tips:此时界面会白屏三四秒 再显示组件
100000	直接加载不出来了....

请问各位大佬 还有什么极致的性能体验吗 还是要从产品身上砍需求~~

结合各位的问题我简单说下此功能的场景(可以反驳需求的合理性)
这个是使用在大屏看板项目上的, 主要找不到这个组件是否支持分页渲染....大概是没有吧 或者这个组件本身就不考虑为大量数据做渲染?

Answer 1

好奇问一下, 这里的数据条数指的是每次加载的条数, 还是目前存在的数据总数

Answer 2

下拉加载，每一页10条，应该不会有什么性能的问题吧

Answer 3

为什么要一次性加载这么多数据

Answer 4

你可能需要一款支持 virtualScroll 的滚动组件，VirtualScroll 原理是只渲染可视范围内的 DOM。

顺手搜索了一下，https://akryum.github.io/vue-virtual-scroller 10万条数据可能还是要测试一下。