在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ 前端數(shù)據(jù)綁定如何避免數(shù)據(jù)過多導致頁面的卡頓?

前端數(shù)據(jù)綁定如何避免數(shù)據(jù)過多導致頁面的卡頓?

用變量news來保存從接口獲取的新聞數(shù)據(jù)

接口:api.xxx.com/api/news/?pageNumer=1&pageSize=50

js:
this.setData({
  news:data.data
})

wxml:
<block wx:for="{{news}}" wx:for-item="new">
  <view>{{new.xx}}</view>
</block>

上拉加載更多新聞:
api.xxx.com/api/news/?pageNumer=2&pageSize=50

if(this.data.totalPage > this.data.pageNumber) {
  var newData = this.data.news.concat(data.data);
  this.setData({
    news: newData
  });
}

當上拉6次時,newsData 數(shù)據(jù)為50 * 6 = 300條數(shù)據(jù),直接綁定到網(wǎng)頁上會卡2秒才完成。
約加載越卡。
這種情況有什么好的解決方法?

回答
編輯回答
淺淺

1.看下函數(shù)節(jié)流和防抖,控制分頁請求,
避免短時間內(nèi)進行多次分頁請求,保證每次只多加載50條數(shù)據(jù)

2.節(jié)點優(yōu)化,避免過多無用的節(jié)點,盡量減少圖片質(zhì)量,進行圖片懶加載。
同時可以做下第一個回答所說的dom移除的工作,但是要計算好占位。

其實第一點應該就能很大的解決問題了

2017年10月19日 11:44
編輯回答
茍活

滾動的時候,做dom的移除的工作,只展示出現(xiàn)在屏幕中的新聞,屏幕外面的新聞把內(nèi)容dom移除,你可以查考下微信網(wǎng)頁版!微信網(wǎng)頁版幾千個好友就是這么做的!

2017年6月7日 12:51
編輯回答
好難瘦

類似于分頁,只展示當前頁的數(shù)據(jù)

2018年1月31日 04:09