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