【Vuejs】1116- 总结 Vue 的长列表优化方案
今天主要想跟大家聊聊长列表优化，有的时候我们需要在页面上显示特别长的列表，这种情况主要发生在移动端或者后台管理的页面中，在移动端往往有个下拉刷新内容的功能，不停地往上翻，到底部后会加载更多内容，这样会导致列表中会有很多元素，从而导致页面的卡顿，由于元素多了以后，浏览器渲染也需要时间，特别是新增了一些元素，也会触发浏览器的重排重绘，因此无论是内存的占用或者GPU的渲染都会给性能带来一些损耗。
举个栗子🌰：
假设我们需要在页面长列表中渲染10000条数据，代码如下：
//APP.vue
<div class="app">
<div class="scroller">
<Listltem v-for="item in item" :key="item.id" :item="item" />
div>
div>
</template>
less" scoped>
//组件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+ 篇原创文章
评论