【Vuejs】1116- 总结 Vue 的长列表优化方案
前端自习课
共 1038字,需浏览 3分钟
·
2021-10-22 04:25
今天主要想跟大家聊聊长列表优化
,有的时候我们需要在页面上显示特别长的列表,这种情况主要发生在移动端或者后台管理的页面中,在移动端往往有个下拉刷新内容的功能,不停地往上翻,到底部后会加载更多内容,这样会导致列表中会有很多元素,从而导致页面的卡顿,由于元素多了以后,浏览器渲染也需要时间,特别是新增了一些元素,也会触发浏览器的重排重绘
,因此无论是内存的占用或者GPU的渲染都会给性能带来一些损耗。
举个栗子🌰:
假设我们需要在页面长列表中渲染10000条数据,代码如下:
//APP.vue
<div class="app">
<div class="scroller">
<Listltem v-for="item in item" :key="item.id" :item="item" />
div>
div>
</template>
//组件Listltem.vue
<div class="list-container">
<span>id{{item.id}}span>
<span>name{{item.count}}span>
<span>age{{item.count}}span>
div>
</template>
ListItem.vue 组件
//ListItem.vue
<div class="list-container">
<span>id{{item.id}}span>
<span>name{{item.count}}span>
<span>age{{item.count}}span>
div>
</template>
导入插件后,效果是一样的。
😊 好了, 以上就是我的分享,欢迎大家在评论区讨论鸭~
希望小伙伴们点赞 👍 支持一下哦~ 😘,我会更有动力的 🤞
回复“加群”与大佬们一起交流学习~
点击“阅读原文”查看 120+ 篇原创文章
评论