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

简介: 前端数据绑定如何避免数据过多导致页面的卡顿? 用变量news来保存从接口获取的新闻数据 接口:api.bieryun.com/api/news/?pageNumer=1&pageSize=50 js: this.

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

用变量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移除的工作,但是要计算好占位。

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

相关文章
|
12天前
|
前端开发 JavaScript
回顾前端页面发送ajax请求方式
回顾前端页面发送ajax请求方式
33 18
|
6天前
|
监控 JavaScript 前端开发
前端的混合之路Meteor篇(六):发布订阅示例代码及如何将Meteor的响应数据映射到vue3的reactive系统
本文介绍了 Meteor 3.0 中的发布-订阅模型,详细讲解了如何在服务器端通过 `Meteor.publish` 发布数据,包括简单发布和自定义发布。客户端则通过 `Meteor.subscribe` 订阅数据,并使用 MiniMongo 实现实时数据同步。此外,还展示了如何在 Vue 3 中将 MiniMongo 的 `cursor` 转化为响应式数组,实现数据的自动更新。
|
7天前
|
JSON 分布式计算 前端开发
前端的全栈之路Meteor篇(七):轻量的NoSql分布式数据协议同步协议DDP深度剖析
本文深入探讨了DDP(Distributed Data Protocol)协议,这是一种在Meteor框架中广泛使用的发布/订阅协议,支持实时数据同步。文章详细介绍了DDP的主要特点、消息类型、协议流程及其在Meteor中的应用,包括实时数据同步、用户界面响应、分布式计算、多客户端协作和离线支持等。通过学习DDP,开发者可以构建响应迅速、适应性强的现代Web应用。
|
27天前
|
JSON 前端开发 Java
震惊!图文并茂——Java后端如何响应不同格式的数据给前端(带源码)
文章介绍了Java后端如何使用Spring Boot框架响应不同格式的数据给前端,包括返回静态页面、数据、HTML代码片段、JSON对象、设置状态码和响应的Header。
96 1
震惊!图文并茂——Java后端如何响应不同格式的数据给前端(带源码)
|
19天前
|
JavaScript 前端开发 Python
django接收前端vue传输的formData图片数据
django接收前端vue传输的formData图片数据
19 4
|
2月前
|
前端开发 JavaScript API
前端JS读取文件内容并展示到页面上
前端JavaScript使用FileReader API读取文件内容,支持文本类型文件。在文件读取成功后,可以通过onload事件处理函数获取文件内容,然后展示到页面上。
56 2
前端JS读取文件内容并展示到页面上
|
23天前
|
前端开发 数据安全/隐私保护
angular前端基本页面验证
angular前端基本页面验证
28 1
|
27天前
|
前端开发
搭建个人博客--1、前端页面
搭建个人博客--1、前端页面
19 1
|
7天前
|
NoSQL 前端开发 MongoDB
前端的全栈之路Meteor篇(三):运行在浏览器端的NoSQL数据库副本-MiniMongo介绍及其前后端数据实时同步示例
MiniMongo 是 Meteor 框架中的客户端数据库组件,模拟了 MongoDB 的核心功能,允许前端开发者使用类似 MongoDB 的 API 进行数据操作。通过 Meteor 的数据同步机制,MiniMongo 与服务器端的 MongoDB 实现实时数据同步,确保数据一致性,支持发布/订阅模型和响应式数据源,适用于实时聊天、项目管理和协作工具等应用场景。
|
14天前
|
存储 前端开发 API
前端开发中,Web Storage的存储数据的方法localstorage和sessionStorage的使用及区别
前端开发中,Web Storage的存储数据的方法localstorage和sessionStorage的使用及区别
63 0