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>
结果: