vue多数据前端渲染优化

vue多数据前端渲染优化

方法1：使用vue3进行编写的列表渲染优化,主要思想为:为避免在拿到超大数据时前端渲染慢,在拿到数据时根据需求控制可以渲染的数据条数,根据空白div占位,计算当前应该渲染的数据,只对当前应该展示的数据进行渲染
方法2：类似vscode处理方式，方法1的优化方案。当列表的高度不统一的时候，就像带日期的相册显示，这时候的内容展示就不能直接把列表渲染出来，需要使用定位把图片和日期放到应该在的位置。给滚动区域一个position：relative；列表里面的每一项都有自己的position：absolute；top：xxx；left：xxx；因为图片的每一行展示的数量是实时在变化的，需要监听dom宽度变化，修改当前渲染的图片的位置，然后把图片放到对应的位置上，只渲染当前可视区范围内的项就可以，这个是写到了移动云盘的个人云列表和传输列表上，优化体验做的。

css

        #app .context {
            width: 300px;
            border: 1px solid gray;
            overflow: hidden;
            margin: 100px auto;
            position: relative;
        }
        #app .context .absolute {
            height: 100%;
            position: absolute;
            top: 0px;
        }
        #app .context .absolute div {
            box-sizing: border-box;
        }
        #app .context .scrollArea {
            height: 100%;
            overflow: auto;
        }

html

<div id="app">
        <div class="context" :style="contextHeight">
            <div class="absolute">
                <div  v-for="data in counter" id="data" :style="lineHeight">
                    {{data}}
                </div>
            </div>
            <div class="scrollArea" @scroll="appScroll">
                <div :style="spaceStyle">
                </div>
            </div>
        </div>
    </div>

script

<script src="https://lib.baomitu.com/vue/3.2.0/vue.global.js"></script>
<script>
    // 创建一个长度1000的数组,值是下标
    const List = new Array(1000).keys();
    const arrList = Array.from(List);
    const propsLineHeight = 20;
    const propsLiseNum = 17;
    // 从vue中获取创建函数
    const { createApp, ref, computed } = Vue;
    const app = createApp({
        setup() {
            // 数据列表
            const centerList = ref(arrList);
            const scrollTop = ref(0);
            // 空白空间所占位置
            const spaceStyle = computed(()=>{
                return {height : centerList.value.length * propsLineHeight + 'px'};
            })
            // 数据展示行高
            const lineHeight = computed(()=>{
                return {height : propsLineHeight + "px"}
            })
            // 数据展示内容高
            const contextHeight = computed(()=>{
                return {height : propsLiseNum * propsLineHeight + "px"}
            })
            // 获取当前滚动条滑块位置
            const appScroll = (e)=>{
                scrollTop.value = e.target.scrollTop;
            }
            // 根据滑块位置计算当前应该展示的数据
            const counter = computed(()=>{
                // 滚动条数
                const index = scrollTop.value / propsLineHeight;
                const start = parseInt(index)
                const end = start + Math.ceil(propsLiseNum * propsLineHeight / propsLineHeight)
                const list = centerList.value.slice(start,end)
                return list;
            })
            return {
                counter,
                spaceStyle,
                appScroll,
                lineHeight,
                contextHeight
            }
        }
    });
    app.mount("#app");
</script>

结果: