前端数据绑定如何避免数据过多导致页面的卡顿？

前端数据绑定如何避免数据过多导致页面的卡顿？

用变量news来保存从接口获取的新闻数据

接口：api.bieryun.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.bieryun.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 数据为50 * 6 = 300条数据，直接绑定到网页上会卡2秒才完成。
约加载越卡。
这种情况有什么好的解决方法？

滚动的时候，做dom的移除的工作，只展示出现在屏幕中的新闻，屏幕外面的新闻把内容dom移除，你可以查考下微信网页版！微信网页版几千个好友就是这么做的！

类似于分页，只展示当前页的数据

1.看下函数节流和防抖，控制分页请求，
避免短时间内进行多次分页请求，保证每次只多加载50条数据

2.节点优化，避免过多无用的节点，尽量减少图片质量，进行图片懒加载。
同时可以做下第一个回答所说的dom移除的工作，但是要计算好占位。

其实第一点应该就能很大的解决问题了