【Vuejs】1116- 總結 Vue 的長列表優(yōu)化方案
今天主要想跟大家聊聊長列表優(yōu)化，有的時候我們需要在頁面上顯示特別長的列表，這種情況主要發(fā)生在移動端或者后臺管理的頁面中，在移動端往往有個下拉刷新內容的功能，不停地往上翻，到底部后會加載更多內容，這樣會導致列表中會有很多元素，從而導致頁面的卡頓，由于元素多了以后，瀏覽器渲染也需要時間，特別是新增了一些元素，也會觸發(fā)瀏覽器的重排重繪，因此無論是內存的占用或者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>
導入插件后，效果是一樣的。
?? 好了， 以上就是我的分享，歡迎大家在評論區(qū)討論鴨～
希望小伙伴們點贊 ?? 支持一下哦～ ??，我會更有動力的 ??
回復“加群”與大佬們一起交流學習~
點擊“閱讀原文”查看 120+ 篇原創(chuàng)文章
評論
圖片
表情